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
180
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022
がむ
February 14, 2016
Tweet
Share
More Decks by がむ
See All by がむ
redflash [4D] renderer / Raytracing Camp 9
gam0022
0
160
Object Space Raymarching in Unreal Engine 5.2
gam0022
0
200
IFSによるフラクタルのモデリング
gam0022
0
230
Transcendental Cube / グラフィックス解説
gam0022
0
120
redflash renderer / Raytracing Camp 7
gam0022
1
5.8k
Unity×レイマーチングによる映像制作の実践手法 / KLab Tech Meetup 4
gam0022
8
13k
レンダリング系セッション紹介 + Meetupのすすめ / Mercari GDC 2019
gam0022
2
2.8k
Hanamaru Renderer v2 for レイトレ合宿6
gam0022
2
5.6k
もっと綺麗で写実的な絵作りがしたい!レイマーチング向けのシェーディング技術
gam0022
5
20k
Other Decks in Technology
See All in Technology
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
780
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Featured
See All Featured
Speed Design
sergeychernyshev
9
270
How to name files
jennybc
67
96k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Docker and Python
trallard
37
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Producing Creativity
orderedlist
PRO
340
39k
The Invisible Customer
myddelton
117
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Design by the Numbers
sachag
277
18k
Adopting Sorbet at Scale
ufuk
71
8.8k
The Language of Interfaces
destraynor
151
23k
Atom: Resistance is Futile
akmur
261
25k
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