Download as PDF, PPTX
Uploaded bySho Hosoda
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
![[UE4]自動テストでもっと楽したい！](https://cdn.slidesharecdn.com/ss_thumbnails/ue4automationtest-190527101956-thumbnail.jpg?width=640&height=640&fit=bounds)
シェーダだけで世界を創る！three.jsによるレイマーチング
- 1.
- 2. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒1年目 three.js 歴 3年目 2 @gam0022（がむ）
- 3.
- 4.
- 5. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒1年目 three.js 歴 3年目 5 @gam0022（がむ） レイマーチングのおかげで、 three.js に PRがマージされた http://threejs.org/examples/#webgl_raymarching_reflect
- 6.
- 7.
- 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.
- 11.
- 12. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.レイマーチング発展編 4. three.js の話 12
- 13. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.レイマーチング発展編 4. three.js の話 13
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・ 物理現象の再現が可能 19 【画像出典】 https://sites.google.com/site/ rendering1h/ 詳しくは レイトレーシングの専門家 hole氏に聞いてください edupt（パストレーシングベースの 物理ベースレンダラ）の作者
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.レイマーチング発展編 4. three.js の話 26
- 27.
- 28. レイマーチング レイマーチング レイトレーシング レイマーチングの大きな特徴は、衝突判定 - レイトレーシング •形状（球体・平面・ポリゴンなど）によって、 衝突判定のアルゴリズムを使い分け - レイマーチング • 距離関数でシーンを定義し、 レイを少しずつ進めながら衝突判定 28
- 29. 距離関数とは 距離関数 入力：3Dの座標 p (vec3) 出力：点p からシーンの物体への 最短距離(float) 29
- 30.
- 31. 距離関数とは 距離関数 = 点p から、シーン中の物体への最短距離を返す関数 31 距離関数(p) = 最短距離の長さ
- 32. 距離関数とは 距離関数 = 点p から、シーン中の物体への最短距離を返す関数 32
- 33. 距離関数とは 距離関数 = 点p から、シーン中の物体への最短距離を返す関数 33
- 34.
- 35.
- 36.
- 37.
- 38. レイマーチングのアルゴリズム 赤い線 = 距離関数の値= レイの先端からの最短距離 一番近い位置にあるのは黄色い球体 38
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 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; }
- 49.
- 50.
- 51.
- 52.
- 53. 球体の距離関数 原点が中心の半径rの球体の距離関数 原点からの距離 - 半径r 超シンプル 53 floatsphereDist(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)); }
- 55.
- 56.
- 57. シェーディング 光源の向きと法線が分かれば、シェーディング（陰影効果）できる float diffuse =clamp(dot(light, normal), 0.1, 1.0); 57
- 58.
- 59.
- 60.
- 61.
- 62.
- 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.
- 67.
- 68. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.レイマーチング発展編 4. three.js の話 68
- 69. 距離関数の合成 箱と球体を和集合で組み合わせた距離関数 min で各距離関数を合成 69 // 箱と球体を和集合で組み合わせた距離関数 floatsceneDist(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); }
- 72.
- 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 - =
- 79.
- 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); }
- 81.
- 82. 距離関数まとめ 距離関数: 物体までの最短距離 以下を簡単に実現できる - CSG表現（図形の合成） -無限の繰り返し 少ないコードで複雑な形状をできる 82
- 83. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.レイマーチング発展編 4. three.js の話 83
- 84.
- 85.
- 86.
- 87.
- 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.js49行 生WebGL 215行
- 91.
- 92.
- 93.
- 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
- 96.
- 97.