藤澤先輩による多重化映像技術ワークショップ後半

こんにちは、渡邉です

多重化映像技術ワークショップの第3回と第4回をまとめて終わらせました。
他人の作った物を見るだけでも楽しいですが、それを自分でやってみるのはもっと楽しいです。

さて、今回はシェーダー、特にフラグメントシェーダーをもう少し詳しくやりました。フラグメントシェーダーとは表示する色や明るさ、合成や出力を司るものって感じですかね。

第3回ではフラグメントシェーダを使って画像のフェードアウトをやってみました。画像を2枚用意し、最終的な出力の画素値を時間が経つにつれて1枚目の画像の画素値から2枚目の画像の画素値に近づけていくものです。

フェードアウト1
のり
フェードアウト2
うっすら消えていき
フェードアウト3
梅干しが現れた

ちなみに僕は梅干しが苦手です。

こちらがシェーダーのコードになります。

uTimeが経過時間で、時間が増えていくとcolorAからcolorBに近づいていく感じです。この時間の数値は板ポリにアタッチされたスクリプトから渡されているようです。

 

板ポリスクリプト
ソースコード

updateという関数は毎フレーム呼ばれる関数で、引数のdtはおそらく1フレームの経過時間(たぶんDeltaTimeの略)でしょうね。
this.timeに1フレーム毎の時間を足していって経過時間としています。

変数tにこの時間を保存。

このthis.timeが10になったら、つまり10秒たった場合0にリセット。

このスクリプト内にあるマテリアル(今回はシェーダーかな?)にuTimeという名前の変数として変数tを渡しているっぽいです。たったこれだけ。

初期化の部分はちょっと面倒なので割愛しますが、ざっくりいうと画像やシェーダーの定義、シェーダーで使う変数の定義とかやってるんじゃないかと思います。

 

第4回ではついに多重化の実装をしました。

具体的にどうやるかは書けませんが、シェーダーでちょちょいのちょいっと(笑)

第3回のおにぎりの画像を使ってやってみましたが、どうもうまく映らなかったので別の画像にしました。ネットから拾ってきたロックマンゼロのサントラ1と2のジャケットの画像です。(著作権的に問題があったら消します。)

実行結果1
実行結果1
実行結果2
実行結果2

ちょっとわかりにくいかもしれませんが、メガネの部分だけロックマンゼロ2のサントラのジャケット画像になってます。
そしてやっぱり実装中にソースの写し間違いが多発しました。
先輩からコード貰ってコピペした方が確実でしょうが、見ながら自分で書いたほうが理解は深まるはず、と信じています。

これで多重化映像技術について藤澤先輩からの引継ぎが終わりました。
これぐらいのすごいことをこれから自分ができるのか不安でしょうがないですが、頑張っていくしかないので頑張ります。

以上で多重化映像技術ワークショップ終了です。藤澤先輩ありがとうございました。

藤澤先輩による多重化映像技術ワークショップ前半

こんにちは、渡邉です。

今日は藤澤先輩による多重化映像技術のワークショップで多重化の歴史やPlayCanvasについて教わりました。第1回と第2回を終わらせることができました。

予定では第4回か第5回まで続くようです。

今までこの目で見てきたExPixelやExField以前のものについても知ることができて、進化の歴史を感じました。

また、PlayCanvasを久しぶりに触りました。3年前期のゲームプログラミング以来でしょうか。

アカウント登録すればwebブラウザだけでゲームを作れるお手軽さ

第1回で多重化映像技術の歴史とPlayCanvasの基本操作、
第2回でJavaScriptとシェーダーの触りをやりました。と言っても画像をxz平面に広がる板ポリに張り付けて表示させるだけですがね。

少し前に適当に作ったおにぎりの画像を適当に選んだので画面サイズにあってませんが、とりあえず表示させることができたので良しとしてます。

以下、実行結果リンク
playcanv.as/b/bgUtlMLf/

 

JavaScriptも久しぶりでした。Unityでもちょっとやったんですけどねぇ。
先輩のコードを書き写しましたが、スペルミスがいろいろあってちゃんと実行できるまで時間かかりました。

 

シェーダーの話を聞いたことはありましたが実際に触ってみるのは実はこれが初めてです。今まで何やってたんだ俺…。

シェーダーのコードについては先輩の話を聞いて写しただけで詳しくやらなかったので、自分で何をやっているのか考えてみました。

まずは頂点シェーダー

vertex shader
VertexShader

vertexって頂点ってことですよね(Google翻訳で確認)。
たぶん板ポリの頂点を使うためのコードだと思います。では読んでいきます。

attributeは属性という意味(のはず)。変数の種類かな?
vec3は3次元ベクトル、aPositionは名前からして位置でしょう。3次元ベクトルのx,y,zを使ってる感じか。
vec2は2次元ベクトル、aUv0はUV座標(画像を張り付ける位置)かな。

uniformは制服?統一とかって意味もあるそうですがよくわかりません。
mat4はmatrix(行列)の略で4×4行列だと思います。
matrix_modelは板ポリゴンのモデル行列、matrix_viewProjectionはビュープロジェクション行列だな。

varying…? わからん。直訳は「変化する」らしいですが…。
vUv0、またUV座標ですか。

で、void main(void) C言語のmain関数っぽいと思いました。引数なし、と。
vUv0にaUv0を代入してgl_Positionにビュー行列とモデル行列をかけた位置情報を渡しているんですね。

gl_Positionというのは調べたところ組み込みの変数で、この変数に情報を渡さなければいけないそうです。

 

では次にフラグメントシェーダー
fragmentとは欠片とか断片とかって意味だったか。
色についてのシェーダーらしいですが、やはりよくわかりません。

中身を見てみます。

fragment shader
FragmentShader

uniformまでは頂点シェーダーで出てきました。
sampler2Dとは何だろうか。おそらく画像データから色情報を抽出したものかなと思います。

で、main関数

4次元ベクトル型変数のcolorに画像の色情報を代入
gl_FragColorにそのcolor変数を代入してますね。

colorにはたぶんRGBAの4要素が入っていると思います。
gl_FragColorはやっぱり組み込み変数らしいですが、頂点シェーダーと違って、絶対必要というわけではないそうです。
ただ、普通は色情報を使うので基本的には使うことになる変数だということみたいです。

今までゲームエンジンを使って難しいことを全然考えずに画像を表示させてきましたが、見えないところでいろいろやってるんですねぇ。ゲームエンジンの便利さにかまけてこういったところを疎かにしてしまうのは良くないと思いました。(小波感)

次回はこのシェーダーの詳しい話と多重化のためのコードをやるそうです。
いやぁ楽しみですなぁ!