Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
シェーダだけで世界を創る!three.jsによるレイマーチング
Search
がむ
February 14, 2016
Technology
0
330
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022
がむ
February 14, 2016
Tweet
Share
More Decks by がむ
See All by がむ
距離関数を極める! / SESSIONS 2024
gam0022
0
630
redflash [portal] renderer / Raytracing Camp 10
gam0022
0
66
つぶやきGLSL解読! / Raytracing Camp 10
gam0022
0
500
LTC(Linearly Transformed Cosines)によるエリアライトのUnity URP実装
gam0022
1
120
redflash [4D] renderer / Raytracing Camp 9
gam0022
0
280
Object Space Raymarching in Unreal Engine 5.2
gam0022
0
470
IFSによるフラクタルのモデリング
gam0022
0
520
Transcendental Cube / グラフィックス解説
gam0022
1
190
redflash revolution renderer / Raytracing Camp 8
gam0022
0
24
Other Decks in Technology
See All in Technology
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
140
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
510
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
380
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.5k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
It's Worth the Effort
3n
185
28k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Language of Interfaces
destraynor
158
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Thoughts on Productivity
jonyablonski
69
4.7k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
γΣʔμ͚ͩͰੈքΛΔʂ three.jsʹΑΔϨΠϚʔνϯά 2016/02/14 GPU ͷͰνϣί༹͚ͪΌ͏ʂʁ GLSL γΣʔμςΫχοΫษڧձ @gam0022
ࣗݾհ ࡉాᠳ ڈ·Ͱஜେֶͷ $(ͷݚڀࣨ ,-BC৽ଔ UISFFKTྺ 2 !HBNʢ͕Ήʣ
࠷ۙɺऔΓΜͰ͍Δ͜ͱ ϨΠτϨʔγϯάΛ(-4-ͷϑϥάϝϯτγΣʔμͰ࣮ IUUQHBNOFUXFCHM 3
࠷ۙɺऔΓΜͰ͍Δ͜ͱ ϨΠτϨʔγϯάΛ(-4-ͷϑϥάϝϯτγΣʔμͰ࣮ IUUQHBNOFUXFCHM 4
ࣗݾհ ࡉాᠳ ڈ·Ͱஜେֶͷ $(ͷݚڀࣨ ,-BC৽ଔ UISFFKTྺ 5 !HBNʢ͕Ήʣ ϨΠϚʔνϯάͷ͓͔͛Ͱɺ UISFFKTʹ13͕Ϛʔδ͞Εͨ
IUUQUISFFKTPSHFYBNQMFTXFCHM@SBZNBSDIJOH@SFqFDU
ϨΠϚʔνϯάʁ ϨΠϚʔνϯά cc ϨΠτϨʔγϯάͷ̍छ 6
ϨΠϚʔνϯά͍͢͝ ϨΠϚʔνϯάʹΑͬͯɺίʔυ͔Βੜ͞Εͨө૾ ϝΨσϞͷਆJR !JRVJMF[MFT ࢯͷ࡞ IUUQTXXXTIBEFSUPZDPNWJFX.E93S 7
ϨΠϚʔνϯά͍͢͝ ϨΠϚʔνϯάʹΑͬͯɺίʔυ͔Βੜ͞Εͨө૾ PUBWJPHPPEࢯͷ࡞IUUQTXXXTIBEFSUPZDPNWJFX9MK(%[ ,BMJࢯͷ࡞IUUQTXXXTIBEFSUPZDPNWJFX9UG3O 8
ϨΠϚʔνϯά͍͢͝ 4IBEFSUPZͰSBZNBSDIJOHλάΛݕࡧ IUUQTXXXTIBEFSUPZDPNSFTVMUT RVFSZUBH%SBZNBSDIJOH 9
ϨΠϚʔνϯά͍ ϚΠϯΫϥϑτͷ࡞ऀϨΠϚʔνϯάʹʂ IUUQKBQBOFTFFOHBEHFUDPNOPUDIPDVMVTWSLC 10
ϨΠϚʔνϯά໘ന͍ ͍͢͝ө૾Λίʔυ͚ͩͰಈతੜͰ͖Δʂ ϚΠϯΫϥϑτͷ࡞ऀϨΠϚʔνϯάʹʂ 11 ϨΠϚʔνϯά͘͢͝໘നͦ͏ʂʂ
ͷྲྀΕ ϨΠϚʔνϯάͷͨΊͷجૅࣝ ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ ϨΠϚʔνϯάൃలฤ UISFFKTͷ 12
ͷྲྀΕ ϨΠϚʔνϯάͷͨΊͷجૅࣝ ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ ϨΠϚʔνϯάൃలฤ UISFFKTͷ 13
3Dͷඳըํ๏ %ͷඳըํ๏େ͖͘छྨ ϥελϥΠζ๏ ϨΠτϨʔγϯά๏ 14
ϥελϥΠζ๏ ܗঢ়Λࡾ֯ܗ ϙϦΰϯ ͷ ू߹Ͱදݱ %ͷΛ% ʹӨͯ͠ඳը ॲཧ͕͍ܰ 15
ϥελϥΠζ๏ ܗঢ়Λࡾ֯ܗ ϙϦΰϯ ͷ ू߹Ͱදݱ %ͷΛ% ʹӨͯ͠ඳը ॲཧ͕͍ܰ 16
ϨΠτϨʔγϯά๏ Χϝϥʹಧ͘ޫઢʢϨΠʣΛ શϐΫηϧγϡϛϨʔγϣϯ 17 ʲը૾ग़యʳ http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
ϨΠτϨʔγϯά๏ શϐΫηϧγϛϡϨʔτ Y ສ ճ ॲཧॏ͍ ແݶʹΒ͔ɾ ཧݱͷ࠶ݱ͕Մೳ
18 ʲը૾ग़యʳ https://sites.google.com/site/ rendering1h/
ϨΠτϨʔγϯά๏ શϐΫηϧγϛϡϨʔτ Y ສ ճ ॲཧॏ͍ ແݶʹΒ͔ɾ ཧݱͷ࠶ݱ͕Մೳ
19 ʲը૾ग़యʳ https://sites.google.com/site/ rendering1h/ ৄ͘͠ ϨΠτϨʔγϯάͷઐՈ IPMFࢯʹฉ͍͍ͯͩ͘͞ eduptʢύετϨʔγϯάϕʔεͷ ཧϕʔεϨϯμϥʣͷ࡞ऀ
2छྨͷγΣʔμ 8FC(-ͷγΣʔμछྨ γΣʔμ WFSUFYTIBEFS ϑϥάϝϯτγΣʔμ GSBHNFOUTIBEFS 20
γΣʔμ ͷू߹ΛΧϝϥͷੈքΛج४ʹ࠲ඪม ͝ͱͷॲཧ 21 ࠲ඪม
ϑϥάϝϯτγΣʔμ ϙϦΰϯͷృΓํΛܾΊΔׂ Ͳ͏ӄӨΛ͚ͭΔ͔ʁ ςΫενϟΛషΔ͔ʁ ϐΫηϧ͝ͱͷॲཧ ผ໊ϐΫηϧγΣʔμ 22
ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮ %γʔϯͷதʹຕͷ൘Λஔ ຕͷ൘ͷృΓํΛ ܾΊΔॲཧͱͯ͠ɺ ϨΠτϨʔγϯάΛ ϑϥάϝϯτγΣʔμ Λ͔࣮ͭͬͯ 23
ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮ ϑϥάϝϯτγΣʔμ (16Ͱฒྻॲཧ͞ΕΔ ͱͯߴʹॲཧͰ͖Δ ϦΞϧλΠϜඳը͕Մೳ 24
ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮ (16Ͱฒྻॲཧʁͦ͠͏ʜ ϨΠτϨʔγϯά ฒྻੑ͕ߴ͍ख๏ ฒྻͷ࣮؆୯ 25
ͷྲྀΕ ϨΠϚʔνϯάͷͨΊͷجૅࣝ ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ ϨΠϚʔνϯάൃలฤ UISFFKTͷ 26
͔͜͜Β ϨΠϚʔνϯάͷ
ϨΠϚʔνϯά ϨΠϚʔνϯά㱨ϨΠτϨʔγϯά ϨΠϚʔνϯάͷେ͖ͳಛɺিಥఆ ϨΠτϨʔγϯά w ܗঢ়ʢٿମɾฏ໘ɾϙϦΰϯͳͲʣʹΑͬͯɺ িಥఆͷΞϧΰϦζϜΛ͍͚ ϨΠϚʔνϯά
w ڑؔͰγʔϯΛఆٛ͠ɺ ϨΠΛগͣͭ͠ਐΊͳ͕Βিಥఆ 28
ڑؔͱ ڑؔ ೖྗɿ%ͷ࠲ඪQ WFD ग़ྗɿQ͔Βγʔϯͷମͷ ࠷ڑ qPBU 29
ڑؔͱ ڑؔ࠷ڑ Πϝʔδͣ͠Β͍ͷͰɺ ࣮ྫΛڍ͍͖͛ͯ·͢ 30
ڑؔͱ ڑؔ Q͔Βɺγʔϯதͷମͷ࠷ڑΛฦؔ͢ 31 ڑؔ Q ࠷ڑͷ͞
ڑؔͱ ڑؔ Q͔Βɺγʔϯதͷମͷ࠷ڑΛฦؔ͢ 32
ڑؔͱ ڑؔ Q͔Βɺγʔϯதͷମͷ࠷ڑΛฦؔ͢ 33
ϨΠϚʔνϯάͷΞϧΰϦζϜ ڑ͔͚ؔͬͨͲɺͲ͏ͬͯিಥఆ͢Δͷʁ ࣍ͷγʔϯΛ࣮ͬͯྫͰઆ໌ʂ 34
ϨΠϚʔνϯά ϨΠΛগͣͭ͠ਐΊΔ cc ϨΠϚʔνϯά 35
ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷઌΧϝϥͷҐஔ͔Βελʔτ ͕ϨΠͷઌ 36
ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷ͖ৗʹਅ͙ͬ 37
ϨΠϚʔνϯάͷΞϧΰϦζϜ ͍ઢڑؔͷϨΠͷઌ͔Βͷ࠷ڑ Ұ൪͍ۙҐஔʹ͋Δͷԫ৭͍ٿମ 38
ϨΠϚʔνϯάͷΞϧΰϦζϜ ڑؔͷ͚ͩɺϨΠͷઌΛਐΊΔ 39
ϨΠϚʔνϯάͷΞϧΰϦζϜ िͷઌ͔Βɺ͞Βʹ࠷ڑΛٻΊΔ िͰԫ৭͍ٿମ͕࠷ 40
ϨΠϚʔνϯάͷΞϧΰϦζϜ ࠷ڑ͚ͩϨΠΛਐΊͯɺिͷϨΠͷઌ͕ٻ·Δ 41
ϨΠϚʔνϯάͷΞϧΰϦζϜ िͰԫ৭͍ٿମ͕࠷ 42
ϨΠϚʔνϯάͷΞϧΰϦζϜ िͷϨΠͷઌ͕ٻ·Δ 43
ϨΠϚʔνϯάͷΞϧΰϦζϜ िͰɺ͍ͭʹͷശ͕࠷ʂʂ 44
ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷઌ͕ແࣄʹͷശͷҐஔͱͳͬͨʂʂ 45
ϨΠϚʔνϯάͷΞϧΰϦζϜ িಥ͢Δ·Ͱʢ࠷ڑ͕ʣʹͳΔ·Ͱɺ ͻͨ͢ΒϨΠΛਐΊΔ͚ͩ ࠷ڑ͚ͩਐΊΔͷͰɺ ਐΈ͗ͯ͢௨Γൈ͚Δ͜ͱͳ͍ ୯७ʂʂγϯϓϧʂʂ 46
ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠϚʔνϯάͷ ΞϧΰϦζϜͷ܁Γฦ͠ॲཧ cc Ϛʔνϯάϧʔϓ 47
ϨΠϚʔνϯάͷΞϧΰϦζϜ Ϛʔνϯάϧʔϓͷ࣮ྫ 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; }
ϨΠϚʔνϯάͷΞχϝʔγϣϯ IUUQTUXJUUFSDPN NPUJPOT@XPSLTUBUVT 49
εϑΟΞʔτϨʔγϯά ࠓ·Ͱઆ໌ͨ͠ͷϨΠϚʔνϯάͷ̍छͷ εϑΟΞʔτϨʔγϯά িಥఆͷաఔͰٿʢεϑΟΞʔʣ͕ͨ͘͞Μग़ͯ͘Δ 50
3Dඳըख๏ͷཧ ϥελϥΠβ ϨΠτϨʔγϯά ϨΠϚʔνϯά w εϑΟΞτϨʔγϯά 51
ڑؔͷ࣮
ٿମͷڑؔ ݪ͕த৺ͷܘSͷٿମͷڑؔ ݪ͔ΒͷڑܘS γϯϓϧ 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 ́
ശͷڑؔ ݪʹ͋Δେ͖͞Cͷശͷڑؔ ͜Εγϯϓϧ ಈ࡞ݪཧ͍͜͠ͷͰׂѪʼʻ 54 float boxDist(vec3 p, vec3 b){
return length(max(abs(p) - b, 0.0)); }
༷ʑͳڑؔ IUUQJRVJMF[MFTPSHXXXBSUJDMFTEJTUGVODUJPOT EJTUGVODUJPOTIUN ࠷ॳͷϝΨσϞͷ࡞ऀJRࢯͷϖʔδʹ·ͱΊΒ͍ͯΔ 55
γΣʔσΟϯά িಥʮͨ͠ɾ͠ͳ͍ʯͷใ͔ΒγϧΤοτ͔͠ग़ͤͳ͍ 56
γΣʔσΟϯά ޫݯͷ͖ͱ๏ઢ͕͔ΕɺγΣʔσΟϯάʢӄӨޮՌʣͰ͖Δ qPBUEJ⒎VTFDMBNQ EPU MJHIU OPSNBM 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 ) ) - 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 ) ) )); } ޯͷܭࢉ YZ[ͦΕͧΕগͣ͠Βͯ͠ɺ ڑؔͷࠩΛܭࢉ
๏ઢΛٻΊΔ ֶͰɺG Y Z [ ͰදͤΔۂ໘ ͷ๏ઢϕΫτϧO O G`Y G`Z
G`[ ͱGͷภඍʢޯʣ ͱͳΔͱΒΕ͍ͯΔ ڑؔG Y Z [ ͰදͤΔۂ໘ʹ͍͠ ๏ઢOڑؔͷޯͱͯ͠ܭࢉՄೳ 64
๏ઢΛٻΊΔ ʮֶߍͰඍ͖ͱशͬͨΜ͚ͩͲʂʁʯ ZYͷΑ͏ͳࣜͩͱɺYͷඍ͖ G Y Z YZʹมܗ͢Εɺ ࣍ݩͰඍ๏ઢ 65
ڑؔສೳ
ڑؔͷൃలฤ ϨΠϚʔνϯάͰɺڑؔͰγʔϯΛఆٛ ڑؔΛ੍ͨ͠ऀ͕ ϨΠϚʔνϯάΛ੍͢ 67
ͷྲྀΕ ϨΠϚʔνϯάͷͨΊͷجૅࣝ ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ ϨΠϚʔνϯάൃలฤ UISFFKTͷ 68
ڑؔͷ߹ ശͱٿମΛू߹ͰΈ߹Θͤͨڑؔ NJOͰ֤ڑؔΛ߹ 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) ); }
ڑؔͷ߹ ڑؔΛNJONBYͰ߹͢Δ͚ͩͰɺ$4(දݱ͕Մೳ 70
ڑؔͷແݶͷ܁Γฦ͠ NPEԋࢉͰQΛϧʔϓͤ͞Δ͜ͱͰɺ ແݶʹ܁Γฦ͠දࣔͰ͖Δ 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); }
ڑؔͷ࣮ફฤ ࠷ॳͷమࠎͷྫ $4(දݱ ʴ ແݶͷ܁Γฦ͠ Ͱ࣮ݱՄೳʂ 72
ڑؔͷ࣮ફฤ ෯XJEUIͷ࢛֯பͷڑؔ 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; }
ڑؔͷ࣮ફฤ Z࣠ͷ࢛֯பΛू߹ 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 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 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)); } QPO3FQ Q JOUFSWBM
ڑؔͷ࣮ફฤ ಉ༷ʹԁபΛແݶʹ܁Γฦ͠ 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 - =
ڑؔͷ࣮ફฤ Χϝϥͷ͖Λม͑Δͱʜ 79
ڑؔͷ࣮ફฤ TDFOF%JTUશମ 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
ڑؔ·ͱΊ ڑؔମ·Ͱͷ࠷ڑ ҎԼΛ؆୯ʹ࣮ݱͰ͖Δ $4(දݱʢਤܗͷ߹ʣ ແݶͷ܁Γฦ͠ গͳ͍ίʔυͰෳࡶͳܗঢ়ΛͰ͖Δ 82
ͷྲྀΕ ϨΠϚʔνϯάͷͨΊͷجૅࣝ ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ ϨΠϚʔνϯάൃలฤ UISFFKTͷ 83
three.js ͱ 8FC(-ͷϥούʔϥΠϒϥϦ IUUQUISFFKTPSH 84
three.js Λ͏ཧ༝ 8FC(-ͷॳظԽॲཧΛ ͨͬͨߦͷίʔυͰॻ͚Δ ΧϝϥͷίϯτϩʔϧͷͨΊͷ ϥΠϒϥϦΛ࠷ॳ͔Βఏڙ 85 େྔͷίʔυΛॻ͖ͨ͘ͳ͍
three.jsͷ༻ޠ ը૾ग़యIUUQTIUNMFYQFSUTKQZPNPUTV 86
ϑϥάϝϯτγΣʔμ࣮ γʔϯͷதʹຕͷ൘Λஔ ຕͷ൘ͷృΓํΛ ܾΊΔॲཧͱͯ͠ɺ ϨΠϚʔνϯάΛ ϑϥάϝϯτγΣʔμ Λ͔࣮ͭͬͯ 87
three.js ͔ΒγΣʔμΛ͏ ຕͷ൘ͷδΦϝτϦΛ࡞Γɺ γΣʔμͱϑϥάϝϯτγΣʔμΛ ઃఆͨ͠ϚςϦΞϧΛద༻͢Δίʔυ 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);
three.js ͔ΒγΣʔμΛ͏ .BUFSJBMͷॳظԽͷ࣌ʹɺγΣʔμͷίʔυΛ͚ͩ͢ 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);
three.js vs ੜWebGL εΫϩʔϧόʔʹ˝ 90 three.js 49ߦ ੜWebGL 215ߦ
ৗʹthree.js͕࠷ద͔ʁ ੜ8FC(-Λॻ͘͜ͱͰ ษڧʹͳΔ ߴͳ͜ͱΛ͍ͨ͠ͳΒɺ ੜ8FC(-Λ͏͔͠ແ͍ 91
ৗʹthree.js͕࠷ద͔ʁ UISFFKT ੜ8FC(- ྑ͘͠Α͏ʂ 92
·ͱΊ ϨΠτϨʔγϯάϑϥάϝϯτγΣʔμͰ ߴʹ(16࣮Ͱ͖Δ ϨΠϚʔνϯάͰڑؔͰিಥఆΛ͢Δ ͍ίʔυͰෳࡶͳܗঢ়ΛදݱͰ͖Δ $4(܁Γฦ͕͠؆୯ʹͰ͖Δ UISFFKTͰ8FC(-Λগͳ͍ίʔυͰѻ͑Δ 93
ࢀߟࢿྉ զΒ͕!I@EPYBTઌੜͷࢿྉ IUUQTXHMEPSHEHMTM ϝΨσϞͷਆJR !JRVJMF[MFT ࢯͷϖʔδ IUUQJRVJMF[MFTPSHXXXJOEFYIUN ͷ8FCϑϩϯτΤϯυຊ
ࢲͷஶॻ IUUQTUFDICPPTUFSHJUIVCJPDTDSJQUPPO 94
ࢀߟࢿྉ ͜Ε͕(16ͷྗʂ5ISFFKTʹΑΔ lϦΞϧλΠϜzͳϨΠτϨʔγϯά IUUQRJJUBDPNHBNJUFNT BFBCGEG ͜Ε͕(16ͷྗʂUISFFKTʹΑΔ lϦΞϧλΠϜzͳϨΠτϨʔγϯά ʙๅੴฤʙ
IUUQRJJUBDPNHBNJUFNT EFGFD 95
ࢿྉʹ͍ͭͯ ࢿྉޙ4MJEF4IBSFͰެ։༧ఆ IUUQXXXTMJEFTIBSFOFUTIPIPTPEB 96
END IUUQHBNOFUXFCHM 97