Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
レイマーチングで
半歩差のつくシェーダー⼩技テクニック集
GLSL Tech Night 2018
召⽥ 敬(keim_at_si)
⼩学⽣時代︔FM7 (ベーマガ)
中〜⾼校⽣時代︔ポケコン (ポケコンジャーナル)
⼤学⽣時代︔DTM(M3・コミケ)
20代︔フリーゲーム (2ch ゲ作板/STG板)
30代︔Flasher (wonderfl)
40代︔シェーダアート (S...
レイマーチングでいつもよりちょっと綺麗な絵を描こう
Motivation
From https://www.shadertoy.com/user/keim
レイマーチング(スフィアトレーシング)とは︖
Background
レイトレーシングの⼀種
⽐較的計算が単純
計算過程・結果の応⽤範囲が広い
フラグメントシェーダでの実装が容易
【参考】#GLSLTech 2016
@gam0022 シェーダだ...
Background
GPUで本当のリアルタイム・レイトレーシングが可能
【参考】#GLSLTech 2016
@gam0022 シェーダだけで世界を創る︕three.jsによるレイマーチング
https://www.slideshare.ne...
Background
【参考】#GLSLTech 2016
@gam0022 シェーダだけで世界を創る︕three.jsによるレイマーチング
https://www.slideshare.net/shohosoda9/threejs-58238...
Background
⾔ったよね︖
(※お誘いありがとうございます)
モーション関数
光の表現
影と陰
アフターエフェクト
コード・リーディング
Agenda
Agenda
モーション関数
Topic: Motion
【お題】指数関数を使う︓定義
特に a がネイピア数(e=2.718..)の時、
指数関数とは
GLSL では power(a, x) 関数とexp(x) 関数がある
Topic: Motion
【お題】指数関数を使う︓定義
GLSL では power(a, x) 関数とexp(x) 関数がある、けど
power(a,x) = exp(k*x); // k = ln(a)
なので、数学的な意味を考慮しないなら...
Topic: Motion
【お題】指数関数を使う︓雰囲気
モーションで関数を使う場合、意味はどうでも良い
重要なのは数字変化の「雰囲気」
指数関数の雰囲気
x<0 では
「きゅーっ」と減速・収縮
0<x では
「ぐわっ」と加速・爆発
※感じ⽅...
Topic: Motion
【お題】指数関数を使う︓特徴
モーションで関数を使う場合、意味はどうでも良い
重要なのは数字変化の「雰囲気」
y=exp(x)
- x<0 では変化が緩やか
- 0<x では変化が激しい
- -∞<0<+∞ が 0<...
Topic: Motion
【お題】指数関数を使う︓使い⽅
y=exp(x)y=sin(x) y=exp(sin(x))
X =
-1と+1の間を往復するsin()をexp()で変形させる
負値でゆっくり、正値で早く変化する動きに
Topic: Motion
【お題】指数関数を使う︓使い⽅
-1と+1の間を往復するsin()をexp()で変形させる
0付近で張り付いて粘るような数値変化が可能
https://www.shadertoy.com/view/MtGSWc のカ...
Topic: Motion
【お題】指数関数を使う︓応⽤
モーショングラフィックスでよくある
「ヒュッと⼊って、ヒュッと出てく」
感じの動きとか再現できる(語彙⼒)
指数イージング関数
m=18
https://glslfan.com/?cha...
Topic: Motion
【お題】指数関数を使う︓まとめ
指数関数を使うと緩急をつけることができる
y=sin(x)
>
数字変化の「雰囲気」⼤切
y=exp(k sin(x))/exp(k)
Topic: Motion
ツール紹介
https://www.desmos.com/
ちょっとした数式の雰囲気を確認したいとき、desoms が超便利
Agenda
光の表現
Topic: Light Emission
【お題】発光体の表現
① グロウ(ブルーム)
②シャドウ(シェード)
ダイナミックレンジ以上の光を表現するために、
様々な疑似的⼿法が考案されてる(HDRレンダリング)。
グロウとシャドウがあれば、⼤...
Topic: Light Emission
【お題】発光体の表現
グロウの計算(点光源)
レイトレーシングの場合は、
視線ベクトルと光源の距離に応じて、
発光⾊を加算するだけ
k=1
k=2
k=4
distance
Emission
k値でグ...
Topic: Light Emission
【お題】発光体の表現
グロウの遮蔽
遮蔽体までの距離は、レイトレーシングの
過程で算出される
遮蔽体までの距離<発光体までの距離
発光⾊を加算しない
遮蔽体までの距離>発光体までの距離
発光⾊を加算す...
Topic: Light Emission
【お題】発光体の表現
形状を持った物体のグロウ
レイマーチングの場合、光線追跡の時点で
既に物体までの距離を計算している。
(”d+2.0”は、物体表⾯で0除算が発⽣するための調整)
ライティング計算...
Topic: Light Emission
【お題】発光体の表現
グロー計算でよくある失敗
×
RGB=(1, 0, 0)
〇
RGB=(1, 0.1, 0.1)
- 0は何倍しても何乗しても0
- まぶしい発光の表現=「⽩」
RGB全要素を少...
Topic: Light Emission
【お題】発光体の表現︓まとめ
グロウとシャドウがあれば、⼤体光る。
Topic: Light Emission
おまけ
GLSLfan のデフォルトシェーダは、Sin波線までの距離に対するグロウ計算
line += 0.0025/abs(p.y + sin(p.x*1.0+timer+offset)*0.75)...
Agenda
影と陰
Topic: Shading
【お題】⼤域照明︕
http://graphics.ucsd.edu/~henrik/
Cornell box images by Henrik Wann Jensen
Ray Tracing Path Traci...
Topic: Shading
【お題】⼤域照明︕
レイマーチングの場合、
- Soft Shadow
- Ambient Occlusion
による近似が⼀般的
リアルタイムレンダリングに向けた様々な⼿法が考案されている
ss=100/ao=0...
Topic: Shading
【お題】⼤域照明︕
Soft Shadow
Ambient Occlusion
綺麗...だけど、ShaderToy界隈では普遍的⼿法
Topic: Shading (Future Work)
【お題】より⾼品質な⼤域照明へ︕
Ambient Occlusion 疑似拡散反射光GI
AO計算を応⽤して拡散反射光GIを実装してみた【実装】
⼤域照明特有の「⾊にじみ」に挑戦
※⾊に...
Topic: Shading (Future Work)
【お題】より⾼品質な⼤域照明へ︕
AO計算を応⽤して拡散反射光GIを実装してみた【結果】
Ambient Occlusion 疑似拡散反射光GI
めっちゃ地味
Topic: Shading (Future Work)
【お題】より⾼品質な⼤域照明へ︕
AO計算を応⽤して拡散反射光GIを実装してみた【失敗】
失敗例(光らせすぎ)
物理的に正しくないので最終的には⼿調整
疑似拡散反射光GI
Topic: Shading (Future Work)
【お題】より⾼品質な⼤域照明へ︕
AO計算を応⽤して拡散反射光GIを実装してみた【応⽤】
反射⾯なら割と⾃然 集光模様︕ (in progress)
拡散反射⾯レンダリングでの結果は地味...
Agenda
アフターエフェクト
Topic: After Effect
【お題】フォーカルブラー(マルチパス)
マルチパス・レンダリングであれば、簡単・軽量・効果的
フォーカルブラー無 フォーカルブラー有
Topic: After Effect
【お題】フォーカルブラー(マルチパス)
fragColor = vec4(render(ray), min(abs(hit.distance-focus)/100., 1.));
レンダリング結果
vec3...
Topic: After Effect
【お題】フォーカルブラー(シングルパス)
シングルパス・レンダリングでも可能
ただし、簡単だけど軽量じゃない
フォーカルブラー無 フォーカルブラー有
Topic: After Effect
【お題】フォーカルブラー(シングルパス)
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec4 col = render(ray);
co...
Topic: After Effect
【お題】錯視⽴体
Shadertoy でもまだまだ未開の地
アイディア勝負なのでワンチャンあるかも
Topic: After Effect
【お題】錯視⽴体
近い物体の⼿前に遠い物体を描画したい
→遠い物体が描かれる場所で近い物体を描かなければよい
trickflag = 0
trickflag = 1
trickflag = 0
最初に、
⼿前に表...
Topic: After Effect
まとめ
フォーカルブラー 錯視⽴体
ブルーム+モーションブラー ⾛査線エフェクト
今回紹介できなかったが、ほかにも多種多様なAfter Effectがある。
After Effect はアイディア勝負
Agenda
コード・リーディング
Topic: Code Reading
【お題】神々の⾔葉を読む
Shadertoy/GLSLfan は宝の⼭
でも
GLSLのコードは、ものすごく読みにくい
1シェーダをしっかり読み解くだけで、割とガチWizard級の知識が得られる。
(※個...
Topic: Code Reading
【お題】神々の⾔葉を読む
- 後付けで関数定義ができない
- 1ページで1シェーダが完結
- 命令がプリミティブ
- パラメータをハードコーディング
- 変数名に略称を⽤いることが多い
- こなれた英語コ...
Topic: Code Reading
【お題】コードを読む①︔流れと位置
〇 後付けで関数定義ができない
⇒ 定義は必ず呼び出し前
- 処理順は下から上になる
- 汎⽤的に使う定数・関数は上⽅
- 結果、距離関数は真中付近
の事が多い
(※ ...
Topic: Code Reading
レイマーチングの場合、
処理の⼤まかな構造は変わらない
それぞれの処理ブロックを意識する
【お題】コードを読む②︔全体構造把握
エントリポイント⇒
レンダリング⇒
ライティング⇒
光線追跡⇒
距離関数⇒
...
Topic: Code Reading
【お題】コードを読む③︔クセがすごい
エントリポイント⇒
レンダリング⇒
ライティング⇒
光線追跡⇒
距離関数⇒
汎⽤関数⇒
構造体定義⇒
定数定義⇒
- 変数名に略称を⽤いることが多い
- こなれた英語...
Topic: Code Reading
【お題】コードを読む④︔英語
エントリポイント⇒
レンダリング⇒
ライティング⇒
光線追跡⇒
距離関数⇒
汎⽤関数⇒
構造体定義⇒
定数定義⇒
- 専⾨⽤語のボキャブラリが増える
- 関数の機能がシンプル...
Topic: Code Reading
まとめ
Shadertoy/GLSLfan は宝の⼭
1シェーダをしっかり読み解くだけで、割とガチWizard級の知識が得られる。
レイマーチングで
半歩差のつくシェーダー⼩技テクニック集
GLSL Tech Night 2018
https://twitter.com/mike_at_cg
https://twitter.com/keim_at_si
https://ww...
Prochain SlideShare
Chargement dans…5
×

GLSLtech2018 レイマーチングで半歩差のつく小技集

3 986 vues

Publié le

9/13 登壇したプレゼンテーション資料です

Publié dans : Logiciels
  • Soyez le premier à commenter

GLSLtech2018 レイマーチングで半歩差のつく小技集

  1. 1. レイマーチングで 半歩差のつくシェーダー⼩技テクニック集 GLSL Tech Night 2018 召⽥ 敬(keim_at_si)
  2. 2. ⼩学⽣時代︔FM7 (ベーマガ) 中〜⾼校⽣時代︔ポケコン (ポケコンジャーナル) ⼤学⽣時代︔DTM(M3・コミケ) 20代︔フリーゲーム (2ch ゲ作板/STG板) 30代︔Flasher (wonderfl) 40代︔シェーダアート (Shadertoy/GLSLfan) keim_at_si (⽇曜プログラマ―) Nomltest Sky Swimmers Heaven Quantized Blaze TSS Clipboard Player MMLTalks / SiON Wonderfl Experiments Who am I ?
  3. 3. レイマーチングでいつもよりちょっと綺麗な絵を描こう Motivation From https://www.shadertoy.com/user/keim
  4. 4. レイマーチング(スフィアトレーシング)とは︖ Background レイトレーシングの⼀種 ⽐較的計算が単純 計算過程・結果の応⽤範囲が広い フラグメントシェーダでの実装が容易 【参考】#GLSLTech 2016 @gam0022 シェーダだけで世界を創る︕three.jsによるレイマーチング https://www.slideshare.net/shohosoda9/threejs-58238484
  5. 5. Background GPUで本当のリアルタイム・レイトレーシングが可能 【参考】#GLSLTech 2016 @gam0022 シェーダだけで世界を創る︕three.jsによるレイマーチング https://www.slideshare.net/shohosoda9/threejs-58238484 ※今年ゲーム業界でバズワード化してるリアルタイム・レイトレーシングとは別物 近年、ラスタライズとレイトレースの境界が曖昧になってるとは思うものの、 正直アレをレイトレと呼ぶのは抵抗があります...(※個⼈の意⾒です) レイマーチング(スフィアトレーシング)とは︖
  6. 6. Background 【参考】#GLSLTech 2016 @gam0022 シェーダだけで世界を創る︕three.jsによるレイマーチング https://www.slideshare.net/shohosoda9/threejs-58238484 レイマーチング(スフィアトレーシング)とは︖ - 距離関数(形状/繰り返し/変形など)の実装 - レイマーチングによるレイトレース(反射/屈折) - 基本的なシェーディング(拡散⾯/影/AO) 【今⽇のお題】 の話はしません。
  7. 7. Background ⾔ったよね︖ (※お誘いありがとうございます)
  8. 8. モーション関数 光の表現 影と陰 アフターエフェクト コード・リーディング Agenda
  9. 9. Agenda モーション関数
  10. 10. Topic: Motion 【お題】指数関数を使う︓定義 特に a がネイピア数(e=2.718..)の時、 指数関数とは GLSL では power(a, x) 関数とexp(x) 関数がある
  11. 11. Topic: Motion 【お題】指数関数を使う︓定義 GLSL では power(a, x) 関数とexp(x) 関数がある、けど power(a,x) = exp(k*x); // k = ln(a) なので、数学的な意味を考慮しないなら、exp(x)で⼗分。 ...という定義はどうでも良い
  12. 12. Topic: Motion 【お題】指数関数を使う︓雰囲気 モーションで関数を使う場合、意味はどうでも良い 重要なのは数字変化の「雰囲気」 指数関数の雰囲気 x<0 では 「きゅーっ」と減速・収縮 0<x では 「ぐわっ」と加速・爆発 ※感じ⽅には個⼈差があります。
  13. 13. Topic: Motion 【お題】指数関数を使う︓特徴 モーションで関数を使う場合、意味はどうでも良い 重要なのは数字変化の「雰囲気」 y=exp(x) - x<0 では変化が緩やか - 0<x では変化が激しい - -∞<0<+∞ が 0<1<+∞に変換 - 実数→正数への変換
  14. 14. Topic: Motion 【お題】指数関数を使う︓使い⽅ y=exp(x)y=sin(x) y=exp(sin(x)) X = -1と+1の間を往復するsin()をexp()で変形させる 負値でゆっくり、正値で早く変化する動きに
  15. 15. Topic: Motion 【お題】指数関数を使う︓使い⽅ -1と+1の間を往復するsin()をexp()で変形させる 0付近で張り付いて粘るような数値変化が可能 https://www.shadertoy.com/view/MtGSWc のカメラモーション
  16. 16. Topic: Motion 【お題】指数関数を使う︓応⽤ モーショングラフィックスでよくある 「ヒュッと⼊って、ヒュッと出てく」 感じの動きとか再現できる(語彙⼒) 指数イージング関数 m=18 https://glslfan.com/?channel=-L0I4J2AzJUyHagNW8nW のキューブの動き
  17. 17. Topic: Motion 【お題】指数関数を使う︓まとめ 指数関数を使うと緩急をつけることができる y=sin(x) > 数字変化の「雰囲気」⼤切 y=exp(k sin(x))/exp(k)
  18. 18. Topic: Motion ツール紹介 https://www.desmos.com/ ちょっとした数式の雰囲気を確認したいとき、desoms が超便利
  19. 19. Agenda 光の表現
  20. 20. Topic: Light Emission 【お題】発光体の表現 ① グロウ(ブルーム) ②シャドウ(シェード) ダイナミックレンジ以上の光を表現するために、 様々な疑似的⼿法が考案されてる(HDRレンダリング)。 グロウとシャドウがあれば、⼤体ソレっぽい。
  21. 21. Topic: Light Emission 【お題】発光体の表現 グロウの計算(点光源) レイトレーシングの場合は、 視線ベクトルと光源の距離に応じて、 発光⾊を加算するだけ k=1 k=2 k=4 distance Emission k値でグローの広がりを操作
  22. 22. Topic: Light Emission 【お題】発光体の表現 グロウの遮蔽 遮蔽体までの距離は、レイトレーシングの 過程で算出される 遮蔽体までの距離<発光体までの距離 発光⾊を加算しない 遮蔽体までの距離>発光体までの距離 発光⾊を加算する if (hit.length > length(light.pos - pos)) { out += emit(hit, light.pos); }
  23. 23. Topic: Light Emission 【お題】発光体の表現 形状を持った物体のグロウ レイマーチングの場合、光線追跡の時点で 既に物体までの距離を計算している。 (”d+2.0”は、物体表⾯で0除算が発⽣するための調整) ライティング計算時に、発光物体までの距離 からグローを計算して加算 Surface emitSurface = NO_HIT; Surface map(in vec3 p) { Surface s = Surface(dfBox(p, ...), ...); emitSurface = near(s, emitSurface); return near(s, Surface(dfPln(p, ...), ...); } vec3 lighting(in Hit hit, in Light lit) { emit = pow(emitSurface.d+2.0, -1.5)*emitColor; ... 光線追跡中に⼀番近づいた表⾯情報を保持しておく 保持しておいた表⾯情報から発光⾊を計算
  24. 24. Topic: Light Emission 【お題】発光体の表現 グロー計算でよくある失敗 × RGB=(1, 0, 0) 〇 RGB=(1, 0.1, 0.1) - 0は何倍しても何乗しても0 - まぶしい発光の表現=「⽩」 RGB全要素を少し⼊れないと光っぽくならない。
  25. 25. Topic: Light Emission 【お題】発光体の表現︓まとめ グロウとシャドウがあれば、⼤体光る。
  26. 26. Topic: Light Emission おまけ GLSLfan のデフォルトシェーダは、Sin波線までの距離に対するグロウ計算 line += 0.0025/abs(p.y + sin(p.x*1.0+timer+offset)*0.75) * color;
  27. 27. Agenda 影と陰
  28. 28. Topic: Shading 【お題】⼤域照明︕ http://graphics.ucsd.edu/~henrik/ Cornell box images by Henrik Wann Jensen Ray Tracing Path Tracing もはや⼤域照明はCGにおける必修科⽬
  29. 29. Topic: Shading 【お題】⼤域照明︕ レイマーチングの場合、 - Soft Shadow - Ambient Occlusion による近似が⼀般的 リアルタイムレンダリングに向けた様々な⼿法が考案されている ss=100/ao=0 ss=1/ao=0 ss=off/ao=0.35 ss=1/ao=0.35 無し Soft Shadowのみ A.O. のみ Soft Shadow+A.O. ⼤域照明=無数の光源計算=無理︕
  30. 30. Topic: Shading 【お題】⼤域照明︕ Soft Shadow Ambient Occlusion 綺麗...だけど、ShaderToy界隈では普遍的⼿法
  31. 31. Topic: Shading (Future Work) 【お題】より⾼品質な⼤域照明へ︕ Ambient Occlusion 疑似拡散反射光GI AO計算を応⽤して拡散反射光GIを実装してみた【実装】 ⼤域照明特有の「⾊にじみ」に挑戦 ※⾊にじみ 近傍⾯からの拡散反射光が光源となって うっすらと近傍⾯⾊が反映される現象
  32. 32. Topic: Shading (Future Work) 【お題】より⾼品質な⼤域照明へ︕ AO計算を応⽤して拡散反射光GIを実装してみた【結果】 Ambient Occlusion 疑似拡散反射光GI めっちゃ地味
  33. 33. Topic: Shading (Future Work) 【お題】より⾼品質な⼤域照明へ︕ AO計算を応⽤して拡散反射光GIを実装してみた【失敗】 失敗例(光らせすぎ) 物理的に正しくないので最終的には⼿調整 疑似拡散反射光GI
  34. 34. Topic: Shading (Future Work) 【お題】より⾼品質な⼤域照明へ︕ AO計算を応⽤して拡散反射光GIを実装してみた【応⽤】 反射⾯なら割と⾃然 集光模様︕ (in progress) 拡散反射⾯レンダリングでの結果は地味だったが、 応⽤範囲は意外に広い、かもしれない。
  35. 35. Agenda アフターエフェクト
  36. 36. Topic: After Effect 【お題】フォーカルブラー(マルチパス) マルチパス・レンダリングであれば、簡単・軽量・効果的 フォーカルブラー無 フォーカルブラー有
  37. 37. Topic: After Effect 【お題】フォーカルブラー(マルチパス) fragColor = vec4(render(ray), min(abs(hit.distance-focus)/100., 1.)); レンダリング結果 vec3(R,G,B) 焦点距離を0とした衝突表⾯までの距離を 0~1の範囲に正規化 1枚⽬︔レンダリング結果(RGB値)と、w値にレイトレースした距離を⼊れておく 2枚⽬︔1枚⽬から受け取ったw値に応じてサンプルポイントをずらした4点で平均化 void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec4 col = getRenderdTexture(fragCoord); vec2 b = vec2(col.w * BLUR * iResolution.x, 0); fragColor = gamma((col + img(fragCoord+b.xy) + img(fragCoord-b.xy) + img(fragCoord+b.yx) + img(fragCoord-b.yx))/5.); }
  38. 38. Topic: After Effect 【お題】フォーカルブラー(シングルパス) シングルパス・レンダリングでも可能 ただし、簡単だけど軽量じゃない フォーカルブラー無 フォーカルブラー有
  39. 39. Topic: After Effect 【お題】フォーカルブラー(シングルパス) void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec4 col = render(ray); col += render(blur_ray(ray, camera, LENS_BLUR))); col += render(blur_ray(ray, camera, -LENS_BLUR))); fragColor = gamma(col/3.); } // blur_ray() ... ターゲットを中⼼にLENS_BLUR分回転 焦点を合わせるターゲットを中⼼に カメラを少し移動してレンダリングした 結果を平均化する。 ⇒ 平均化分だけ全画⾯のレイトレが必要
  40. 40. Topic: After Effect 【お題】錯視⽴体 Shadertoy でもまだまだ未開の地 アイディア勝負なのでワンチャンあるかも
  41. 41. Topic: After Effect 【お題】錯視⽴体 近い物体の⼿前に遠い物体を描画したい →遠い物体が描かれる場所で近い物体を描かなければよい trickflag = 0 trickflag = 1 trickflag = 0 最初に、 ⼿前に表⽰したい物体のみをレイトレースし、 描画される範囲でフラグを⽴てる レンダリングの際、 フラグが⽴っている範囲のレイトレースでは、 近い物体は衝突判定しない(無いものとして扱う)。 trickflag = 1 ① ② ③
  42. 42. Topic: After Effect まとめ フォーカルブラー 錯視⽴体 ブルーム+モーションブラー ⾛査線エフェクト 今回紹介できなかったが、ほかにも多種多様なAfter Effectがある。 After Effect はアイディア勝負
  43. 43. Agenda コード・リーディング
  44. 44. Topic: Code Reading 【お題】神々の⾔葉を読む Shadertoy/GLSLfan は宝の⼭ でも GLSLのコードは、ものすごく読みにくい 1シェーダをしっかり読み解くだけで、割とガチWizard級の知識が得られる。 (※個⼈の感想です)
  45. 45. Topic: Code Reading 【お題】神々の⾔葉を読む - 後付けで関数定義ができない - 1ページで1シェーダが完結 - 命令がプリミティブ - パラメータをハードコーディング - 変数名に略称を⽤いることが多い - こなれた英語コメントが多い - そもそもコメントが少ない - 書き捨てコードが多い - コーダーのクセがすごい GLSLのコードは、ものすごく読みにくい ...LL⾔語脳には⾟い
  46. 46. Topic: Code Reading 【お題】コードを読む①︔流れと位置 〇 後付けで関数定義ができない ⇒ 定義は必ず呼び出し前 - 処理順は下から上になる - 汎⽤的に使う定数・関数は上⽅ - 結果、距離関数は真中付近 の事が多い (※ ただし関数定義をせずに、 インラインで記述してる事も多々) エントリポイント⇒ レンダリング⇒ ライティング⇒ 光線追跡⇒ 距離関数⇒ 汎⽤関数⇒ 構造体定義⇒ 定数定義⇒ 関数の処理順は 下から上
  47. 47. Topic: Code Reading レイマーチングの場合、 処理の⼤まかな構造は変わらない それぞれの処理ブロックを意識する 【お題】コードを読む②︔全体構造把握 エントリポイント⇒ レンダリング⇒ ライティング⇒ 光線追跡⇒ 距離関数⇒ 汎⽤関数⇒ 構造体定義⇒ 定数定義⇒ レンダリング(⾊付け) (ライティング・シェーディング) ↓ 光線追跡 ↓ 距離関数
  48. 48. Topic: Code Reading 【お題】コードを読む③︔クセがすごい エントリポイント⇒ レンダリング⇒ ライティング⇒ 光線追跡⇒ 距離関数⇒ 汎⽤関数⇒ 構造体定義⇒ 定数定義⇒ - 変数名に略称を⽤いることが多い - こなれた英語コメントが多い - そもそもコメントが少ない - 書き捨てコードが多い - コーダーのクセがすごい ⇒ ⼀神教に⼊信する (リーディングする対象を1~数名に絞る) 基本的には、好みのシェーダを書く⼈で良いが、 略称が多くコメントが少ない書き捨てをする⼈は あんまり適切ではない。 (例︔keim_at_si)
  49. 49. Topic: Code Reading 【お題】コードを読む④︔英語 エントリポイント⇒ レンダリング⇒ ライティング⇒ 光線追跡⇒ 距離関数⇒ 汎⽤関数⇒ 構造体定義⇒ 定数定義⇒ - 専⾨⽤語のボキャブラリが増える - 関数の機能がシンプルになる - コメント特有の⾔い回しに慣れる - 割とフランクにアドバイスがもらえる ⾃分のコードのコメントを英語で書く 「コンパイルクラッシュするんだけど」みたいな事書いて投稿したら、 iq⽒からOpenGLのマニアックなバグについて超丁寧なアドバイスをもらった
  50. 50. Topic: Code Reading まとめ Shadertoy/GLSLfan は宝の⼭ 1シェーダをしっかり読み解くだけで、割とガチWizard級の知識が得られる。
  51. 51. レイマーチングで 半歩差のつくシェーダー⼩技テクニック集 GLSL Tech Night 2018 https://twitter.com/mike_at_cg https://twitter.com/keim_at_si https://www.shadertoy.com/user/keim

×