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
200
シェーダだけで世界を創る!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
180
Object Space Raymarching in Unreal Engine 5.2
gam0022
0
230
IFSによるフラクタルのモデリング
gam0022
0
270
Transcendental Cube / グラフィックス解説
gam0022
0
130
redflash renderer / Raytracing Camp 7
gam0022
1
5.9k
Unity×レイマーチングによる映像制作の実践手法 / KLab Tech Meetup 4
gam0022
8
13k
レンダリング系セッション紹介 + Meetupのすすめ / Mercari GDC 2019
gam0022
2
2.8k
Hanamaru Renderer v2 for レイトレ合宿6
gam0022
2
5.7k
もっと綺麗で写実的な絵作りがしたい!レイマーチング向けのシェーディング技術
gam0022
5
21k
Other Decks in Technology
See All in Technology
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
フルカイテン株式会社 採用資料
fullkaiten
0
32k
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
290
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
950
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
グイグイ系QAマネージャーの仕事
sadonosake
0
340
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
株式会社EventHub・エンジニア採用資料
eventhub
0
3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Code Review Best Practice
trishagee
62
16k
For a Future-Friendly Web
brad_frost
174
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
What's new in Ruby 2.0
geeforr
340
31k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Automating Front-end Workflow
addyosmani
1365
200k
Debugging Ruby Performance
tmm1
72
12k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
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