12月1日～12月2日に秋葉原で開催されたTokyo Demo Fest 2018（以下、TDF）に参加しました。

TDFは、日本国内で唯一のデモパーティです。 コンピュータを用いて作成された楽曲や映像作品をデモと呼び、 デモに関心のある人々が一堂に会してコンペティションを行ったり、技術を共有したりといったイベントをデモパーティと呼びます。

今年のTDFでは、さだきちさん（@sadakkey）とチームを組み、『WORMHOLE』（映像：gam0022 / サウンド：sadakkey）という作品を発表しました。

Windows実行ファイル形式のデモ作品のコンペティションであるCombined Demo Compoにて、本作品が1位に選ばれました！

この記事では『WORMHOLE』の映像制作技術について解説します。 ソースコードを公開していますので、ご興味のある方はそちらもご確認いただければと思います（スターください！）。

• https://github.com/gam0022/unity-demoscene

サウンド編についてはさだきちさんが解説されています。あわせてご覧ください！

• Tokyo Demo Fest2018のDemo Compo優勝作品の解説〜サウンド編〜 : KLabGames Creative Blog

作品の概要

「ワームホールによる空間移動」をコンセプトとして、 不思議な球体がワームホールを介して非現実なデジタル空間と水平線の広がる自然空間を行き来する映像を制作しました。

不思議な球体がトンネルを進んでいくと、周囲を明滅する光がだんだんとモノクロからカラフルに変わっていきます。 トンネルの最奥にあるワームホールへ近づくほど明滅はだんだんと激しくなっていき、ホワイトアウトとともにワームホールを越えると、球体は海上に出現します。 その後、球体はじわじわと歪んでいき、戦闘機へと形を変えます。

変形中の不思議な球体の上には、私が尊敬するデモシーナーの名前を表示しました。 これはグリーティングと呼ばれるデモシーンにおける慣習です。

戦闘機はパーティクルを放ちながら海上を進み、パーティクルが一瞬だけTDFのロゴを形作ります。 そして戦闘機は元の球体に変形し、突如現れたワームホールに吸い込まれるようにして冒頭のトンネルのシーンに戻っていきます。

実装ならびに制作にはUnityを利用しました。 詳細は後述しますが、Timeline, TextMeshPro, Chinemachine, PostProcessingStack v2といったUnity 2018.2の新機能も活用しています。

レイトレ合宿6の概要や自作レンダラーの紹介や取り組んだことについては前編に詳しく紹介させていただきました。

• レイトレ合宿6 参加報告 前編（準備編） | gam0022.net

この記事では後編（当日編）として合宿当日の様子について振り返ります。 主に参加者との交流や神津島観光やレクリエーションの様子について書いていきます。 現地の雰囲気が少しでも伝われば幸いです。

また、他の参加者のレポートも合わせてお読みいただくと、内容を補完できると思います。

• レイトレ合宿6 参加記 - xyz600’s diary
• レイトレ合宿6 参加レポート - shuto_log.aep
• レイトレ合宿6に参加しました。 – ☆PROJECT　ASURA☆
• レイトレ合宿６に行ってきました - ushiostarfish’s diary
• レイトレ合宿6に行ってきました - Pentanium Blog?

この記事では前編（準備編）ということで、自作レンダラーに実装した機能や手法の紹介を行います。

後編（当日編）はこちらです。

• レイトレ合宿6 参加報告 Part2（当日編） | gam0022.net

9月1日(土)～9月2日(日)に神津島で開催されたレイトレ合宿6に参加しました。

レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。

参加者の中には、Arnold RendererやRadeon ProRenderといった商用のレンダラーの開発者、 SIGGRAPH 2017で発表された研究者など、グラフィック分野の最先端で活躍されている方々もいらっしゃり、大変刺激を受けました。

私は今年で3回目の参加になります。過去の参加報告はこちらです。

• レイトレ合宿5‽に参加して、Rustでパストレーシングを実装しました！ | gam0022.net
• レイトレ合宿4!? に参加しました！ - gam0022のブログ

Rustで開発したパストレーシングによる自作の物理ベースレンダラー（Hanamaru Renderer）をバージョンアップして、 こんな感じの画像を123秒でレンダリングしました。

今回は19人中10位だったので、ギリギリ入賞圏内に潜り込めました！

↑リンクをクリックするとオリジナルの可逆圧縮の画像になります。

ソースコードはGitHubに公開しています（スターください）。

• https://github.com/gam0022/hanamaru-renderer/

発表タイトルは「もっと綺麗で写実的な絵作りをしたい！レイマーチング向けのシェーディング技術」です。

発表の概要はこんな感じです。

• レイマーチングのおさらい
• レイマーチングでいい感じにシェーディングするための理論と実践
  • 写実的なレンダリングに不可欠な 大域照明 を説明
  • 大域照明を構成する間接照明を近似する AO を説明
  • レイマーチングによるAO計算の実装を図で解説
• レイマーチングによるマテリアル実装のベストプラクティスを紹介

AOがどういう意味を持つのか、大域照明にどんな関係にあるのか、などを学んでいただけたら嬉しいです。 レイマーチングによるAO計算の動作原理を図で解説した日本語の資料は見たことが無いので、 この発表を聞いて「なるほどな」と思ってもらえれば幸いです。

デモシーン界隈では、美しいCGアニメーションをリアルタイムに生成するプログラムを「デモ」と呼びます。

今回はUnityを使ったデモの制作に初挑戦しました。 13秒の短い無音の動画です。

作品の解説

「レイマーチングで動的に生成したモデル」と「ポリゴンメッシュのモデル」を混在させた作品です。 ロボットは通常の3Dモデルですが、床や柱のモデルはレイマーチングでプロシージャルに生成しました。

レイマーチングにはuRaymarchingというAssetを利用しました。

映像作品と相性が良さそうなので、Unity2017のTimelineも利用しました。

今回は試作という意味から、uRaymarchingとTimelineの他にも様々なアセットを試しました。 色々と試行錯誤をしたので、この記事ではそのノウハウを共有したいと思います。

Unityのバージョンは執筆時点の最新版である2017.2.1f1を用いました。

はじめに

先日、three.jsのexamples（公式サンプル集）で紹介されている「raymarching / reflect」に関して、2つのPRを送ってマージされました。

• Improve raymarching example by gam0022 · Pull Request #12792 · mrdoob/three.js
• Improve raymarching example v2 by gam0022 · Pull Request #12801 · mrdoob/three.js

内部的なリファクタリングですので、目に見える変化はまったくありません。

レイトレーシングやレイマーチングでは、レイを生成する処理が必要です。 そのレイの生成処理を改良しました。 上記のPRでは、カメラ行列（モデル行列 + プロジェクション行列の逆行列）からレイの生成するリファクタリングを行いました。

レイの生成方法というのはとても奥深いテーマで、さまざまな実装方法があります。 この記事では、今回のPRに至るまでの試行錯誤をまとめたいと思います。

raymarching / reflect とは

「raymarching / reflect」は、three.jsによるレイマーチングのGLSL（GPU）実装の技術デモです。

無数のオブジェクトの描画はレイマーチングが得意とする表現です。 レイマーチングでは距離関数を利用してシーンの形状を定義します。 距離関数にmod関数を適用すると、同じ形状を無限に繰り返す repetition を実現できます。

私が2年前に実装して、three.jsのexamplesに取り込んでいただきました。その時のPRはこちらです。

• Added raymarching reflect example. by gam0022 · Pull Request #7860 · mrdoob/three.js
• [WIP] Fix raymarching reflect by gam0022 · Pull Request #7863 · mrdoob/three.js

解説記事もあるので、もしご興味があればあわせてお読みください。

• これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング

要するに、2年前に自分で作った作品を今になって改良しました。

レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。

去年に初参加させていただき、今年で2回目の参加になります。去年の参加報告はこちらです。

私はRustでパストレーサ（Hanamaruレンダラー）を実装して、こんな感じの画像をレンダリングしました。

今年は16人中9位なので、去年の13人中10位よりは進歩しました！

↑リンクをクリックするとオリジナルの可逆圧縮の画像になります。

ソースコードはGitHubに公開しています（スターください）。

• https://github.com/gam0022/hanamaru-renderer/

フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。

最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。

さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。

そこで、WebGLによるレイマーチングでカドのレンダリングに挑戦しました！！

レイマーチングでカド(MandelBox)を描画した結果です。

次のリンクからブラウザ上から動かすこともできます。

• http://gam0022.net/webgl/#raymarching_kado

PauseをOFFにすると、カドがアニメーションします（負荷注意）。

描画の負荷が重たすぎる場合には、Pixel Ratioを1/2xか1/4xにしてください。

去年に引き続き、技術サークルTechBoosterのWeb本の著者のひとりとして参加します。

今回は『Think Web』の『第6章 まるで実写！？GPUパストレーシングのWebGL実装』を担当しました。

• Think Web | TechBooster in TBF02 技術書典２（2017/4/9） あ-01,02

パストレーシングとは？

パストレーシングは3Dの描画手法のひとつで、現実世界に近い光の振る舞いをシミュレートすることで、大域照明を考慮した写実的なレンダリングを可能にします。 実際にハリウッド映画などの写実的なCGの多くには、パストレーシングやパストレーシングを発展した手法が採用されています。 写実的なレンダリングができる反面、処理時間が膨大にかかるという弱点があります。

本の内容

私の章ではパストレーシングのGPU実装による高速化について紹介します。 しかも単純な高速化ではなく、ブラウザ上で3DCGを扱うWebAPIであるWebGLによりGPU実装することで、 ブラウザ上で動作するインタラクティブなパストレーシングを実現します。

去年12月のWebGLのアドベントカレンダーのQiita記事と同じテーマですが、内容を大幅に加筆・変更しています。 Qiitaには書ききれなかったパストレーシングの基礎や原理の部分から説明し、実際のコードを踏まえながら実装についても丁寧に解説しました。

• WebGL+GLSLによる超高速なパストレーシング | Qiita

なるべく敷居を下げるために専門用語を解説しつつ、説明が長く過ぎず短すぎず丁度いい分量になるように意識して執筆しました。 読者ターゲットは、単純なレイトレーシングは分かっているけれども、パストレーシングは難しい…という人を想定しています。

この距離関数に対し、fold（折りたたみ）の操作を行うと、万華鏡のような美しい形状や、フラクタルのような複雑な形状の設計が可能です。

先日のTokyoDemoFest2017でも、このfoldを用いた作品を投稿しました。

• #TokyoDemoFest 2017 の GLSL Graphics Compo で3位入賞！ | gam0022.net
• Fusioned Bismuth | gam0022.net
• Fusioned Bismuth | Shadertoy

この記事では、距離関数のfoldについて、解説していきます。