誤差と破綻で画作りを試みた第2回Shader1weekCompo

2020年5月18日 20:12

Kuyuri Irohaと申します。

私はブタジエンさん (@butadiene121) と避雷さん (@lucknknock) が運営しているShader1weekCompoというイベントの第2回に参加しました。
この記事では、参加するにあたって作った作品である「終わりに非ず」で挑戦したことを紹介します。

GitHubのリポジトリはこちらです。最低限度のリファクタリングしかしていないのでかなり汚いですが、私は今回ピュア WebGL 2.0とTypeScriptとwebpackで開発していたため、コードが読めるようにしておくためにリポジトリを公開させていただきます。

技術的なコンセプト

この作品の技術的なコンセプトは、「誤差と形状破綻を画として活かす」です。

誤差とは、原点から遠く離れることで起こる浮動小数点誤差で、浮動小数点の精度が起こすものです。
ちょうどDice1900さんという方の「Floating-point Precision Breakdown」ワールドの紹介動画がとてもわかりやすかったので引用させていただきます。

「Floating-point Precision Breakdown」というワールド。
Unityの仕様上、原点から離れれば離れる程物体の座標の
精度が落ちるのだが、それを身をもって体験できるワールド。ただのUnityの仕様なのだが、自分や周囲の物が次第に崩壊していく様は、SCPじみた怖さがある。#VRchat #VRChat_world紹介 pic.twitter.com/tOcy54itex
— Dice1900 (@BigVinegar) March 15, 2020

この誤差を、「終わりに非ず」では形状表面に現れる色ノイズとして利用しています。下の画像の様な模様は原点付近であれば起こりません。今回は、原点からz方向に400ほどの地点から時間経過でどんどんz値を増やしていくことで誤差を発生させています。

終わりに非ず（浮動小数点誤差）

形状破綻とは、ここではレイマーチングのレイが形状を突き抜けてしまうことで起こるものを指します。（正式な名称を知らないため、我流の呼び方をしています。ご了承ください。）下の画像のような模様は、周りに描かれている波打つ地形のような形状に対してレイが激しく突き抜けることで発生するものです。（と私は考えています。ここらへんは感覚で画を整えていたので違うかもしれません。）

終わりに非ず（形状破綻）

以上2つの、ある種のエラーが起こす模様が私は大好物であったため、これらをどうにかエラーとしてではなく作品として見せられないか、と思い立ったことが今回の制作の発端でした。

暴れる絵を作品としてまとめる

誤差と形状破綻を使った作品というコンセプトは決まりましたが、これを使った画だけでは目まぐるしく変わる画面の中に作品としての輪郭を見出す事ができませんでした。そこで私は、せっかく「つづく」という作品テーマが用意されているShader1weekCompoに参加するのだからちょっとかっこいい模様だけで終わらせるのは悲しいと思い、メッシュと文字描画を加えることで作品の輪郭を作ることを試みました。

まず、追加するメッシュをステラー工房さんの【女性素体『Archetype lady』】をBlenderで改造して作成しました。

コメント 2020-05-18 095600

ライティングは、いい感じの角度にディレクショナルライトを配置（フラグメントシェーダに直書き）して、ディフューズ反射係数を2値にしてギラついた印象にします。更に背景の色味と似た色のリムライティングとアンビエントライトを加えることで、形状をはっきりと認識できるようにしつつ、背景の世界観に溶け込むようにしました。

コメント 2020-05-18 103221

次に文字描画ですが、これはCreateJSのTextを使用してCanvasに描画した文字をテクスチャ化しています。以下の記事の、Three.jsでテクスチャ作成をしている部分をピュア WebGLに書き替えて実装しています。

フォントはGoogle FontsのNoto Serif JPです。この雰囲気には和な雰囲気のフォントがやはり映えます。（背景の模様のカオスに有機的な印象を受けるからでしょうか）

あとは、細々とした要素としてこんなことをやりました。

・上下に帯を付けてシネマティックにする
・描画を1フレーム飛ばしにしてヌルヌル感を減らす
・GPGPU Trailでスピード感を出す
・距離フォグを使ってレイが突き抜けたときに出る模様を強調する

以上の要素を使って、3次元的な混沌をスクリーン上では作品として輪郭を感じることができるように調整して完成としました。

終わりに非ず

所感

今回、WebGL 2.0の要素をたくさん使って開発ができたので、学びが大量にありました。結果的に目立ったWebGL 2.0要素としてはMRTしかないですが、制作途中の段階ではTransform feedbackでパーティクルを飛ばしていたので、個人的にはWebGL 2.0の快適さを堪能できた開発でした。

また、TypeScriptとWebGLの相性がよく、用意されている型と関数の名前から何を入れれば何が返ってくるのかが何となく分かるので、ピュア WebGLが初めての私でもなんの苦労もせずに開発できました。むしろ、DirectX11から入った私にとってはThree.jsより触り心地が良かったです。

最後に、Shader1weekCompoとても楽しかったです。こんなにスピード感のある開発を自分はあまりやらないため、疲弊もしましたが刺激的な1週間でした。ありがとうございます。そして、おつかれれさまでした！

この記事が気に入ったらサポートをしてみませんか？