過去の独りごち/独りごとは こちら
過去のJavaアプレットは こちら

現在、BBSに書き込みキーを設けています。「書き込みキー」欄に、「MYOMOTO」をカギカッコは抜いて、 半角、小文字で 打ち込んで書き込みをしてください。 このキーワードは時々変更されますが、その都度こちらにて報告します。

3/10 ため息つくにも一年

ホームページの画像(？)を更新してみました。

「ホームページの絵とかいいからGOWPFを上げろよ」と突っ込んでくれる人ももはや居ないので好き勝手やっております。 前回のホームページ画像の更新から1年以上空きましたが、前回はCanvas2Dを使っておりました。 で、今回はWebGLとGLSLも使ってみたという訳です。

別にWebGLもGLSLも当初は使うつもりもなかったのですが、 漠然と「レイマーチング法によるレンダラで何かやってみたい」と思っておりまして、 最初はCanvasでモザイク状にレンダリング結果が表示されるようにしてあとは装飾で誤魔化すと、 そんな調子で考えていたのですが……


Canvasでレイマーチング挫折

まあこんな調子ですので「これでは装飾の方がいかにも大変である」と判断してWebGLに手を染めることにしました。

WebGL+GLSLさえあれば板ポリ1枚でレイマーチングを自由自在に出来るという事は何年か前に mac上で(仕事の合間に)コッソリOpenGLでプログラミングして遊んでいたので分っておりましたから、 WebGLを導入するだけで予想通りの爆発的なパフォーマンス向上が得られました。 もうこれWebブラウザだけでいいんじゃないかな、と思ってしまいます。

しかしながら、そんなWebGLにも欠点がありまして、シェーダの読み込みに微妙に時間がかかるのです。 ページを移動するたびにシェーダの読み込みが発生するのはストレスが溜まるということで、 クリックするまで動かさないことにしています。 これはコンパイルに時間がかかってるんですかね？キャッシュしてくれる仕組み等が出来れば 今回のホームページのように「Webページに張り付けるちょっとした動き物」程度ならストレスが随分無くなりそうですね。

それから、GPUへの負荷を掛けまくると簡単にUIスレッドの動作に支障をきたしてしまうというのも格好悪いですね。 かつて、Athlon64x2で2コアCPUデビューした時には「バックグラウンドで重いことをしても普通にWebとか見れる！」 と感動したものですが、GPUは数百～数千のオーダーでコアがあるのに余力を残してくれない、 いつも全力のモーレツ社員であります。これはイカン。僕みたいにいつも片手間の窓際族でもイカンですが。 ともかくそういう理由でクリック一発で動き出さずに色々聞くようになっています……ダサい！ 一応クリックすると「ハングアップするかも」などと脅しますが、5年以上前の MacBook Air mid2011+Safariでも滑らかとはいえないまでも特に問題なく動きましたから、 さすがにそれ以上弱い機械で動かしてハングアップした！などと言われても自己責任としか言いようが無いのです。

……と、思っていたのですが、スマホとかいうPCと比べたら非力なデバイスでもWebGLが普通に動いてしまう！ むしろ若い連中にはそっちが本命みたいになっちゃってる、俺年寄り！！！１１！！ と嘆いてないでとりあえず手持ちのスマホであるXperia Z1で動かしたら見事に固まってしまいました。 しかし1FPSなら一応動いたので1FPS動作のモバイル版設定も付けたというわけです。 もうちょっと新しいスマホが欲しい気もしますがお金も無いので型落ちを安く買ってつないでおります。

そんないつも通りの愚痴は置いておくとして、GLSLが使えるようになったのでとりあえず フラクタル図形でも書くかと思い、レイマーチングはほったらかしてリアプノフ・フラクタル なんぞを書いたりしてみました。


リアプノフ・フラクタル

しかし問題がありまして色付けが適当なせいかアニメーションさせてもあんまり面白くならなかったので これを飾るのはやめにしました。 余談ですがリアプノフ・フラクタルの名前の元となった数学者・化学者であるアレクサンドル・リアプノフの 弟であるセルゲイ・リャプノフは作曲家で、ピアニストとしてもフランツ・リストの孫弟子にあたるそうで、 兄弟揃って歴史に名を残す天才という羨ましい家系です。 ファミリーネームのラテン文字表記であるlyapunovは数学の分野では「リアプノフ」、 音楽の分野では「リャプノフ」と表記するのが一般的なようで、兄弟でファミリーネームの 日本語表記が違うという不思議なことになっています。 僕は弟のセルゲイ・リャプノフの方をクラシック音楽を聞き漁る過程で先に知ったのですが、 後期ロマン派、それもリストの孫弟子ですから、リストから確実に受け継がれた高度な技巧と 華やかな旋律が光る優れた音楽を残しています。お勧めです！

さて、ホームページの絵そのものの話にやっと移ります。 とは言っても、何のことはなく今更のmenger spongeである事はmenger spongeを知ってる人には一発でバレると思います。 ともかく、表示されているプリミティブとしては

これだけですが、レンダリングの方法として先に述べた通りのレイマーチングを用いているので、 ディフューズ色の決定時に「物体の表面に達するまでに何回レイが前進したか」 によって色相が変化するようにしています。 床の直方体に虹模様が発生するのはそのためですが、床はむしろ影を見せるために置いております。 で、角柱の置き方はmenger spongeをちょっと工夫する程度ですが、 球体をクリッピングするようにしているので意外に面白い絵が生まれますね、 面白いって言ってください。お願いします。

それから、スペキュラ色の決定にCook-Torranceモデルを用いて、青を極めて強く設定しました。 やはりCook-Torranceシェーディングは簡単にヌルテカ感が出て宜しいです。 そのうえでアンビエントオクルージョンで影を付けて絵柄を濃くしてみました。 …実はアンビエントオクルージョンの効果がスペキュラ要素に反映されてないのですが、 絵的に面白いのでそのままにしてあります。自分で青く発光しているかのようにも見えますね。 影付けはアンビエントオクルージョン以外にやってないです。十分濃くなったからもういいかな、と。

そういえば今年はこのサイトの開設から20周年でした。今思い出しました。 前々からレイトレ物をホームページに飾りたいと思っては忘れていましたから、やっと出来たという感じです。 Javaアプレットで実装することになるのかな、となんとなく思っていましたが、 HTML+Javascriptで実装できる上にGPUの機能も大いに活用できるなど20年前からは 想像もつかない事になってしまったな、と思いました。 当時は「えっ！？パソコンでグーローシェーディング！？テクスチャも貼れるの！？す、すごすぎー！」 という状態でシェーダ記述言語どころかGPUの概念すら無い時代でした。 今後はこの程度のシェーダならいきなり動き出す状態で張り付けても誰も何も気にせず鑑賞していただける、 そういう状況になるのが楽しみと言ったところでしょうか。 今は公開を停止しておりますが、拙作ExtremeShootersも作った当初は重い、動かないといった ご意見をよく頂きましたが、数年のうちに誰もが普通に遊べるようになって行ったのです。

最後になりましたが、実装に当たっては以下のサイトを参考にさせていただきました。ありがとうございます！



Hayase Taku(SANDMAN)

戻る