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
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.4k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
240
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
220
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
220
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
210
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
140
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
150
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
350
モバイル界のMCPを考える
naoto33
0
210
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Writing Fast Ruby
sferik
628
62k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Thoughts on Productivity
jonyablonski
69
4.7k
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