UnityエンジニアによるShader勉強会！に登壇しました
6/19に開催されたUnityエンジニアによるShader勉強会！で「Unity×レイマーチングによる映像制作の実践手法」という発表をしました。
GLSL Compoに役立つ！GLSL Sandbox互換のVSCode拡張『Shader Toy』の紹介
これはWebGL Advent Calendar 2018の24日目の記事です。
みなさんはGLSL Sandboxのシェーダーをローカルで編集したりgitで管理したいと思ったことはありませんか？
VSCodeの拡張機能の『Shader Toy』をインストールすれば簡単に実現できます。
本拡張はShadertoyとGLSL Sandboxの互換性を備えており、 どちらのコードも修正なしにそのまま動作できます！
WindowsとMacの両方に対応しています。
次の画像はTraveler2 by kaneta（Tokyo Demo Fest 2018 GLSL Compo優勝作品）をVSCode上で動作させた様子です。
導入方法と使い方
導入方法と使い方は簡単です。
導入方法
- 拡張機能のウィンドウを開く
- 「shadertoy」で検索
- インストールボタンを押す
使い方
GLSLのコードを編集した状態でコマンドパレットから「Shader Toy: GLSL Preview」を開くだけです。
GLSLのコードを認識しないときは、「Shader Toy: GLSL Preview」を閉じてから再実行すると認識できる場合があります。
Tokyo Demo Fest 2018のDemo Compo優勝作品の解説（グラフィック編）
これはKLab Engineer Advent Calendar 2018の12日目の記事です。
12月1日～12月2日に秋葉原で開催されたTokyo Demo Fest 2018（以下、TDF）に参加しました。
TDFは、日本国内で唯一のデモパーティです。 コンピュータを用いて作成された楽曲や映像作品をデモと呼び、 デモに関心のある人々が一堂に会してコンペティションを行ったり、技術を共有したりといったイベントをデモパーティと呼びます。
今年のTDFでは、さだきちさん（@sadakkey）とチームを組み、『WORMHOLE』（映像：gam0022 / サウンド：sadakkey）という作品を発表しました。
Windows実行ファイル形式のデモ作品のコンペティションであるCombined Demo Compoにて、本作品が1位に選ばれました！
この記事では『WORMHOLE』の映像制作技術について解説します。 ソースコードを公開していますので、ご興味のある方はそちらもご確認いただければと思います（スターください！）。
サウンド編についてはさだきちさんが解説されています。あわせてご覧ください！
作品の概要
「ワームホールによる空間移動」をコンセプトとして、 不思議な球体がワームホールを介して非現実なデジタル空間と水平線の広がる自然空間を行き来する映像を制作しました。
不思議な球体がトンネルを進んでいくと、周囲を明滅する光がだんだんとモノクロからカラフルに変わっていきます。 トンネルの最奥にあるワームホールへ近づくほど明滅はだんだんと激しくなっていき、ホワイトアウトとともにワームホールを越えると、球体は海上に出現します。 その後、球体はじわじわと歪んでいき、戦闘機へと形を変えます。
変形中の不思議な球体の上には、私が尊敬するデモシーナーの名前を表示しました。 これはグリーティングと呼ばれるデモシーンにおける慣習です。
戦闘機はパーティクルを放ちながら海上を進み、パーティクルが一瞬だけTDFのロゴを形作ります。 そして戦闘機は元の球体に変形し、突如現れたワームホールに吸い込まれるようにして冒頭のトンネルのシーンに戻っていきます。
実装ならびに制作にはUnityを利用しました。 詳細は後述しますが、Timeline, TextMeshPro, Chinemachine, PostProcessingStack v2といったUnity 2018.2の新機能も活用しています。
レイトレ合宿6 参加報告 後編（当日編）
記事が長くなってしまったので、準備編と当日編の2つの記事に分けました。
レイトレ合宿6の概要や自作レンダラーの紹介や取り組んだことについては前編に詳しく紹介させていただきました。
この記事では後編（当日編）として合宿当日の様子について振り返ります。 主に参加者との交流や神津島観光やレクリエーションの様子について書いていきます。 現地の雰囲気が少しでも伝われば幸いです。
また、他の参加者のレポートも合わせてお読みいただくと、内容を補完できると思います。
- レイトレ合宿6 参加記 - xyz600’s diary
- レイトレ合宿6 参加レポート - shuto_log.aep
- レイトレ合宿6に参加しました。 – ☆PROJECT ASURA☆
- レイトレ合宿６に行ってきました - ushiostarfish’s diary
- レイトレ合宿6に行ってきました - Pentanium Blog?
レイトレ合宿6 参加報告 前編（準備編）
これはレイトレ合宿6の参加報告の記事の前編です。
記事が長くなったので、前編と後編の2つに分けました。
この記事では前編（準備編）ということで、自作レンダラーに実装した機能や手法の紹介を行います。
後編（当日編）はこちらです。
9月1日(土)～9月2日(日)に神津島で開催されたレイトレ合宿6に参加しました。
レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。
参加者の中には、Arnold RendererやRadeon ProRenderといった商用のレンダラーの開発者、 SIGGRAPH 2017で発表された研究者など、グラフィック分野の最先端で活躍されている方々もいらっしゃり、大変刺激を受けました。
私は今年で3回目の参加になります。過去の参加報告はこちらです。
Rustで開発したパストレーシングによる自作の物理ベースレンダラー（Hanamaru Renderer）をバージョンアップして、 こんな感じの画像を123秒でレンダリングしました。
今回は19人中10位だったので、ギリギリ入賞圏内に潜り込めました！
↑リンクをクリックするとオリジナルの可逆圧縮の画像になります。
ソースコードはGitHubに公開しています（スターください）。
メガデモ勉強会!2018で発表しました
3/10（土）に開催されたメガデモ勉強会! 2018で発表しました。
発表タイトルは「もっと綺麗で写実的な絵作りをしたい！レイマーチング向けのシェーディング技術」です。
発表の概要はこんな感じです。
- レイマーチングのおさらい
- レイマーチングでいい感じにシェーディングするための理論と実践
- 写実的なレンダリングに不可欠な 大域照明 を説明
- 大域照明を構成する間接照明を近似する AO を説明
- レイマーチングによるAO計算の実装を図で解説
- レイマーチングによるマテリアル実装のベストプラクティスを紹介
AOがどういう意味を持つのか、大域照明にどんな関係にあるのか、などを学んでいただけたら嬉しいです。 レイマーチングによるAO計算の動作原理を図で解説した日本語の資料は見たことが無いので、 この発表を聞いて「なるほどな」と思ってもらえれば幸いです。
Unityでメガデモ制作に挑戦（uRaymarchingとTimelineを試す）
これは Unity #2 Advent Calendar 2017 21日目の記事です。
デモシーン界隈では、美しいCGアニメーションをリアルタイムに生成するプログラムを「デモ」と呼びます。
今回はUnityを使ったデモの制作に初挑戦しました。 13秒の短い無音の動画です。
作品の解説
「レイマーチングで動的に生成したモデル」と「ポリゴンメッシュのモデル」を混在させた作品です。 ロボットは通常の3Dモデルですが、床や柱のモデルはレイマーチングでプロシージャルに生成しました。
レイマーチングにはuRaymarchingというAssetを利用しました。
映像作品と相性が良さそうなので、Unity2017のTimelineも利用しました。
今回は試作という意味から、uRaymarchingとTimelineの他にも様々なアセットを試しました。 色々と試行錯誤をしたので、この記事ではそのノウハウを共有したいと思います。
Unityのバージョンは執筆時点の最新版である2017.2.1f1を用いました。
カメラ行列からレイトレ用のレイを生成する
これはKLab Advent Calendar 2017の11日目の記事です。
はじめに
先日、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
解説記事もあるので、もしご興味があればあわせてお読みください。
要するに、2年前に自分で作った作品を今になって改良しました。
