フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。
最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。
さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。
そこで、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
Qiitaに「GPUをつかったリアルタイムなレイトレーシング」の記事を2つ投稿しました。
実際に動作するものはコチラです。WebGLなのでブラウザでそのまま動作します。
Three.jsからGPUをつかったリアルタイムなレイトレーシング！https://t.co/zu5v2NXXeq
— がむ (@gam0022) 2015年12月15日
WebGL Advent Calendar 15日目の記事です。 pic.twitter.com/mwFZrFjJdf
これがGPUの力！three.jsによるレイトレーシング 〜宝石編〜https://t.co/dU4bQOnpPg
— がむ (@gam0022) 2016年1月28日
屈折のあるレイトレーシングをGLSLのフラグメントシェーダで実装した話を書きました。 pic.twitter.com/HnEMg7mUwP
レイトレーシングは膨大な計算が必要で、一般的にはリアルタイムに行うことは困難です。
WebGLのフラグメントシェーダでレイトレーシングを実装することで、GPUの力を利用してリアルタイムに処理しようというものです。
記事で紹介している例は、iPhone6のような携帯端末でもリアルタイムに動作するくらい軽量です。
さらに面白い特徴として、ラスタライザでは難しい、相互の鏡面反射、2回以上の屈折、無限の繰り返しも実現しています。
ラスタライザで鏡面反射するためには、キューブ環境マッピングがよく用いられます。 環境マッピングとは、周囲の景色を立方体のテクスチャに入れておいて、それを参照して反射して写り込んだ景色をフェッチします。 しかし、環境マッピングだけでは、床も球体も鏡面反射するような、相互に鏡面反射するシーンは実現できません。
また屈折も環境マッピングで実現できるのですが、環境マッピングで2回以上の屈折させるのは難しい課題になります。
レイトレーシングではカメラからスクリーンの全ピクセルに対して光のシュミレーションをするため、 環境マッピングでは難しかった鏡面反射や屈折の問題を簡単に解決できるというわけです！
1つ目の記事ではレイトレーシングではなく、厳密にはレイマーチングを使っています。
レイマーチングはレイトレーシングの1種です。レイマーチングでは、シーンを距離関数で定義します。
シーンを距離関数で定義することで、mod 演算を利用した物体を無限に繰り返すことができます。
昔はレイトレーシングで1枚の絵を描画するために一晩のような長い時間が必要でした。 それが今やリアルタイムにWebブラウザ上で動作するなんて、すごい時代になりましたね。
2016-02-20〜21に開催されたTokyo Demo Fest 2016に参加しました。
Tokyo Demo Festとは、このようなイベントです（公式ページからの引用）。
Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティションやセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。
私は”Carbon”という作品をGLSL Graphics Compoに提出して、3位入賞してきました！
さらに、three.jsの作者であり、GLSL Sandboxの作者でもあるMr.Doobと握手してきました！
今回が初参加でしたが、本当に最高のイベントでした！楽しかったです。 オーガナイザーのみなさん、参加者のみなさん、ありがとうございました！
全体のレポートについては、@h_doxasさんの記事がとても分かりやすいです。
WebGL 総本山を更新しました ＞ 超ハイレベルな作品が入り乱れた Tokyo Demo Fest 2016！ 大興奮の２日間をレポート！ - WebGL 総本山 https://t.co/ZeYrYoLiz2 pic.twitter.com/e3XFwpIrCD
— h_doxas (@h_doxas) 2016, 2月 23
この記事では、GLSL Graphics Compoで発表した”Carbon”という作品の裏話と、個人的に印象に残った思い出などを話します。
Compo（コンポ）とは、一定の制約の中で映像や音楽の作品を製作し、投票によって順位をつけるイベントです。
今年のGLSL Graphics Compoでは、GLSL Sandbox上で動作する映像作品の順位を競いました。
GLSL Sandboxで動作させるためには、フラグメントシェーダだけで作品を実装する必要があります。 当然ですが、立体データや画像データは読み込めないので、コードだけでなんとかする必要があります。
私は”Carbon”というタイトルで作品を提出して3位入賞しました。 今年のGLSL Graphics Compoはレベルが高かったので、入賞できて嬉しかったです。
コチラから動くデモをご覧になれます！
GLSL Compo に 「Carbon」という作品を出しました！https://t.co/UOqE3FvFyWhttps://t.co/JxkH3LtI4t#TokyoDemoFest pic.twitter.com/yfkJBzQllD
— がむ@TDF最高だった (@gam0022) 2016, 2月 21
#TokyoDemoFest の "Carbon" の回路にglow効果をつけたのでスクショ撮り直した。Shadertoyにも反映。https://t.co/zeIZhsc8zT pic.twitter.com/Q4UKTCfAsP
— がむ@TDF最高だった (@gam0022) 2016年2月27日
私の「Carbon」が GLSL Compo で入賞しました👏
— がむ@TDF最高だった (@gam0022) 2016年2月21日
ありがとうございます！ #TokyoDemoFesthttps://t.co/f7LoEYWzFq pic.twitter.com/SIel9DKA6n
今回もレイマーチングによる作品です。
距離関数（distance function）は、Mandelboxというフラクタル図形を mod でループさせただけなので、非常にお手軽です。
シェーダというニッチな分野にも関わらず、100人以上の参加者となる熱い勉強会でした。 無料なのに出席率が高く、参加者のモチベーションが高くて良いことだなと思いました。 WebGLの普及により、Web系のエンジニアもシェーダを触ることで、シェーダの注目度が上がってきたのを感じました！
当日の様子はtogetterまとめを参考にしてください。
私は「シェーダだけで世界を創る！three.jsによるレイマーチング」という発表をしました。