WPF/日記3
何がしたいのか
もう一度自分がやりたいことを整理してみて、XAMLファイル上にどのような3D表現が必要になるのかを書き出してみます。
- チャットを行うアバタ(人型)の動的配置
- チャットの背景となる写真のカキワリ
- カメラ
アバタについては、チャット参加者が増えるごとに動的に一つずつ増えるイメージでいます。これはあとでモデリングしようと思っているので後回しにします。できれば、参加者の操作に応じて、移動やちょっとしたアクションをさせたいです。
カキワリは四角形のポリゴンに写真を貼り付けて、アバタが動き回る場所の背後にでも置いておくだけでいいと思います。
カメラについては、ユーザがチャットに参加した際にカキワリによる「場」を印象付けるようにちょっとした動きをつける演出があるぐらいで、基本的に定点を撮影することになるつもりです。
カキワリの配置
とりあえず手をつけやすいところから始めてみることにします。先日、サンプルコードをコピペして、既に平面ポリゴンを表示するところまではできているので、その平面に写真を貼り付けてやれば、とりあえず背景のカキワリのできあがりです。
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="#CCCCCC"/>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</MaterialGroup>
</GeometryModel3D.Material>
上記のコードは、サンプルにあったポリゴンの材質(マテリアル)を制御する部分の抜粋です。各タグについて検討してみます。
タグ
これはポリゴンの表面の材質に関する情報を括るタグのようです。
タグ
Groupと書いてあるところから鑑みて、複数の材質を規定する場合にこのタグを使って括っておくといいことがありそうです。プログラム上でこのタグで括られた材質の情報をまとめて変更したりできるといいなぁ、ぐらいに今は思っておきます。
タグ
材質の中でもDiffuse色を操作するブラシの情報を括るタグのようです。Diffuseは拡散光に関するものなので、物体の表面に光が当たったときにどんな色を返すかということに関係するものでしょう。Diffuseの仲間にAmbientやSpecularなんてのも標準であるんじゃないかと思います。
タグ
これは単色で塗りつぶすブラシの情報のようです。Colorメンバに「#cccccc」といった色情報を記入するとその色で指定の部分を塗りつぶしてくれるみたいです。
以上のことから、どうもブラシを変えてやれば平面ポリゴンに写真を貼り付けられそうな気がしてきました。というわけで
<ImageBrush
ImageSource="images/background.jpg"
Stretch="Fill"
/>
タグ
これはImageSourceメンバで指定された画像を用いてポリゴンを塗りつぶしてくれるブラシの情報のようです。Stretchメンバに「Fill」と書いてありますが、値を変えることで塗りつぶす際の画像の伸展具合を調整できそうな気がします。ただ、今は必要性を感じていないので調べてないです。
ここで一つ問題が発生します。ImageSourceメンバに「images/background.jpg」と指定しましたが、この画像は実際にどこに置けばいいのでしょうか?とりあえずDebugフォルダの中にxbapファイルが作られるので、Debugフォルダの中に「images」フォルダを作成してその中に画像を放り込んでみました。が、画像の指定がおかしいとのスクリプトエラーが出てコンパイルが通りませんでした。仕方がないのでソリューションエクスプローラ上で新しく「images」フォルダを作ってそこに画像を入れなおしたところ、XAMLのデザインビューに写真の貼り付けられたポリゴンが無事に表示されました。しかし、コンパイルが通ったXBAPファイルを開いてみると、こっちでは画像がちゃんと表示されない事態が発生しました。画像が重すぎたのか、それともDebug版のXBAPファイルからの画像へのパスが切れているのかイマイチわからない状況となっています。まぁ、おいおい解決するとして、とりあえず後回しにします。XBAPファイルを開いているブラウザを閉じるとき、一瞬だけ画像が表示されているのでパスは切れていないと予想します。画像を追加したら急激にXBAPファイルのサイズが膨らんで、動作も重くなったので、ソリューションエクスプローラに追加した画像ファイルはそのままXBAPファイル(が呼び出すexeファイル)に挿入されていると思われます。そして、デジカメで撮った未加工の写真(デカいJPEGファイル)をポリゴンに貼り付けたので、処理が重くなったのではないかと予想されます。次はちっちゃいファイルを貼ることにしましょう。