デモシーン界隈では、美しい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について、解説していきます。
去年に引き続き、2回目の参加でした。去年の記事はこちらです。
Tokyo Demo Fest(TDF)とは、こんなイベントです（公式サイトからの引用）。
Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーなどを行います。また、イベント開催中は集まった様々な人たちとの交流が深められます。
今年は、なんと私の勤め先であるKLab株式会社もTDFにパートナーという形で参加させていただきました！ 去年の様子を紹介したことをきっかけに、弊社内でデモシーンへの関心が高まりつつあり非常に嬉しいです。
エナジータワー #TokyoDemoFest pic.twitter.com/O6dXOFwGXq
— kemas_Ti(ｶﾌｪｲﾝファイター (@kemas306) 2017年2月18日
また、個人としては「Fusioned Bismuth」という作品でGLSL Graphics Compoで3位を頂くことができました！ 自分の作品を多くの方に評価していただけて、大変嬉しいです！！ありがとうございました！
#TokyoDemoFest 2017のGLSL Graphics Compoにて、昨年に引き続き3位をいただきました！嬉しいです！
— がむ (@gam0022) 2017年2月19日
せっかくなのでトロフィーを並べました（左が今年、右が去年）。 pic.twitter.com/In8QqliO1L
