こんにちは、渡邉です
多重化映像技術ワークショップの第3回と第4回をまとめて終わらせました。
他人の作った物を見るだけでも楽しいですが、それを自分でやってみるのはもっと楽しいです。
さて、今回はシェーダー、特にフラグメントシェーダーをもう少し詳しくやりました。フラグメントシェーダーとは表示する色や明るさ、合成や出力を司るものって感じですかね。
第3回ではフラグメントシェーダを使って画像のフェードアウトをやってみました。画像を2枚用意し、最終的な出力の画素値を時間が経つにつれて1枚目の画像の画素値から2枚目の画像の画素値に近づけていくものです。
ちなみに僕は梅干しが苦手です。
こちらがシェーダーのコードになります。
uTimeが経過時間で、時間が増えていくとcolorAからcolorBに近づいていく感じです。この時間の数値は板ポリにアタッチされたスクリプトから渡されているようです。
updateという関数は毎フレーム呼ばれる関数で、引数のdtはおそらく1フレームの経過時間(たぶんDeltaTimeの略)でしょうね。
this.timeに1フレーム毎の時間を足していって経過時間としています。
変数tにこの時間を保存。
このthis.timeが10になったら、つまり10秒たった場合0にリセット。
このスクリプト内にあるマテリアル（今回はシェーダーかな？）にuTimeという名前の変数として変数tを渡しているっぽいです。たったこれだけ。
初期化の部分はちょっと面倒なので割愛しますが、ざっくりいうと画像やシェーダーの定義、シェーダーで使う変数の定義とかやってるんじゃないかと思います。
第4回ではついに多重化の実装をしました。
具体的にどうやるかは書けませんが、シェーダーでちょちょいのちょいっと(笑)
第3回のおにぎりの画像を使ってやってみましたが、どうもうまく映らなかったので別の画像にしました。ネットから拾ってきたロックマンゼロのサントラ1と2のジャケットの画像です。(著作権的に問題があったら消します。)
ちょっとわかりにくいかもしれませんが、メガネの部分だけロックマンゼロ2のサントラのジャケット画像になってます。
そしてやっぱり実装中にソースの写し間違いが多発しました。
先輩からコード貰ってコピペした方が確実でしょうが、見ながら自分で書いたほうが理解は深まるはず、と信じています。
これで多重化映像技術について藤澤先輩からの引継ぎが終わりました。
これぐらいのすごいことをこれから自分ができるのか不安でしょうがないですが、頑張っていくしかないので頑張ります。
以上で多重化映像技術ワークショップ終了です。藤澤先輩ありがとうございました。
