シェーダだけで世界を創る！three.jsによるレイマーチング
•
63 likes•42,781 views
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to シェーダだけで世界を創る！three.jsによるレイマーチング
Similar to シェーダだけで世界を創る！three.jsによるレイマーチング (20)
More from Sho Hosoda
Recently uploaded
Recently uploaded (9)
シェーダだけで世界を創る！three.jsによるレイマーチング
- 2. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 2 @gam0022（がむ）
- 5. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 5 @gam0022（がむ） レイマーチングのおかげで、 three.js に PRがマージされた http://threejs.org/examples/#webgl_raymarching_reflect
- 8. レイマーチングは超すごい レイマーチングによって、コードから生成された映像 otaviogood 氏の作品 https://www.shadertoy.com/view/XljGDz Kali 氏の作品 https://www.shadertoy.com/view/Xtf3Rn 8
- 9. レイマーチングは超すごい Shadertoy で raymarching タグを検索 https://www.shadertoy.com/results?query=tag%3Draymarching 9
- 10. レイマーチングはやばい マインクラフトの作者もレイマーチングに注目！ http://japanese.engadget.com/2016/01/28/notch-oculus-vr-3-5kb/ 10
- 12. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 12
- 13. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 13
- 19. レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・ 物理現象の再現が可能 19 【画像出典】 https://sites.google.com/site/ rendering1h/ 詳しくは レイトレーシングの専門家 hole 氏に聞いてください edupt（パストレーシングベースの 物理ベースレンダラ）の作者
- 26. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 26
- 27. ここから レイマーチングの話
- 28. レイマーチング レイマーチング レイトレーシング レイマーチングの大きな特徴は、衝突判定 - レイトレーシング • 形状（球体・平面・ポリゴンなど）によって、 衝突判定のアルゴリズムを使い分け - レイマーチング • 距離関数でシーンを定義し、 レイを少しずつ進めながら衝突判定 28
- 29. 距離関数とは 距離関数 入力：3Dの座標 p (vec3) 出力：点 p からシーンの物体への 最短距離(float) 29
- 31. 距離関数とは 距離関数 = 点 p から、シーン中の物体への最短距離を返す関数 31 距離関数(p) = 最短距離の長さ
- 32. 距離関数とは 距離関数 = 点 p から、シーン中の物体への最短距離を返す関数 32
- 33. 距離関数とは 距離関数 = 点 p から、シーン中の物体への最短距離を返す関数 33
- 38. レイマーチングのアルゴリズム 赤い線 = 距離関数の値 = レイの先端からの最短距離 一番近い位置にあるのは黄色い球体 38
- 48. レイマーチングのアルゴリズム マーチングループの実装例 48 float dist, depth = 0.0; p = origin; for ( int i = 0; i < 64; i++ ){ dist = sceneDist( p ); depth += dist; p = origin + depth * ray; if ( abs(dist) < EPS ) break; }
- 52. 距離関数の実装
- 53. 球体の距離関数 原点が中心の半径rの球体の距離関数 原点からの距離 - 半径r 超シンプル 53 float sphereDist(vec3 p, float r) { return length(p) - r; } 【画像出典】 http://resources.esri.com/help/9.3/arcgisengine/java/api/arcobjects/ com/esri/arcgis/geometry/ISphere.html ｒ
- 54. 箱の距離関数 原点にある大きさbの箱の距離関数 これも超シンプル 動作原理はややこしいので割愛＞＜ 54 float boxDist(vec3 p, vec3 b){ return length(max(abs(p) - b, 0.0)); }
- 57. シェーディング 光源の向きと法線が分かれば、シェーディング（陰影効果）できる float diffuse = clamp(dot(light, normal), 0.1, 1.0); 57
- 60. 法線を求める レイマーチングでは、 どんな形状でも同じ計算で法線が求まる - 球体の法線：距離関数の勾配 - 箱の法線： 距離関数の勾配 60
- 61. 法線を求める レイマーチングでは、 どんな形状でも同じ計算で法線が求まる - 球体の法線：距離関数の勾配 - 箱の法線： 距離関数の勾配 61
- 63. 法線を求める 63 const float EPS = 0.01; vec3 getNormal( vec3 p ) { return normalize(vec3( sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) - sceneDist(p + vec3( -EPS, 0.0, 0.0 ) ), sceneDist(p + vec3( 0.0, EPS, 0.0 ) ) - sceneDist(p + vec3( 0.0, -EPS, 0.0 ) ), sceneDist(p + vec3( 0.0, 0.0, EPS ) ) - sceneDist(p + vec3( 0.0, 0.0, -EPS ) ) )); } 勾配の計算 = xyzそれぞれ少しずらして、 距離関数の差分を計算
- 64. 法線を求める 数学では、f(x,y,z) = 0 で表せる曲面 の法線ベクトル n は n = (f x, f y, f z) と fの偏微分（勾配） となると知られている 距離関数は f(x,y,z) = 0 で表せる曲面に等しい 法線n = 距離関数の勾配 として計算可能 64
- 65. 法線を求める 「学校で微分は傾きと習ったんだけど！？」 y = 2x のような式だと、xの微分は傾き f(x,y) = 2x - y = 0 に変形すれば、 2次元でも微分は法線 65
- 66. 距離関数は万能
- 68. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 68
- 69. 距離関数の合成 箱と球体を和集合で組み合わせた距離関数 min で各距離関数を合成 69 // 箱と球体を和集合で組み合わせた距離関数 float sceneDist(vec3 p) { return min( boxDist(p, vec3(0.9, 0.45, 0.9), 0.05), sphereDist(p, vec3(0.0, 0.45, 0.0), 0.9) ); }
- 70. 距離関数の合成 距離関数を min や max で合成するだけで、CSG表現が可能 70
- 71. 距離関数の無限の繰り返し mod 演算 で p をループさせることで、 無限に繰り返し表示できる 71 float distSphere(vec3 p, float r) { return length(p) - r; } vec3 onRep(vec3 p, float interval) { return mod(p, interval) - interval * 0.5; } float distScene(vec3 p) { return distSphere(onRep(p, 4.0), 1.0); }
- 73. 距離関数の実践編 幅widthの四角柱の距離関数 73 float barDist(vec2 p, float width) { return length(max(abs(p) - width, 0.0)); } float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 0.1); return bar_x; }
- 74. 距離関数の実践編 y軸の四角柱を和集合 74 float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); return min(bar_x, bar_y); }
- 75. 距離関数の実践編 z軸の四角柱を和集合 75 float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); float bar_z = barDist(p.xy, 0.1); return min( min(bar_x, bar_y), bar_z); }
- 76. 距離関数の実践編 無限の繰り返し 76 vec2 onRep(vec2 p, float interval) { return mod(p, interval) - interval * 0.5; } float barDist(vec2 p, float interval, float width) { return length( max(abs(onRep(p, interval)) - width, 0.0)); } p ➡ onRep(p, interval)
- 77. 距離関数の実践編 同様に円柱を無限に繰り返し 77 float tubeDist(vec2 p, float interval, float width) { return length(onRep(p, interval)) - width; } float sceneDist(vec3 p) { float tube_x = tubeDist(p.yz, 0.5, 0.025); float tube_y = tubeDist(p.xz, 0.5, 0.025); float tube_z = tubeDist(p.xy, 0.5, 0.025); return min(min(tube_x, tube_y),tube_z); }
- 78. 距離関数の実践編 角柱 から 円柱 を 差集合 で刳り貫くと… 78 - =
- 80. 距離関数の実践編 sceneDist全体 80 float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 1.0, 0.1); float bar_y = barDist(p.xz, 1.0, 0.1); float bar_z = barDist(p.xy, 1.0, 0.1); float tube_x = tubeDist(p.yz, 0.1, 0.025); float tube_y = tubeDist(p.xz, 0.1, 0.025); float tube_z = tubeDist(p.xy, 0.1, 0.025); return max(max(max(min(min( bar_x, bar_y),bar_z), -tube_x), -tube_y), -tube_z); }
- 82. 距離関数まとめ 距離関数: 物体までの最短距離 以下を簡単に実現できる - CSG表現（図形の合成） - 無限の繰り返し 少ないコードで複雑な形状をできる 82
- 83. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 83
- 88. three.js からシェーダを使う 1枚の板のジオメトリを作り、 頂点シェーダとフラグメントシェーダを 設定したマテリアルを適用するコード 88 geometry = new THREE.PlaneBufferGeometry(2.0, 2.0); material = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "頂点シェーダ", fragmentShader: "フラグメントシェーダ", }); mesh = new THREE.Mesh(geometry, material);
- 89. three.js からシェーダを使う Material の初期化の時に、シェーダのコードを渡すだけ 89 geometry = new THREE.PlaneBufferGeometry(2.0, 2.0); material = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "頂点シェーダ", fragmentShader: "フラグメントシェーダ", }); mesh = new THREE.Mesh(geometry, material);
- 90. three.js vs 生WebGL スクロールバーに注目▼ 90 three.js 49行 生WebGL 215行
- 94. 参考資料 我らが @h_doxas 先生の資料 - https://wgld.org/d/glsl/ メガデモの神 iq(@iquilezles) 氏のページ - http://iquilezles.org/www/index.htm のWebフロントエンド本 (私の著書) - https://techbooster.github.io/c89/#scriptoon2 94
- 95. 参考資料 これがGPUの力！Three.jsによる リアルタイム なレイトレーシング - http://qiita.com/gam0022/items/ 03699a07e4a4b5f2d41f これがGPUの力！three.jsによる リアルタイム なレイトレーシング ∼宝石編∼ - http://qiita.com/gam0022/items/ 9875480d33e03fe2113c 95