シェーダだけで世界を創る！three.jsによるレイマーチング

1. シェーダだけで世界を創る！ three.jsによるレイマーチング 2016/02/14 GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022

2. 自己紹介細田翔去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 2 @gam0022（がむ）

3. 最近、取り組んでいることレイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 3

4. 最近、取り組んでいることレイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 4

5. 自己紹介細田翔去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 5 @gam0022（がむ）レイマーチングのおかげで、  three.js に PRがマージされた  http://threejs.org/examples/#webgl_raymarching_reﬂect

6. レイマーチング？レイマーチング ¦¦ レイトレーシングの１種 6

7. レイマーチングは超すごいレイマーチングによって、コードから生成された映像メガデモの神 iq(@iquilezles) 氏の作品 https://www.shadertoy.com/view/MdX3Rr 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. レイマーチングはやばいマインクラフトの作者もレイマーチングに注目！ http://japanese.engadget.com/2016/01/28/notch-oculus-vr-3-5kb/ 10

11. レイマーチングは面白い超すごい映像をコードだけで動的生成できる！マインクラフトの作者もレイマーチングに注目！ 11 レイマーチングすごく面白そう！！

12. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 12

14. 3Dの描画方法 3Dの描画方法は大きく2種類 1. ラスタライズ法 2. レイトレーシング法 14

15. ラスタライズ法形状を三角形  (ポリゴン)の  集合で表現 3Dの頂点を2D  に投影して描画処理が軽い 15

16. ラスタライズ法形状を三角形  (ポリゴン)の  集合で表現 3Dの頂点を2D  に投影して描画処理が軽い 16

17. レイトレーシング法カメラに届く光線（レイ）を  全ピクセル数シュミレーション 17 【画像出典】 http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154

18. レイトレーシング法全ピクセル数シミュレート - 1024x768 = 786432(78万)回処理は重い無限に滑らか・  物理現象の再現が可能 18 【画像出典】 https://sites.google.com/site/ rendering1h/

19. レイトレーシング法全ピクセル数シミュレート - 1024x768 = 786432(78万)回処理は重い無限に滑らか・  物理現象の再現が可能 19 【画像出典】 https://sites.google.com/site/ rendering1h/ 詳しくはレイトレーシングの専門家 hole 氏に聞いてください edupt（パストレーシングベースの  物理ベースレンダラ）の作者

20. 2種類のシェーダ WebGLのシェーダは2種類 1.頂点シェーダ  (vertex shader) 2.フラグメントシェーダ  (fragment shader) 20

21. 頂点シェーダ頂点の集合をカメラの世界を基準に座標変換頂点ごとの処理 21 座標変換

22. フラグメントシェーダポリゴンの塗り方を決める役割 - どう陰影をつけるか？ - テクスチャを貼るか？ピクセルごとの処理別名: ピクセルシェーダ 22

23. レイトレのフラグメントシェーダ実装 3Dシーンの中に1枚の板を配置 1枚の板の塗り方を  決める処理として、  レイトレーシングを  フラグメントシェーダ  をつかって実装 23

24. レイトレのフラグメントシェーダ実装フラグメントシェーダは  GPUで並列処理されるとても高速に処理できるリアルタイム描画が可能 24

25. レイトレのフラグメントシェーダ実装 GPUで並列処理？難しそう… レイトレーシングは  並列性が高い手法並列の実装は簡単 25

27. ここからレイマーチングの話

28. レイマーチングレイマーチングレイトレーシングレイマーチングの大きな特徴は、衝突判定 - レイトレーシング • 形状（球体・平面・ポリゴンなど）によって、  衝突判定のアルゴリズムを使い分け - レイマーチング • 距離関数でシーンを定義し、  レイを少しずつ進めながら衝突判定 28

29. 距離関数とは距離関数入力：3Dの座標 p (vec3) 出力：点 p からシーンの物体への  最短距離(ﬂoat) 29

30. 距離関数とは距離関数 = 最短距離イメージしずらいので、  実例を挙げていきます 30

31. 距離関数とは距離関数 =   点 p から、シーン中の物体への最短距離を返す関数 31 距離関数(p) = 最短距離の長さ

32. 距離関数とは距離関数 =   点 p から、シーン中の物体への最短距離を返す関数 32

33. 距離関数とは距離関数 =   点 p から、シーン中の物体への最短距離を返す関数 33

34. レイマーチングのアルゴリズム距離関数は分かったけど、どうやって衝突判定するの？次のシーンを使って実例で説明！ 34

35. レイマーチングレイを少しずつ進める  ¦¦ レイマーチング 35

36. レイマーチングのアルゴリズムレイの先端はカメラの位置からスタートがレイの先端 36

37. レイマーチングのアルゴリズムレイの向きは常に真っ直ぐ 37

38. レイマーチングのアルゴリズム赤い線 = 距離関数の値 = レイの先端からの最短距離一番近い位置にあるのは黄色い球体 38

39. レイマーチングのアルゴリズム距離関数の値だけ、レイの先端を進める 39

40. レイマーチングのアルゴリズム 2週目の先端から、さらに最短距離を求める 2週目でも黄色い球体が最短 40

41. レイマーチングのアルゴリズム最短距離だけレイを進めて、3週目のレイの先端が求まる 41

42. レイマーチングのアルゴリズム 3週目でも黄色い球体が最短 42

43. レイマーチングのアルゴリズム 4週目のレイの先端が求まる 43

44. レイマーチングのアルゴリズム 4週目で、ついに緑の箱が最短！！ 44

45. レイマーチングのアルゴリズムレイの先端が無事に緑の箱の位置となった！！ 45

46. レイマーチングのアルゴリズム衝突するまで（最短距離が0）になるまで、  ひたすらレイを進めるだけ最短距離だけ進めるので、  進みすぎて通り抜けることはない単純！！シンプル！！ 46

47. レイマーチングのアルゴリズムレイマーチングの  アルゴリズムの繰り返し処理 ¦¦ マーチングループ 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. レイマーチングのアニメーション https://twitter.com/ motions_work/status/ 694898149622550528 49

50. スフィアートレーシング今まで説明したのはレイマーチングの１種の  スフィアートレーシング衝突判定の過程で球（スフィアー）がたくさん出てくる 50

51. 3D描画手法の整理ラスタライザレイトレーシング - レイマーチング • スフィアトレーシング 51

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)); }

55. 様々な距離関数 http://iquilezles.org/www/articles/distfunctions/ distfunctions.htm 最初のメガデモの作者 iq 氏のページにまとめらている 55

56. シェーディング衝突「した・しない」の情報からはシルエットしか出せない 56

57. シェーディング光源の向きと法線が分かれば、シェーディング（陰影効果）できる  ﬂoat diﬀuse = clamp(dot(light, normal), 0.1, 1.0); 57

58. 法線を求めるレイトレーシングでは、  形状に応じた法線の計算が必要 - 球体の法線：交点から球体の中心を引く - ポリゴンの法線：エッジの外積を計算 58

59. 法線を求めるレイトレーシングでは、  形状に応じた法線の計算が必要 - 球体の法線：交点から球体の中心を引く - ポリゴンの法線：エッジの外積を計算 59

60. 法線を求めるレイマーチングでは、  どんな形状でも同じ計算で法線が求まる - 球体の法線：距離関数の勾配 - 箱の法線：距離関数の勾配 60

61. 法線を求めるレイマーチングでは、  どんな形状でも同じ計算で法線が求まる - 球体の法線：距離関数の勾配 - 箱の法線：距離関数の勾配 61

62. 法線を求めるなるほど！勾配！  って何だっけ？ 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. 距離関数の発展編レイマーチングでは、距離関数でシーンを定義距離関数を制した者が  レイマーチングを制す 67

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); }

72. 距離関数の実践編最初の鉄骨の例 CSG表現  ＋  無限の繰り返し    で実現可能！ 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. 距離関数の実践編カメラの向きを変えると… 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. 距離関数の実践編赤い色をつけて、遠くを明るくすると… 81

82. 距離関数まとめ距離関数: 物体までの最短距離以下を簡単に実現できる - CSG表現（図形の合成） - 無限の繰り返し少ないコードで複雑な形状をできる 82

84. three.js とは WebGLのラッパーライブラリ http://threejs.org/ 84

85. three.js を使う理由 WebGLの初期化処理を  たった数行のコードで書けるカメラのコントロールのための  ライブラリを最初から提供 85 大量のコードを書きたくない

86. three.jsの用語画像出典: https://html5experts.jp/yomotsu/5225/ 86

87. フラグメントシェーダ実装シーンの中に1枚の板を配置 1枚の板の塗り方を  決める処理として、  レイマーチングを  フラグメントシェーダ  をつかって実装 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.js 49行生WebGL 215行

91. 常にthree.jsが最適か？生WebGLを書くことで  勉強になる高度なことをしたいなら、生WebGLを使うしか無い 91

92. 常にthree.jsが最適か？ three.js勢も  生WebGL勢も仲良くしよう！ 92

93. まとめレイトレーシングはフラグメントシェーダで  高速にGPU実装できるレイマーチングでは距離関数で衝突判定をする - 短いコードで複雑な形状を表現できる - CSGや繰り返しが簡単にできる three.jsでWebGLを少ないコードで扱える 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. 資料について資料は後日 SlideShare で公開予定 http://www.slideshare.net/shohosoda9 96

97. END http://gam0022.net/webgl/ 97

シェーダだけで世界を創る！three.jsによるレイマーチング

シェーダだけで世界を創る！three.jsによるレイマーチング

Recommended

More Related Content

What's hot

What's hot(20)

Similar to シェーダだけで世界を創る！three.jsによるレイマーチング

Similar to シェーダだけで世界を創る！three.jsによるレイマーチング(20)

More from Sho Hosoda

More from Sho Hosoda(8)

Recently uploaded

Recently uploaded(8)

シェーダだけで世界を創る！three.jsによるレイマーチング