2018という日本唯一のデモパーティが開催され、そこに初参加してきました。Compo作品の動画やソースは以下から見ることができます。Compo用のネタでお蔵入りしていたシェーダーを流用して、iq氏の4kテンプレートで大急ぎで作りました。2は、偉大な先人の方々の解説記事や作品に多大な影響を受けています。誰の作品にどんな影響を受けたかはこちらの記事に全てまとめているのでご参照ください。qiita.comこの記事では、先人達への感謝の気持ちを込めて、さらに深堀して作品の解説をしたいと思います。CompoのYoutube動画を何度も見て、以下の条件に当てはまるものを作ろうと考えました。「これが1パスGLSLだけで作られてるの!?」と一人にでも思っていただけていればうれしいです。2の元となるtraveler.という作品を2週間で作りました。グラフィックの知識が多少あったので、割とすんなりレイマーチングを習得することができました。BETAtraveler.その後10月の下旬までの4ヵ月間、シェーダー芸のポキャブラリーを増やすために、Shadertoyや既存の作品のコードを読んだり、小ネタを実装したりしていました。github.comロード画面について当日の上映時は緊張で回りの音が聞こえてなかったんですけど、アーカイブを見ると、最初のロード画面に困惑されている方が多そうでした。Sandboxでは事前にロードする処理等は書けないので、実際にロードしているわけではありません。30秒もロード画面を表示したのかといいますと、シェーダーのコンパイルに20秒近く掛かってしまうからなんです。Sandboxはコンパイル中も時間が進み続けてしまい、20秒もコンパイルをしていると、作品が途中から再生されてしまうという可能性があったんです。最初の30秒間に待機画面を用意して、必ず作品を最初から再生してもらう、というのが狙いでした。上映時はブラウザに、リハーサルした際のキャッシュが残っていたのか一瞬でコンパイルが完了していましたね...皆さんには30秒待ってもらうことになってしまいましたが、逆にインパクトがあったのかなぁとも思います。背景の3Dオブジェクトは、すべてメンガーのスポンジを改造したものを2つ重ねて作りました。序盤のシーンでは重ねたもののうち、一つをbeatに合わせてIFS中のイテレーション毎に回転させています。後半は、追加でz軸を中心に回転foldをして複雑な形状を作りました。ポストエフェクト今回は描画結果に対して3種類のポストエフェクトを使用しました。グレアエフェクト中央の球体と進行方向にグレアエフェクトを使用しました。いっても1パスなので、よく使われるような描画結果をボカして合成するといった手法は使えないので、レイの進行方向とオブジェクトの角度を光量とすることにしました。0.05;かなりいい加減な方法ですが、割とよい雰囲気を出せたように思います。レンズダートレンズに埃のようなものが付いているときにでるあれです。バトルフィールドか何かのポストエフェクトで見て、かっこよかったので入れてみました。実装はとても単純で、画面をいくつかのセルに分けてそれぞれに、ダートエフェクトを表示します。その時にセル毎の乱数でダートエフェクトの位置を変えることで、不規則に並べることができます。それだけでは、密度が足りないのでいくつかのレイヤーに分けてリアルタイムでダートマスクを生成しました。4.5);ダートマスクのみを切り出したものをこちらに用意しているのでご参照ください。本来はレンズに発生する光学現象ですが、今回はいい感じに画面端を暗くすることでそれっぽい雰囲気を出しました。お手軽に画面のクオリティアップを狙えるのでオススメです。vig;疑似パーティクル途中のシーンから表示されるパーティクルのようなものは、ポストエフェクトで紹介したレンズダートとほぼ同じことをしています。中央から乱数で少し位置を変えるということをした上で、全体を真上にスクロールしました。球は、セルの中央を起点にランダムに回転させることで複雑な動きをしているように見せかけています。疑似パーティクルの部分のみを切り出したものをこちらに用意したのでご参照ください。球体や背景の模様はとても単純で、2DのIFSを使用してボックスの輪郭のみを描画しています。実際に使用しているコードがこちらにありますが、とても簡潔ですね。f));}ボックスを軸で折り畳みして平行移動・回転するという動作を繰り返すことで複雑な模様が生まれます。2の模様を作るにあたって、パラメータをtimeにして眺めながら、好みの模様ができるtimeをメモしてコードに直打ちしました。模様部分のみを切り出したものを以下に用意していますのでご参照ください。BETA球体にマッピングしたものモーションブラーモーションブラーを愚直に実装してしまうと、1フレーム内で過去のレンダリング結果をいくつか計算しなおしてブレンドするという方法になります。2も最初はそうしていたんですが、後半になるにつれて処理負荷が無視できないものになってきました...そこで、最終的に採用したのはピクセル毎に時間をずらすという単純な手法です。多少見た目がノイジーになってしまいましたが、フルHDで再生する分には許容範囲でした。実装はこのようになっています。こんなよく分からないものが付いていますが、これは、最初と最後にカメラが大きく揺れるシーンがあり、その二か所のみノイズが許容できなかったのでモーションブラーをしないようにする処理です。motion)を使用しました。2ではカメラをめり込ませたくなかったので、レイを飛ばす前にスクリーン座標をfbmでオフセットすることで、手振れさせても絶対にめり込まないようにしました。2.7GHz/GTX1050)ではコンパイル時間18秒ぐらいで、コンパイル時に6回に1回ぐらいクラッシュする状態でした...最強のコンポマシンならきっと動く!と神に祈る勢いで提出したんですが、ちゃんと上映されてホッとしています。コンパイル時間の問題はWindows限定で、おそらくAngleを経由してOpenGLを動かしているからだと推測していますが、正しいことはわかりません。ちなみにChromeのuse-angleオプションを使用してOpenGLを直接動かすと、Windowsでもコンパイルが爆速になります。詳しい話は以下の記事を見てください。nanka.hateblo.jpシェーダーがクラッシュして、もう機能追加できない!という状態が制作中に3度ほどありましたが、品質を落としたり、ifを撲滅したりすることで何とか納得のいく状態まで作り終えることができました。コンパイル時間改善にもっとも効果があったのがifの撲滅で、以下のPRを適用すると、20秒だったコンパイル時間が12秒になりました。2に入れたいものがあった...コンパイル時間の問題が無ければ追加したいものがまだまだありました...事前に用意していて入らなかったものを2つ紹介します。タイトルアニメーション一番最初に球体が飛んでいくシーンの直前に入れようとこんなものを用意していました。Compoでお蔵入りになったと言った奴です。2序盤の不自然なほど激しいカメラワークが2箇所あるのですが、そこで一瞬TDFの3Dロゴを表示しようと考えていました。BETATDFの3Dロゴ作品の最終シーンがなかなか決まらない...提出版最終シーンは、紆余曲折あって、画面に徐々にノイズが現れて、最後にシャットダウンするようなシーンになっています。最初は別プランでやっていましたが、終わり感が出せずいまいちしっくりこなかったため、同僚の@amanatsu_nit氏に相談したところ、シャットダウン演出を提案してもらい、モックまで作ってもらいました!シャットダウンエフェクトのモックここにたどり着くまでになかなか迷走しましたが、本番の前日ぐらいまでモックを見ながら、良しなに調整できたので、盛り上がる最終シーンに仕上がったと思います。Compoで3位入賞して、そこで初めて存在を知りました。同僚の活躍を見て、僕も作品を出したい!と常々思っていたのですが、時間があまりとれずに、今年の開催が12月にずれたこともあって、ようやく初参加することができました!僕はコミュニケーションが苦手なので知人以外とあまり喋ることができませんでしたが、後半はtwitterでいつも見かけるような有名人の方とも沢山お話しできてとても楽しかったです。2を作っていたんですが。(1)注目記事はてなブログをはじめよう!kaneta1011さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。