発表タイトルは「もっと綺麗で写実的な絵作りをしたい！レイマーチング向けのシェーディング技術」です。
発表の概要はこんな感じです。
AOがどういう意味を持つのか、大域照明にどんな関係にあるのか、などを学んでいただけたら嬉しいです。 レイマーチングによるAO計算の動作原理を図で解説した日本語の資料は見たことが無いので、 この発表を聞いて「なるほどな」と思ってもらえれば幸いです。
デモシーン界隈では、美しいCGアニメーションをリアルタイムに生成するプログラムを「デモ」と呼びます。
今回はUnityを使ったデモの制作に初挑戦しました。 13秒の短い無音の動画です。
「レイマーチングで動的に生成したモデル」と「ポリゴンメッシュのモデル」を混在させた作品です。 ロボットは通常の3Dモデルですが、床や柱のモデルはレイマーチングでプロシージャルに生成しました。
レイマーチングにはuRaymarchingというAssetを利用しました。
映像作品と相性が良さそうなので、Unity2017のTimelineも利用しました。
今回は試作という意味から、uRaymarchingとTimelineの他にも様々なアセットを試しました。 色々と試行錯誤をしたので、この記事ではそのノウハウを共有したいと思います。
Unityのバージョンは執筆時点の最新版である2017.2.1f1を用いました。
先日、three.jsのexamples（公式サンプル集）で紹介されている「raymarching / reflect」に関して、2つのPRを送ってマージされました。
内部的なリファクタリングですので、目に見える変化はまったくありません。
レイトレーシングやレイマーチングでは、レイを生成する処理が必要です。 そのレイの生成処理を改良しました。 上記のPRでは、カメラ行列（モデル行列 + プロジェクション行列の逆行列）からレイの生成するリファクタリングを行いました。
レイの生成方法というのはとても奥深いテーマで、さまざまな実装方法があります。 この記事では、今回のPRに至るまでの試行錯誤をまとめたいと思います。
「raymarching / reflect」は、three.jsによるレイマーチングのGLSL（GPU）実装の技術デモです。
無数のオブジェクトの描画はレイマーチングが得意とする表現です。 レイマーチングでは距離関数を利用してシーンの形状を定義します。 距離関数にmod関数を適用すると、同じ形状を無限に繰り返す repetition を実現できます。
私が2年前に実装して、three.jsのexamplesに取り込んでいただきました。その時のPRはこちらです。
解説記事もあるので、もしご興味があればあわせてお読みください。
要するに、2年前に自分で作った作品を今になって改良しました。
Let’s EncryptによるHTTPSの設定はcertbotというコマンドラインツールを利用しました。 nginxの設定変更でHTTP/2対応もできました。 どちらも驚くほど簡単で拍子抜けしました。
はてなブックマークの数が0にリセットされてしまいましたが、仕方がないので諦めました。
2011/12にServersMan@VPSを契約したので、なんと6年間もお世話になりました。
ServersManさん長い間ありがとうございました。ConoHaちゃんよろしくお願いします。
結論から言うと、ServersMan@VPSで設定されているTCPのバッファサイズ制限が厳しすぎて、ブログ用のサーバとしての利用が困難になってきたからです。
去年頃から記事へのアクセスが増えると、アクセスが非常に遅くなったり、サーバが強制停止してsshすらできない状況が頻発していました。 特にサーバが停止されると管理画面からサーバを再起動するしかなくなり、非常に困っていました。
ServersMan@VPSではOpenVZというサーバ仮想化ソフトが使われています。
OpneVZのリソース情報は /proc/user_beancounters から確認できます。
チーム名のアロマゲドンは、TVアニメ『プリパラ』に登場する白玉みかんさんと黒須あろまさんの2人組アイドルユニットの名前をお借りしました。 本チームでは、白玉みかんさん役を私が、黒須あろまさん役をkanetaaaaaさん（以下、あろま）が務めました。
予選結果は、407チーム中81位で、最終スコアは46,461でした。
アプリのチューニングはある程度はできたのですが、GET /iconsの帯域問題に対処できなかったのが敗因でした。
来年の予選突破に向けて、反省と感想を残そうと思います。
フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。
最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。
さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。
そこで、WebGLによるレイマーチングでカドのレンダリングに挑戦しました！！
レイマーチングでカド(MandelBox)を描画した結果です。
次のリンクからブラウザ上から動かすこともできます。
PauseをOFFにすると、カドがアニメーションします（負荷注意）。
描画の負荷が重たすぎる場合には、Pixel Ratioを1/2xか1/4xにしてください。
去年に引き続き、技術サークルTechBoosterのWeb本の著者のひとりとして参加します。
今回は『Think Web』の『第6章 まるで実写！？GPUパストレーシングのWebGL実装』を担当しました。
パストレーシングは3Dの描画手法のひとつで、現実世界に近い光の振る舞いをシミュレートすることで、大域照明を考慮した写実的なレンダリングを可能にします。 実際にハリウッド映画などの写実的なCGの多くには、パストレーシングやパストレーシングを発展した手法が採用されています。 写実的なレンダリングができる反面、処理時間が膨大にかかるという弱点があります。
私の章ではパストレーシングのGPU実装による高速化について紹介します。 しかも単純な高速化ではなく、ブラウザ上で3DCGを扱うWebAPIであるWebGLによりGPU実装することで、 ブラウザ上で動作するインタラクティブなパストレーシングを実現します。
去年12月のWebGLのアドベントカレンダーのQiita記事と同じテーマですが、内容を大幅に加筆・変更しています。 Qiitaには書ききれなかったパストレーシングの基礎や原理の部分から説明し、実際のコードを踏まえながら実装についても丁寧に解説しました。
なるべく敷居を下げるために専門用語を解説しつつ、説明が長く過ぎず短すぎず丁度いい分量になるように意識して執筆しました。 読者ターゲットは、単純なレイトレーシングは分かっているけれども、パストレーシングは難しい…という人を想定しています。
この距離関数に対し、fold（折りたたみ）の操作を行うと、万華鏡のような美しい形状や、フラクタルのような複雑な形状の設計が可能です。
先日のTokyoDemoFest2017でも、このfoldを用いた作品を投稿しました。
この記事では、距離関数のfoldについて、解説していきます。
