私は「64KBのWebGLデモを実装する技術とデモ制作から得た『学びと発見』」というタイトルで発表を行いました。

発表スライドはこちらです。

9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました。

デモシーンの魅力や、64KB制限で映像作品を創るための3Dモデルやテクスチャのプロシージャル生成について解説しています。

この記事をきっかけにCGWORLD読者の方々にもデモシーンに興味をもっていただき、国内のデモシーンが盛り上がっていくことを願っています。

もちろん自分の活動を知っている方々もお手に取っていただければとても嬉しいです！

9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました。

デモシーンの魅力や、64KB制限で映像作品を創るための3Dモデルやテクスチャのプロシージャル生成について解説しています。https://t.co/BPf1txlSxU#CGWjp #demoscene pic.twitter.com/XXpCh1xiFw

— がむ #CEDEC2020 9/4登壇, CGWORLD 10月号 (@gam0022) September 3, 2020

Revision 2020内で開催されたコンペのうち、PC 64K Introという64KBの容量制約のある部門で『RE: SIMULATED by gam0022 & sadakkey』という作品を発表しました。

Tokyo Demo Fest 2018に続き、私（@gam0022）が映像を、さだきちさん（@sadakkey）が音楽を制作しました。

……なんと、本作品が参加者投票により1位に選ばれました！ 日本人のチームがPC 64K Intro部門で優勝するのは Revision 史上初です。とても嬉しいです！

本記事では、技術解説をメインに、『RE: SIMULATED by gam0022 & sadakkey』を紹介したいと思います。

はじめに

先日、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年前に自分で作った作品を今になって改良しました。

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

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

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

そこで、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

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

Qiitaに「GPUをつかったリアルタイムなレイトレーシング」の記事を2つ投稿しました。

実際に動作するものはコチラです。WebGLなのでブラウザでそのまま動作します。

• reflect
• gem

Three.jsからGPUをつかったリアルタイムなレイトレーシング！https://t.co/zu5v2NXXeq
WebGL Advent Calendar 15日目の記事です。 pic.twitter.com/mwFZrFjJdf

— がむ (@gam0022) 2015年12月15日

これがGPUの力！three.jsによるレイトレーシング 〜宝石編〜https://t.co/dU4bQOnpPg
屈折のあるレイトレーシングをGLSLのフラグメントシェーダで実装した話を書きました。 pic.twitter.com/HnEMg7mUwP

— がむ (@gam0022) 2016年1月28日

レイトレーシングは膨大な計算が必要で、一般的にはリアルタイムに行うことは困難です。

WebGLのフラグメントシェーダでレイトレーシングを実装することで、GPUの力を利用してリアルタイムに処理しようというものです。

記事で紹介している例は、iPhone6のような携帯端末でもリアルタイムに動作するくらい軽量です。

さらに面白い特徴として、ラスタライザでは難しい、相互の鏡面反射、2回以上の屈折、無限の繰り返しも実現しています。

ラスタライザで鏡面反射するためには、キューブ環境マッピングがよく用いられます。 環境マッピングとは、周囲の景色を立方体のテクスチャに入れておいて、それを参照して反射して写り込んだ景色をフェッチします。 しかし、環境マッピングだけでは、床も球体も鏡面反射するような、相互に鏡面反射するシーンは実現できません。

また屈折も環境マッピングで実現できるのですが、環境マッピングで2回以上の屈折させるのは難しい課題になります。

レイトレーシングではカメラからスクリーンの全ピクセルに対して光のシュミレーションをするため、 環境マッピングでは難しかった鏡面反射や屈折の問題を簡単に解決できるというわけです！

1つ目の記事ではレイトレーシングではなく、厳密にはレイマーチングを使っています。 レイマーチングはレイトレーシングの1種です。レイマーチングでは、シーンを距離関数で定義します。 シーンを距離関数で定義することで、mod 演算を利用した物体を無限に繰り返すことができます。

昔はレイトレーシングで1枚の絵を描画するために一晩のような長い時間が必要でした。 それが今やリアルタイムにWebブラウザ上で動作するなんて、すごい時代になりましたね。

シェーダというニッチな分野にも関わらず、100人以上の参加者となる熱い勉強会でした。 無料なのに出席率が高く、参加者のモチベーションが高くて良いことだなと思いました。 WebGLの普及により、Web系のエンジニアもシェーダを触ることで、シェーダの注目度が上がってきたのを感じました！

当日の様子はtogetterまとめを参考にしてください。

私は「シェーダだけで世界を創る！three.jsによるレイマーチング」という発表をしました。

先日の夏コミ C88 に TechBooster というサークルとして参加しました。 これによって、コミケ初参加がサークル参加という実績を得ました。

私はJavaScriptoon という本の three.js(WebGL)の記事を書きました。 タイトルは「three.js でお手軽 3DCG 入門」です。

https://techbooster.github.io/c88/

去年の卒業研究で ブラウザ上で動作する ペーパークラフト用の CAD のようなものを three.js を使って開発していたので、その知識を集約させました。

内容的にはthree.jsのサンプルコードを実際に動かしながら、 3DCGが未経験の方でも分かるように基礎から解説するような感じになっております。

ちなみに、配置は8/16(3日目) 東地区A-39aでした。 コミケは初参加で知らなかったのですが、技術書で壁サークルというのはとても珍しいそうですね。

通販もしていますので、 ぜひよろしくおねがいします。(予想以上の注文により現在は売り切れの模様)

今日は自然言語処理の期末試験でしたが、 昨日は筑波大学情報学群 組み込み技術キャンパスOJTのソフトウェアコースの成果発表会でした。

開発のお題は、Webブラウザで動作する3Dのカバンの商品カタログでした。

成果物はこれです。

Shelf

WebGLとHTML5で作っているので、WebGLの動くWebブラウザがあれば、Nexus7などのタブレットでも動作します。 (Androidでは、開発者用のChromeでchrome://flags/からWebGLを有効にする必要があります。)

細かい技術的な話はここでは置いておきますが、リポジトリは公開してます。

投票の結果、最優秀賞は逃したものの、なんだかんだで技術賞をいただきました。 一般参加者の評価も12人中2番目に良かったので、頑張った甲斐はあったというものです。

成果発表会に来てくださった方はありがとうございました。思ったよりたくさんの方に来てくださって正直驚きました。 講師の先生方、TAの方もありがとうございました。他の受講生は本当にお疲れ様でした。

振り返ってみると、開発に関してはいろいろと困難がありましたが、終わってみるとけっこう楽しかったです。(小並感)

春学期はブラウザ上で動かすこともあり、組み込みという感じはほとんどしませんでしたが、 秋学期は本格的に組み込みらしいので、期待してます。