Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
シェーダだけで世界を創る!
three.jsによるレイマーチング
2016/02/14
GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022
自己紹介
細田 翔
去年まで筑波大学の
CGの研究室
KLab 新卒 1年目
three.js 歴 3年目
2
@gam0022(がむ)
最近、取り組んでいること
レイトレーシングをGLSLのフラグメントシェーダで実装
http://gam0022.net/webgl/
3
最近、取り組んでいること
レイトレーシングをGLSLのフラグメントシェーダで実装
http://gam0022.net/webgl/
4
自己紹介
細田 翔
去年まで筑波大学の
CGの研究室
KLab 新卒 1年目
three.js 歴 3年目
5
@gam0022(がむ)
レイマーチングのおかげで、

three.js に PRがマージされた

http://threejs.o...
レイマーチング?
レイマーチング
¦¦
レイトレーシングの1種
6
レイマーチングは超すごい
レイマーチングによって、コードから生成された映像
メガデモの神 iq(@iquilezles) 氏の作品
https://www.shadertoy.com/view/MdX3Rr
7
レイマーチングは超すごい
レイマーチングによって、コードから生成された映像
otaviogood 氏の作品 https://www.shadertoy.com/view/XljGDz
Kali 氏の作品 https://www.shaderto...
レイマーチングは超すごい
Shadertoy で raymarching タグを検索

https://www.shadertoy.com/results?query=tag%3Draymarching
9
レイマーチングはやばい
マインクラフトの作者もレイマーチングに注目!
http://japanese.engadget.com/2016/01/28/notch-oculus-vr-3-5kb/
10
レイマーチングは面白い
超すごい映像をコードだけで動的生成できる!
マインクラフトの作者もレイマーチングに注目!
11
レイマーチングすごく面白そう!!
話の流れ
1. レイマーチングのための基礎知識
2. レイマーチングのアルゴリズム解説
3. レイマーチング発展編
4. three.js の話
12
話の流れ
1. レイマーチングのための基礎知識
2. レイマーチングのアルゴリズム解説
3. レイマーチング発展編
4. three.js の話
13
3Dの描画方法
3Dの描画方法は大きく2種類
1. ラスタライズ法
2. レイトレーシング法
14
ラスタライズ法
形状を三角形

(ポリゴン)の

集合で表現
3Dの頂点を2D

に投影して描画
処理が軽い
15
ラスタライズ法
形状を三角形

(ポリゴン)の

集合で表現
3Dの頂点を2D

に投影して描画
処理が軽い
16
レイトレーシング法
カメラに届く光線(レイ)を

全ピクセル数シュミレーション
17
【画像出典】
http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
レイトレーシング法
全ピクセル数シミュレート
- 1024x768 =
786432(78万)回
処理は重い
無限に滑らか・

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

物理現象の再現が可能
19
【画像出典】
https://sites.google.com/site/
render...
2種類のシェーダ
WebGLのシェーダは2種類
1.頂点シェーダ

(vertex shader)
2.フラグメントシェーダ

(fragment shader)
20
頂点シェーダ
頂点の集合をカメラの世界を基準に座標変換
頂点ごとの処理
21
座標変換
フラグメントシェーダ
ポリゴンの塗り方を決める役割
- どう陰影をつけるか?
- テクスチャを貼るか?
ピクセルごとの処理
別名: ピクセルシェーダ
22
レイトレのフラグメントシェーダ実装
3Dシーンの中に1枚の板を配置
1枚の板の塗り方を

決める処理として、

レイトレーシングを

フラグメントシェーダ

をつかって実装
23
レイトレのフラグメントシェーダ実装
フラグメントシェーダは

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

並列性が高い手法
並列の実装は簡単
25
話の流れ
1. レイマーチングのための基礎知識
2. レイマーチングのアルゴリズム解説
3. レイマーチング発展編
4. three.js の話
26
ここから
レイマーチングの話
レイマーチング
レイマーチング レイトレーシング
レイマーチングの大きな特徴は、衝突判定
- レイトレーシング
• 形状(球体・平面・ポリゴンなど)によって、

衝突判定のアルゴリズムを使い分け
- レイマーチング
• 距離関数でシーンを定義し...
距離関数とは
距離関数
入力:3Dの座標 p (vec3)
出力:点 p からシーンの物体への

最短距離(float)
29
距離関数とは
距離関数 = 最短距離
イメージしずらいので、

実例を挙げていきます
30
距離関数とは
距離関数 = 

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

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

点 p から、シーン中の物体への最短距離を返す関数
33
レイマーチングのアルゴリズム
距離関数は分かったけど、どうやって衝突判定するの?
次のシーンを使って実例で説明!
34
レイマーチング
レイを少しずつ進める

¦¦
レイマーチング
35
レイマーチングのアルゴリズム
レイの先端はカメラの位置からスタート
がレイの先端
36
レイマーチングのアルゴリズム
レイの向きは常に真っ直ぐ
37
レイマーチングのアルゴリズム
赤い線 = 距離関数の値 = レイの先端からの最短距離
一番近い位置にあるのは黄色い球体
38
レイマーチングのアルゴリズム
距離関数の値だけ、レイの先端 を進める
39
レイマーチングのアルゴリズム
2週目の先端 から、さらに最短距離を求める
2週目でも黄色い球体が最短
40
レイマーチングのアルゴリズム
最短距離だけレイを進めて、3週目のレイの先端が求まる
41
レイマーチングのアルゴリズム
3週目でも黄色い球体が最短
42
レイマーチングのアルゴリズム
4週目のレイの先端が求まる
43
レイマーチングのアルゴリズム
4週目で、ついに緑の箱が最短!!
44
レイマーチングのアルゴリズム
レイの先端が無事に緑の箱の位置となった!!
45
レイマーチングのアルゴリズム
衝突するまで(最短距離が0)になるまで、

ひたすらレイを進めるだけ
最短距離だけ進めるので、

進みすぎて通り抜けることはない
単純!!シンプル!!
46
レイマーチングのアルゴリズム
レイマーチングの

アルゴリズムの繰り返し処理
¦¦
マーチングループ
47
レイマーチングのアルゴリズム
マーチングループの実装例
48
float dist, depth = 0.0;
p = origin;
for ( int i = 0; i < 64; i++ ){
dist = sceneDist( p );...
レイマーチングのアニメーション
https://twitter.com/
motions_work/status/
694898149622550528
49
スフィアートレーシング
今まで説明したのはレイマーチングの1種の

スフィアートレーシング
衝突判定の過程で球(スフィアー)がたくさん出てくる
50
3D描画手法の整理
ラスタライザ
レイトレーシング
- レイマーチング
• スフィアトレーシング
51
距離関数の実装
球体の距離関数
原点が中心の半径rの球体の距離関数
原点からの距離 - 半径r
超シンプル
53
float sphereDist(vec3 p, float r) {
return length(p) - r;
}
【画像出典】
http:/...
箱の距離関数
原点にある大きさbの箱の距離関数
これも超シンプル
動作原理はややこしいので割愛><
54
float boxDist(vec3 p, vec3 b){
return length(max(abs(p) - b, 0.0));
}
様々な距離関数
http://iquilezles.org/www/articles/distfunctions/
distfunctions.htm
最初のメガデモの作者 iq 氏のページにまとめらている
55
シェーディング
衝突「した・しない」の情報からはシルエットしか出せない
56
シェーディング
光源の向きと法線が分かれば、シェーディング(陰影効果)できる

float diffuse = clamp(dot(light, normal), 0.1, 1.0);
57
法線を求める
レイトレーシングでは、

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

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

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

どんな形状でも同じ計算で法線が求まる
- 球体の法線:距離関数の勾配
- 箱の法線: 距離関数の勾配
61
法線を求める
なるほど!
勾配!

って何だっけ?
62
法線を求める
63
const float EPS = 0.01;
vec3 getNormal( vec3 p ) {
return normalize(vec3(
sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) ...
法線を求める
数学では、f(x,y,z) = 0 で表せる曲面

の法線ベクトル n は

n = (f x, f y, f z) と fの偏微分(勾配)

となると知られている
距離関数は f(x,y,z) = 0 で表せる曲面に等しい
法線...
法線を求める
「学校で微分は傾きと習ったんだけど!?」
y = 2x のような式だと、xの微分は傾き
f(x,y) = 2x - y = 0 に変形すれば、

2次元でも微分は法線
65
距離関数は万能
距離関数の発展編
レイマーチングでは、距離関数でシーンを定義
距離関数を制した者が

レイマーチングを制す
67
話の流れ
1. レイマーチングのための基礎知識
2. レイマーチングのアルゴリズム解説
3. レイマーチング発展編
4. three.js の話
68
距離関数の合成
箱と球体を和集合で組み合わせた距離関数
min で各距離関数を合成
69
// 箱と球体を和集合で組み合わせた距離関数
float sceneDist(vec3 p) {
return min(
boxDist(p, vec3(...
距離関数の合成
距離関数を min や max で合成するだけで、CSG表現が可能
70
距離関数の無限の繰り返し
mod 演算 で p をループさせることで、

無限に繰り返し表示できる
71
float distSphere(vec3 p, float r) {
return length(p) - r;
}
vec3 onRe...
距離関数の実践編
最初の鉄骨の例
CSG表現

+

無限の繰り返し



で実現可能!
72
距離関数の実践編
幅widthの四角柱の距離関数
73
float barDist(vec2 p, float width) {
return length(max(abs(p) - width, 0.0));
}
float sceneDis...
距離関数の実践編
y軸の四角柱を和集合
74
float sceneDist(vec3 p) {
float bar_x = barDist(p.yz, 0.1);
float bar_y = barDist(p.xz, 0.1);
retur...
距離関数の実践編
z軸の四角柱を和集合
75
float sceneDist(vec3 p) {
float bar_x = barDist(p.yz, 0.1);
float bar_y = barDist(p.xz, 0.1);
float...
距離関数の実践編
無限の繰り返し
76
vec2 onRep(vec2 p, float interval) {
return mod(p, interval) - interval * 0.5;
}
float barDist(vec2 p,...
距離関数の実践編
同様に円柱を無限に繰り返し
77
float tubeDist(vec2 p, float interval, float width) {
return length(onRep(p, interval)) - width;...
距離関数の実践編
角柱 から 円柱 を 差集合 で刳り貫くと…
78
- =
距離関数の実践編
カメラの向きを変えると…
79
距離関数の実践編
sceneDist全体
80
float sceneDist(vec3 p) {
float bar_x = barDist(p.yz, 1.0, 0.1);
float bar_y = barDist(p.xz, 1.0, ...
距離関数の実践編
赤い色をつけて、遠くを明るくすると…
81
距離関数まとめ
距離関数: 物体までの最短距離
以下を簡単に実現できる
- CSG表現(図形の合成)
- 無限の繰り返し
少ないコードで複雑な形状をできる
82
話の流れ
1. レイマーチングのための基礎知識
2. レイマーチングのアルゴリズム解説
3. レイマーチング発展編
4. three.js の話
83
three.js とは
WebGLのラッパーライブラリ
http://threejs.org/
84
three.js を使う理由
WebGLの初期化処理を

たった数行のコードで書ける
カメラのコントロールのための

ライブラリを最初から提供
85
大量のコードを書きたくない
three.jsの用語
画像出典: https://html5experts.jp/yomotsu/5225/
86
フラグメントシェーダ実装
シーンの中に1枚の板を配置
1枚の板の塗り方を

決める処理として、

レイマーチングを

フラグメントシェーダ

をつかって実装
87
three.js からシェーダを使う
1枚の板のジオメトリを作り、

頂点シェーダとフラグメントシェーダを

設定したマテリアルを適用するコード
88
geometry = new THREE.PlaneBufferGeometry(2.0, ...
three.js からシェーダを使う
Material の初期化の時に、シェーダのコードを渡すだけ
89
geometry = new THREE.PlaneBufferGeometry(2.0, 2.0);
material = new TH...
three.js vs 生WebGL
スクロールバーに注目▼
90
three.js 49行 生WebGL 215行
常にthree.jsが最適か?
生WebGLを書くことで

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

生WebGL勢 も
仲良くしよう!
92
まとめ
レイトレーシングはフラグメントシェーダで

高速にGPU実装できる
レイマーチングでは距離関数で衝突判定をする
- 短いコードで複雑な形状を表現できる
- CSGや繰り返しが簡単にできる
three.jsでWebGLを少ないコードで扱え...
参考資料
我らが @h_doxas 先生の資料
- https://wgld.org/d/glsl/
メガデモの神 iq(@iquilezles) 氏のページ
- http://iquilezles.org/www/index.htm
のWeb...
参考資料
これがGPUの力!Three.jsによる

リアルタイム なレイトレーシング
- http://qiita.com/gam0022/items/
03699a07e4a4b5f2d41f
これがGPUの力!three.jsによる

リ...
資料について
資料は後日 SlideShare で公開予定
http://www.slideshare.net/shohosoda9
96
END
http://gam0022.net/webgl/
97
Upcoming SlideShare
Loading in …5
×

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

18,521 views

Published on

2016/02/14

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

GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022

Published in: Technology
  • Be the first to comment

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

  1. 1. シェーダだけで世界を創る! three.jsによるレイマーチング 2016/02/14 GPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会 @gam0022
  2. 2. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 2 @gam0022(がむ)
  3. 3. 最近、取り組んでいること レイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 3
  4. 4. 最近、取り組んでいること レイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 4
  5. 5. 自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒 1年目 three.js 歴 3年目 5 @gam0022(がむ) レイマーチングのおかげで、
 three.js に PRがマージされた
 http://threejs.org/examples/#webgl_raymarching_reflect
  6. 6. レイマーチング? レイマーチング ¦¦ レイトレーシングの1種 6
  7. 7. レイマーチングは超すごい レイマーチングによって、コードから生成された映像 メガデモの神 iq(@iquilezles) 氏の作品 https://www.shadertoy.com/view/MdX3Rr 7
  8. 8. レイマーチングは超すごい レイマーチングによって、コードから生成された映像 otaviogood 氏の作品 https://www.shadertoy.com/view/XljGDz Kali 氏の作品 https://www.shadertoy.com/view/Xtf3Rn 8
  9. 9. レイマーチングは超すごい Shadertoy で raymarching タグを検索
 https://www.shadertoy.com/results?query=tag%3Draymarching 9
  10. 10. レイマーチングはやばい マインクラフトの作者もレイマーチングに注目! http://japanese.engadget.com/2016/01/28/notch-oculus-vr-3-5kb/ 10
  11. 11. レイマーチングは面白い 超すごい映像をコードだけで動的生成できる! マインクラフトの作者もレイマーチングに注目! 11 レイマーチングすごく面白そう!!
  12. 12. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 12
  13. 13. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 13
  14. 14. 3Dの描画方法 3Dの描画方法は大きく2種類 1. ラスタライズ法 2. レイトレーシング法 14
  15. 15. ラスタライズ法 形状を三角形
 (ポリゴン)の
 集合で表現 3Dの頂点を2D
 に投影して描画 処理が軽い 15
  16. 16. ラスタライズ法 形状を三角形
 (ポリゴン)の
 集合で表現 3Dの頂点を2D
 に投影して描画 処理が軽い 16
  17. 17. レイトレーシング法 カメラに届く光線(レイ)を
 全ピクセル数シュミレーション 17 【画像出典】 http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
  18. 18. レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・
 物理現象の再現が可能 18 【画像出典】 https://sites.google.com/site/ rendering1h/
  19. 19. レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・
 物理現象の再現が可能 19 【画像出典】 https://sites.google.com/site/ rendering1h/ 詳しくは レイトレーシングの専門家 hole 氏に聞いてください edupt(パストレーシングベースの
 物理ベースレンダラ)の作者
  20. 20. 2種類のシェーダ WebGLのシェーダは2種類 1.頂点シェーダ
 (vertex shader) 2.フラグメントシェーダ
 (fragment shader) 20
  21. 21. 頂点シェーダ 頂点の集合をカメラの世界を基準に座標変換 頂点ごとの処理 21 座標変換
  22. 22. フラグメントシェーダ ポリゴンの塗り方を決める役割 - どう陰影をつけるか? - テクスチャを貼るか? ピクセルごとの処理 別名: ピクセルシェーダ 22
  23. 23. レイトレのフラグメントシェーダ実装 3Dシーンの中に1枚の板を配置 1枚の板の塗り方を
 決める処理として、
 レイトレーシングを
 フラグメントシェーダ
 をつかって実装 23
  24. 24. レイトレのフラグメントシェーダ実装 フラグメントシェーダは
 GPUで並列処理される とても高速に処理できる リアルタイム描画が可能 24
  25. 25. レイトレのフラグメントシェーダ実装 GPUで並列処理? 難しそう… レイトレーシングは
 並列性が高い手法 並列の実装は簡単 25
  26. 26. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 26
  27. 27. ここから レイマーチングの話
  28. 28. レイマーチング レイマーチング レイトレーシング レイマーチングの大きな特徴は、衝突判定 - レイトレーシング • 形状(球体・平面・ポリゴンなど)によって、
 衝突判定のアルゴリズムを使い分け - レイマーチング • 距離関数でシーンを定義し、
 レイを少しずつ進めながら衝突判定 28
  29. 29. 距離関数とは 距離関数 入力:3Dの座標 p (vec3) 出力:点 p からシーンの物体への
 最短距離(float) 29
  30. 30. 距離関数とは 距離関数 = 最短距離 イメージしずらいので、
 実例を挙げていきます 30
  31. 31. 距離関数とは 距離関数 = 
 点 p から、シーン中の物体への最短距離を返す関数 31 距離関数(p) = 最短距離の長さ
  32. 32. 距離関数とは 距離関数 = 
 点 p から、シーン中の物体への最短距離を返す関数 32
  33. 33. 距離関数とは 距離関数 = 
 点 p から、シーン中の物体への最短距離を返す関数 33
  34. 34. レイマーチングのアルゴリズム 距離関数は分かったけど、どうやって衝突判定するの? 次のシーンを使って実例で説明! 34
  35. 35. レイマーチング レイを少しずつ進める
 ¦¦ レイマーチング 35
  36. 36. レイマーチングのアルゴリズム レイの先端はカメラの位置からスタート がレイの先端 36
  37. 37. レイマーチングのアルゴリズム レイの向きは常に真っ直ぐ 37
  38. 38. レイマーチングのアルゴリズム 赤い線 = 距離関数の値 = レイの先端からの最短距離 一番近い位置にあるのは黄色い球体 38
  39. 39. レイマーチングのアルゴリズム 距離関数の値だけ、レイの先端 を進める 39
  40. 40. レイマーチングのアルゴリズム 2週目の先端 から、さらに最短距離を求める 2週目でも黄色い球体が最短 40
  41. 41. レイマーチングのアルゴリズム 最短距離だけレイを進めて、3週目のレイの先端が求まる 41
  42. 42. レイマーチングのアルゴリズム 3週目でも黄色い球体が最短 42
  43. 43. レイマーチングのアルゴリズム 4週目のレイの先端が求まる 43
  44. 44. レイマーチングのアルゴリズム 4週目で、ついに緑の箱が最短!! 44
  45. 45. レイマーチングのアルゴリズム レイの先端が無事に緑の箱の位置となった!! 45
  46. 46. レイマーチングのアルゴリズム 衝突するまで(最短距離が0)になるまで、
 ひたすらレイを進めるだけ 最短距離だけ進めるので、
 進みすぎて通り抜けることはない 単純!!シンプル!! 46
  47. 47. レイマーチングのアルゴリズム レイマーチングの
 アルゴリズムの繰り返し処理 ¦¦ マーチングループ 47
  48. 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. 49. レイマーチングのアニメーション https://twitter.com/ motions_work/status/ 694898149622550528 49
  50. 50. スフィアートレーシング 今まで説明したのはレイマーチングの1種の
 スフィアートレーシング 衝突判定の過程で球(スフィアー)がたくさん出てくる 50
  51. 51. 3D描画手法の整理 ラスタライザ レイトレーシング - レイマーチング • スフィアトレーシング 51
  52. 52. 距離関数の実装
  53. 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 r
  54. 54. 箱の距離関数 原点にある大きさbの箱の距離関数 これも超シンプル 動作原理はややこしいので割愛>< 54 float boxDist(vec3 p, vec3 b){ return length(max(abs(p) - b, 0.0)); }
  55. 55. 様々な距離関数 http://iquilezles.org/www/articles/distfunctions/ distfunctions.htm 最初のメガデモの作者 iq 氏のページにまとめらている 55
  56. 56. シェーディング 衝突「した・しない」の情報からはシルエットしか出せない 56
  57. 57. シェーディング 光源の向きと法線が分かれば、シェーディング(陰影効果)できる
 float diffuse = clamp(dot(light, normal), 0.1, 1.0); 57
  58. 58. 法線を求める レイトレーシングでは、
 形状に応じた法線の計算が必要 - 球体の法線:交点から球体の中心を引く - ポリゴンの法線:エッジの外積を計算 58
  59. 59. 法線を求める レイトレーシングでは、
 形状に応じた法線の計算が必要 - 球体の法線:交点から球体の中心を引く - ポリゴンの法線:エッジの外積を計算 59
  60. 60. 法線を求める レイマーチングでは、
 どんな形状でも同じ計算で法線が求まる - 球体の法線:距離関数の勾配 - 箱の法線: 距離関数の勾配 60
  61. 61. 法線を求める レイマーチングでは、
 どんな形状でも同じ計算で法線が求まる - 球体の法線:距離関数の勾配 - 箱の法線: 距離関数の勾配 61
  62. 62. 法線を求める なるほど! 勾配!
 って何だっけ? 62
  63. 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. 64. 法線を求める 数学では、f(x,y,z) = 0 で表せる曲面
 の法線ベクトル n は
 n = (f x, f y, f z) と fの偏微分(勾配)
 となると知られている 距離関数は f(x,y,z) = 0 で表せる曲面に等しい 法線n = 距離関数の勾配 として計算可能 64
  65. 65. 法線を求める 「学校で微分は傾きと習ったんだけど!?」 y = 2x のような式だと、xの微分は傾き f(x,y) = 2x - y = 0 に変形すれば、
 2次元でも微分は法線 65
  66. 66. 距離関数は万能
  67. 67. 距離関数の発展編 レイマーチングでは、距離関数でシーンを定義 距離関数を制した者が
 レイマーチングを制す 67
  68. 68. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 68
  69. 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. 70. 距離関数の合成 距離関数を min や max で合成するだけで、CSG表現が可能 70
  71. 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. 72. 距離関数の実践編 最初の鉄骨の例 CSG表現
 +
 無限の繰り返し
 
 で実現可能! 72
  73. 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. 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. 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. 距離関数の実践編 無限の繰り返し 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. 距離関数の実践編 同様に円柱を無限に繰り返し 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. 距離関数の実践編 角柱 から 円柱 を 差集合 で刳り貫くと… 78 - =
  79. 79. 距離関数の実践編 カメラの向きを変えると… 79
  80. 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. 距離関数の実践編 赤い色をつけて、遠くを明るくすると… 81
  82. 82. 距離関数まとめ 距離関数: 物体までの最短距離 以下を簡単に実現できる - CSG表現(図形の合成) - 無限の繰り返し 少ないコードで複雑な形状をできる 82
  83. 83. 話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3. レイマーチング発展編 4. three.js の話 83
  84. 84. three.js とは WebGLのラッパーライブラリ http://threejs.org/ 84
  85. 85. three.js を使う理由 WebGLの初期化処理を
 たった数行のコードで書ける カメラのコントロールのための
 ライブラリを最初から提供 85 大量のコードを書きたくない
  86. 86. three.jsの用語 画像出典: https://html5experts.jp/yomotsu/5225/ 86
  87. 87. フラグメントシェーダ実装 シーンの中に1枚の板を配置 1枚の板の塗り方を
 決める処理として、
 レイマーチングを
 フラグメントシェーダ
 をつかって実装 87
  88. 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. 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. 90. three.js vs 生WebGL スクロールバーに注目▼ 90 three.js 49行 生WebGL 215行
  91. 91. 常にthree.jsが最適か? 生WebGLを書くことで
 勉強になる 高度なことをしたいなら、 生WebGLを使うしか無い 91
  92. 92. 常にthree.jsが最適か? three.js勢 も
 生WebGL勢 も 仲良くしよう! 92
  93. 93. まとめ レイトレーシングはフラグメントシェーダで
 高速にGPU実装できる レイマーチングでは距離関数で衝突判定をする - 短いコードで複雑な形状を表現できる - CSGや繰り返しが簡単にできる three.jsでWebGLを少ないコードで扱える 93
  94. 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. 95. 参考資料 これがGPUの力!Three.jsによる
 リアルタイム なレイトレーシング - http://qiita.com/gam0022/items/ 03699a07e4a4b5f2d41f これがGPUの力!three.jsによる
 リアルタイム なレイトレーシング
 ∼宝石編∼ - http://qiita.com/gam0022/items/ 9875480d33e03fe2113c 95
  96. 96. 資料について 資料は後日 SlideShare で公開予定 http://www.slideshare.net/shohosoda9 96
  97. 97. END http://gam0022.net/webgl/ 97

×