シェーダだけで世界を創る！three.jsによるレイマーチング

γΣʔμ͚ͩͰੈքΛ૑Δʂ 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

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

͔͜͜Β ϨΠϚʔνϯάͷ࿩

ϨΠϚʔνϯά ϨΠϚʔνϯά㱨ϨΠτϨʔγϯά ϨΠϚʔνϯάͷେ͖ͳಛ௃͸ɺিಥ൑ఆ ϨΠτϨʔγϯά 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

ڑ཭ؔ਺ͷ߹੒ ശͱٿମΛ࿨ू߹Ͱ૊Έ߹Θͤͨڑ཭ؔ਺ 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) ); }

ڑ཭ؔ਺ͷ߹੒ ڑ཭ؔ਺ΛNJO΍NBYͰ߹੒͢Δ͚ͩͰɺ$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)); } Q‎PO3FQ 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

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

シェーダだけで世界を創る！three.jsによるレイマーチング

シェーダだけで世界を創る！three.jsによるレイマーチング

Transcript

More Decks by がむ

Other Decks in Technology

Featured