gam0022のブログスマートフォン用の表示で見るgam0022のブログWebGL(three.js)のカスタムシェーダにチャレンジ中!!読者ターゲットは自分です。6/25の技術書典で、AZ異本(アツイホン)を出します!この広告は、90日以上更新していないブログに表示しています。レイマーチング6/25(土)に秋葉原で開催される技術書展で新刊を出します!技術書展とは、技術書オンリーイベントのことで、技術書限定のコミケのようなイベントです。techbookfest.org新刊のタイトルは、AZ異本(アツイホン)です!techbooster.github.ioAZ異本には(熱い本|厚い本|AtoZ、AからZまで多種多様な|異本:普通の本とはちょっとちがう)みたいな意味が込められてます。今回も技術書サークルTechBoosterからの参加です。C89の冬コミに続いてレイマーチングの記事をかきました。three.js」という記事をかきました。three.jsによるレイマーチングとラスタライザのハイブリッド手法について解説する、かなり尖った内容になっています。レイマーチングはフラクタル図形などの幾何学的なシーンの描画が得意な一方、人物などの有機的な形状の表現は苦手とします。そこで、人物などの有機的な箇所のみをラスタライザで描画し、背景などの幾何学的な形状はレイマーチングで描画する手法の考案と実装をしました。本手法によって、レイマーチングとラスタライザの短所を補い合いながら、ハイブリッドに組み合わせることができます!次のGIFはハイブリッド手法による描画の例です。http://gam0022.net/webgl/#raymarching_hybridレイマーチングによって円柱が並んだシーンの中に、ラスタライザによる初音ミクを配置しました。ミクの足元は円柱の影に隠れていますが、奥行きを考慮した正しい合成ができています!レイマーチングでは距離関数と呼ばれる数式を使ってシーンの形状を定義します。距離関数に対してmod関数による剰余演算を適用することで、形状を無限に複製するテクニックがあります。この例の背景の円柱の複製もこのテクニックで実現しました。次のGIFもmodを使ったテクニックを適用した例です。ケミカルライトを無数に配置されたライブシーンの背景をレイマーチングで再現しました。※音が出ます※ラスタライザ空間とレイマーチングの空間はまったく別の空間となりますが、破綻なく合成することが可能です。WebGLの拡張機能を有効にして深度バッファを書き込む方法を紹介しました。three.jsからMMDを再生するためのTHREE.MMDLoaderの紹介に加え、3DCGに不可欠な要素であるラスタライザにおける座標変換も説明しました。読者の対象としては、レイマーチングと3Dの行列変換について理解している方を想定しています。とっつきにくい部分でもありますが、座標変換の部分はレイマーチングに限らず、さまざまな場面の応用できる知識です。ご興味が湧いたのなら、お手にとってくださると嬉しいです。くじ記事のもくじです。内容の参考にして下さい。これはすごいですね!今回もてくぶの新刊で1章書きました。Audioで解析したり...ってな感じの内容です。通販予約も期間限定で受付中です。»プロフィールid:gam-22六本木で働くエンジニアです。WebGLはてなブログをはじめよう!gam-22さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。