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
120
シェーダだけで世界を創る!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
110
Object Space Raymarching in Unreal Engine 5.2
gam0022
0
130
IFSによるフラクタルのモデリング
gam0022
0
140
Transcendental Cube / グラフィックス解説
gam0022
0
100
redflash renderer / Raytracing Camp 7
gam0022
1
5.4k
Unity×レイマーチングによる映像制作の実践手法 / KLab Tech Meetup 4
gam0022
8
13k
レンダリング系セッション紹介 + Meetupのすすめ / Mercari GDC 2019
gam0022
2
2.8k
Hanamaru Renderer v2 for レイトレ合宿6
gam0022
2
5.3k
もっと綺麗で写実的な絵作りがしたい!レイマーチング向けのシェーディング技術
gam0022
5
20k
Other Decks in Technology
See All in Technology
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.6k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
460
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
160
バッチ処理のSLOをどう設計するか
rynsuke
7
560
Cloud Deploy と仲良くなりたい
phaya72
1
100
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
What the flash - Photography Introduction
edds
64
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Adopting Sorbet at Scale
ufuk
66
8.5k
GraphQLとの向き合い方2022年版
quramy
28
12k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Thoughts on Productivity
jonyablonski
57
3.8k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
In The Pink: A Labor of Love
frogandcode
137
21k
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