gam0022のブログ

WebGL(three.js)のカスタムシェーダにチャレンジ中！！読者ターゲットは自分です。

トップ > 日記 > 6/25の技術書典で、AZ異本（アツイホン）を出します！

6/25の技術書典で、AZ異本（アツイホン）を出します！

日記 開発 WebGL three.js レイマーチング

6/25（土）に秋葉原で開催される技術書展で新刊を出します！

技術書展とは、技術書オンリーイベントのことで、技術書限定のコミケのようなイベントです。

techbookfest.org

新刊のタイトルは、AZ異本（アツイホン）です！

techbooster.github.io

AZ異本には（熱い本|厚い本|AtoZ、AからZまで多種多様な|異本：普通の本とはちょっとちがう）みたいな意味が込められてます。

今回も技術書サークルTechBoosterからの参加です。C89の冬コミに続いてレイマーチングの記事をかきました。

レイマーチングの世界でミクが踊る！「レイマーチング×ラスタライザ」ハイブリッド描画 with three.js

「レイマーチングの世界でミクが踊る！『レイマーチング×ラスタライザ』ハイブリッド描画 with three.js」という記事をかきました。

three.jsによるレイマーチングとラスタライザのハイブリッド手法について解説する、かなり尖った内容になっています。

レイマーチングはフラクタル図形などの幾何学的なシーンの描画が得意な一方、人物などの有機的な形状の表現は苦手とします。

そこで、人物などの有機的な箇所のみをラスタライザで描画し、背景などの幾何学的な形状はレイマーチングで描画する手法の考案と実装をしました。 本手法によって、レイマーチングとラスタライザの短所を補い合いながら、ハイブリッドに組み合わせることができます！

次のGIFはハイブリッド手法による描画の例です。

f:id:gam-22:20160622004422g:plain http://gam0022.net/webgl/#raymarching_hybrid

レイマーチングによって円柱が並んだシーンの中に、ラスタライザによる初音ミクを配置しました。 ミクの足元は円柱の影に隠れていますが、奥行きを考慮した正しい合成ができています！

レイマーチングでは距離関数と呼ばれる数式を使ってシーンの形状を定義します。 距離関数に対してmod関数による剰余演算を適用することで、形状を無限に複製するテクニックがあります。 この例の背景の円柱の複製もこのテクニックで実現しました。

次のGIFもmodを使ったテクニックを適用した例です。 ケミカルライトを無数に配置されたライブシーンの背景をレイマーチングで再現しました。

f:id:gam-22:20160622004946g:plain

※音量注意※ http://gam0022.net/webgl/#raymarching_hybrid_live ※音が出ます※

ラスタライザ空間とレイマーチングの空間はまったく別の空間となりますが、破綻なく合成することが可能です。

破綻なく合成するために、レイマーチングを行う際に、ラスタライザで用いているカメラ行列からレイを定義し、 WebGLの拡張機能を有効にして深度バッファを書き込む方法を紹介しました。

また、three.jsからMMDを再生するためのTHREE.MMDLoaderの紹介に加え、3DCGに不可欠な要素であるラスタライザにおける座標変換も説明しました。

読者の対象としては、レイマーチングと3Dの行列変換について理解している方を想定しています。

とっつきにくい部分でもありますが、座標変換の部分はレイマーチングに限らず、さまざまな場面の応用できる知識です。 もしも少しでもご興味が湧いたのなら、お手にとってくださると嬉しいです。

もくじ

記事のもくじです。内容の参考にして下さい。

  • WebGLとThree.js
  • ラスタライザとレイトレーシング〜2種類の描画方法〜
  • レイマーチングとは
    • レイマーチングの強みと弱み
    • 基本的なレイマーチングの実装例
  • THREE.MMDLoaderの紹介
  • カメラの変換行列の基礎
    • 6つの座標系
    • MovelViewProjectionMatrix
  • レイマーチングとラスタライザのハイブリッド
  • カメラの変換行列からレイを定義
  • 深度バッファの計算
    • WebGLの拡張のEXT_frag_depthを有効にする
    • ワールド座標から深度値の計算
  • 視錐台カリング（frustumCulled）の無効化
  • 今後の課題
    • ラスタライザ部分の鏡面反射
    • 半透明を考慮した合成
  • まとめ

イカデンワのmzsm氏による「Web Audio API × WebRTC」

なお、AZ異本 grimoire of webを買うと、あのイカデンワのmzsm氏による「Web Audio API × WebRTC」の記事も読めます！ これはすごいですね！

通販予約も期間限定で受付中

通販予約も期間限定で受付中です。興味があるけど、会場に行けないという方は是非！ techbooster.booth.pm

よろしくお願いしまーす！

f:id:gam-22:20160623100703p:plain