Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

452023224091040c47c3bcaa40935c53?s=47 がむ
February 14, 2016

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

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

GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022

452023224091040c47c3bcaa40935c53?s=128

がむ

February 14, 2016
Tweet

More Decks by がむ

Other Decks in Technology

Transcript

  1. γΣʔμ͚ͩͰੈքΛ૑Δʂ three.jsʹΑΔϨΠϚʔνϯά 2016/02/14 GPU ͷ೤Ͱνϣί΋༹͚ͪΌ͏ʂʁ GLSL γΣʔμςΫχοΫษڧձ @gam0022

  2. ࣗݾ঺հ ࡉాᠳ ڈ೥·Ͱஜ೾େֶͷ $(ͷݚڀࣨ ,-BC৽ଔ೥໨ UISFFKTྺ೥໨ 2 !HBNʢ͕Ήʣ

  3. ࠷ۙɺऔΓ૊ΜͰ͍Δ͜ͱ ϨΠτϨʔγϯάΛ(-4-ͷϑϥάϝϯτγΣʔμͰ࣮૷ IUUQHBNOFUXFCHM 3

  4. ࠷ۙɺऔΓ૊ΜͰ͍Δ͜ͱ ϨΠτϨʔγϯάΛ(-4-ͷϑϥάϝϯτγΣʔμͰ࣮૷ IUUQHBNOFUXFCHM 4

  5. ࣗݾ঺հ ࡉాᠳ ڈ೥·Ͱஜ೾େֶͷ $(ͷݚڀࣨ ,-BC৽ଔ೥໨ UISFFKTྺ೥໨ 5 !HBNʢ͕Ήʣ ϨΠϚʔνϯάͷ͓͔͛Ͱɺ
 UISFFKTʹ13͕Ϛʔδ͞Εͨ


    IUUQUISFFKTPSHFYBNQMFTXFCHM@SBZNBSDIJOH@SFqFDU
  6. ϨΠϚʔνϯάʁ ϨΠϚʔνϯά cc ϨΠτϨʔγϯάͷ̍छ 6

  7. ϨΠϚʔνϯά͸௒͍͢͝ ϨΠϚʔνϯάʹΑͬͯɺίʔυ͔Βੜ੒͞Εͨө૾ ϝΨσϞͷਆJR !JRVJMF[MFT ࢯͷ࡞඼ IUUQTXXXTIBEFSUPZDPNWJFX.E93S 7

  8. ϨΠϚʔνϯά͸௒͍͢͝ ϨΠϚʔνϯάʹΑͬͯɺίʔυ͔Βੜ੒͞Εͨө૾ PUBWJPHPPEࢯͷ࡞඼IUUQTXXXTIBEFSUPZDPNWJFX9MK(%[  ,BMJࢯͷ࡞඼IUUQTXXXTIBEFSUPZDPNWJFX9UG3O 8

  9. ϨΠϚʔνϯά͸௒͍͢͝ 4IBEFSUPZͰSBZNBSDIJOHλάΛݕࡧ
 IUUQTXXXTIBEFSUPZDPNSFTVMUT RVFSZUBH%SBZNBSDIJOH 9

  10. ϨΠϚʔνϯά͸΍͹͍ ϚΠϯΫϥϑτͷ࡞ऀ΋ϨΠϚʔνϯάʹ஫໨ʂ IUUQKBQBOFTFFOHBEHFUDPNOPUDIPDVMVTWSLC 10

  11. ϨΠϚʔνϯά͸໘ന͍ ௒͍͢͝ө૾Λίʔυ͚ͩͰಈతੜ੒Ͱ͖Δʂ ϚΠϯΫϥϑτͷ࡞ऀ΋ϨΠϚʔνϯάʹ஫໨ʂ 11 ϨΠϚʔνϯά͘͢͝໘നͦ͏ʂʂ

  12. ࿩ͷྲྀΕ  ϨΠϚʔνϯάͷͨΊͷجૅ஌ࣝ  ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ  ϨΠϚʔνϯάൃలฤ  UISFFKTͷ࿩ 12

  13. ࿩ͷྲྀΕ  ϨΠϚʔνϯάͷͨΊͷجૅ஌ࣝ  ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ  ϨΠϚʔνϯάൃలฤ  UISFFKTͷ࿩ 13

  14. 3Dͷඳըํ๏ %ͷඳըํ๏͸େ͖͘छྨ  ϥελϥΠζ๏  ϨΠτϨʔγϯά๏ 14

  15. ϥελϥΠζ๏ ܗঢ়Λࡾ֯ܗ
 ϙϦΰϯ ͷ
 ू߹Ͱදݱ %ͷ௖఺Λ%
 ʹ౤Өͯ͠ඳը ॲཧ͕͍ܰ 15

  16. ϥελϥΠζ๏ ܗঢ়Λࡾ֯ܗ
 ϙϦΰϯ ͷ
 ू߹Ͱදݱ %ͷ௖఺Λ%
 ʹ౤Өͯ͠ඳը ॲཧ͕͍ܰ 16

  17. ϨΠτϨʔγϯά๏ Χϝϥʹಧ͘ޫઢʢϨΠʣΛ
 શϐΫηϧ਺γϡϛϨʔγϣϯ 17 ʲը૾ग़యʳ http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154

  18. ϨΠτϨʔγϯά๏ શϐΫηϧ਺γϛϡϨʔτ  Y  ສ ճ ॲཧ͸ॏ͍ ແݶʹ׈Β͔ɾ
 ෺ཧݱ৅ͷ࠶ݱ͕Մೳ

    18 ʲը૾ग़యʳ https://sites.google.com/site/ rendering1h/
  19. ϨΠτϨʔγϯά๏ શϐΫηϧ਺γϛϡϨʔτ  Y  ສ ճ ॲཧ͸ॏ͍ ແݶʹ׈Β͔ɾ
 ෺ཧݱ৅ͷ࠶ݱ͕Մೳ

    19 ʲը૾ग़యʳ https://sites.google.com/site/ rendering1h/ ৄ͘͠͸ ϨΠτϨʔγϯάͷઐ໳Ո IPMFࢯʹฉ͍͍ͯͩ͘͞ eduptʢύετϨʔγϯάϕʔεͷ
 ෺ཧϕʔεϨϯμϥʣͷ࡞ऀ
  20. 2छྨͷγΣʔμ 8FC(-ͷγΣʔμ͸छྨ ௖఺γΣʔμ
 WFSUFYTIBEFS  ϑϥάϝϯτγΣʔμ
 GSBHNFOUTIBEFS  20

  21. ௖఺γΣʔμ ௖఺ͷू߹ΛΧϝϥͷੈքΛج४ʹ࠲ඪม׵ ௖఺͝ͱͷॲཧ 21 ࠲ඪม׵

  22. ϑϥάϝϯτγΣʔμ ϙϦΰϯͷృΓํΛܾΊΔ໾ׂ  Ͳ͏ӄӨΛ͚ͭΔ͔ʁ  ςΫενϟΛషΔ͔ʁ ϐΫηϧ͝ͱͷॲཧ ผ໊ϐΫηϧγΣʔμ 22

  23. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷ %γʔϯͷதʹຕͷ൘Λ഑ஔ ຕͷ൘ͷృΓํΛ
 ܾΊΔॲཧͱͯ͠ɺ
 ϨΠτϨʔγϯάΛ
 ϑϥάϝϯτγΣʔμ
 Λ͔࣮ͭͬͯ૷ 23

  24. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷ ϑϥάϝϯτγΣʔμ͸
 (16Ͱฒྻॲཧ͞ΕΔ ͱͯ΋ߴ଎ʹॲཧͰ͖Δ ϦΞϧλΠϜඳը͕Մೳ 24

  25. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷ (16Ͱฒྻॲཧʁ೉ͦ͠͏ʜ ϨΠτϨʔγϯά͸
 ฒྻੑ͕ߴ͍ख๏ ฒྻͷ࣮૷͸؆୯ 25

  26. ࿩ͷྲྀΕ  ϨΠϚʔνϯάͷͨΊͷجૅ஌ࣝ  ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ  ϨΠϚʔνϯάൃలฤ  UISFFKTͷ࿩ 26

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

  28. ϨΠϚʔνϯά ϨΠϚʔνϯά㱨ϨΠτϨʔγϯά ϨΠϚʔνϯάͷେ͖ͳಛ௃͸ɺিಥ൑ఆ  ϨΠτϨʔγϯά w ܗঢ়ʢٿମɾฏ໘ɾϙϦΰϯͳͲʣʹΑͬͯɺ
 িಥ൑ఆͷΞϧΰϦζϜΛ࢖͍෼͚  ϨΠϚʔνϯά

    w ڑ཭ؔ਺ͰγʔϯΛఆٛ͠ɺ
 ϨΠΛগͣͭ͠ਐΊͳ͕Βিಥ൑ఆ 28
  29. ڑ཭ؔ਺ͱ͸ ڑ཭ؔ਺ ೖྗɿ%ͷ࠲ඪQ WFD  ग़ྗɿ఺Q͔Βγʔϯͷ෺ମ΁ͷ
 ࠷୹ڑ཭ qPBU 29

  30. ڑ཭ؔ਺ͱ͸ ڑ཭ؔ਺࠷୹ڑ཭ Πϝʔδͣ͠Β͍ͷͰɺ
 ࣮ྫΛڍ͍͖͛ͯ·͢ 30

  31. ڑ཭ؔ਺ͱ͸ ڑ཭ؔ਺
 ఺Q͔Βɺγʔϯதͷ෺ମ΁ͷ࠷୹ڑ཭Λฦؔ͢਺ 31 ڑ཭ؔ਺ Q ࠷୹ڑ཭ͷ௕͞

  32. ڑ཭ؔ਺ͱ͸ ڑ཭ؔ਺
 ఺Q͔Βɺγʔϯதͷ෺ମ΁ͷ࠷୹ڑ཭Λฦؔ͢਺ 32

  33. ڑ཭ؔ਺ͱ͸ ڑ཭ؔ਺
 ఺Q͔Βɺγʔϯதͷ෺ମ΁ͷ࠷୹ڑ཭Λฦؔ͢਺ 33

  34. ϨΠϚʔνϯάͷΞϧΰϦζϜ ڑ཭ؔ਺͸෼͔͚ͬͨͲɺͲ͏΍ͬͯিಥ൑ఆ͢Δͷʁ ࣍ͷγʔϯΛ࢖࣮ͬͯྫͰઆ໌ʂ 34

  35. ϨΠϚʔνϯά ϨΠΛগͣͭ͠ਐΊΔ
 cc ϨΠϚʔνϯά 35

  36. ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷઌ୺͸ΧϝϥͷҐஔ͔Βελʔτ ͕ϨΠͷઌ୺ 36

  37. ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷ޲͖͸ৗʹਅͬ௚͙ 37

  38. ϨΠϚʔνϯάͷΞϧΰϦζϜ ੺͍ઢڑ཭ؔ਺ͷ஋ϨΠͷઌ୺͔Βͷ࠷୹ڑ཭ Ұ൪͍ۙҐஔʹ͋Δͷ͸ԫ৭͍ٿମ 38

  39. ϨΠϚʔνϯάͷΞϧΰϦζϜ ڑ཭ؔ਺ͷ஋͚ͩɺϨΠͷઌ୺ΛਐΊΔ 39

  40. ϨΠϚʔνϯάͷΞϧΰϦζϜ ि໨ͷઌ୺͔Βɺ͞Βʹ࠷୹ڑ཭ΛٻΊΔ ि໨Ͱ΋ԫ৭͍ٿମ͕࠷୹ 40

  41. ϨΠϚʔνϯάͷΞϧΰϦζϜ ࠷୹ڑ཭͚ͩϨΠΛਐΊͯɺि໨ͷϨΠͷઌ୺͕ٻ·Δ 41

  42. ϨΠϚʔνϯάͷΞϧΰϦζϜ ि໨Ͱ΋ԫ৭͍ٿମ͕࠷୹ 42

  43. ϨΠϚʔνϯάͷΞϧΰϦζϜ ि໨ͷϨΠͷઌ୺͕ٻ·Δ 43

  44. ϨΠϚʔνϯάͷΞϧΰϦζϜ ि໨Ͱɺ͍ͭʹ྘ͷശ͕࠷୹ʂʂ 44

  45. ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠͷઌ୺͕ແࣄʹ྘ͷശͷҐஔͱͳͬͨʂʂ 45

  46. ϨΠϚʔνϯάͷΞϧΰϦζϜ িಥ͢Δ·Ͱʢ࠷୹ڑ཭͕ʣʹͳΔ·Ͱɺ
 ͻͨ͢ΒϨΠΛਐΊΔ͚ͩ ࠷୹ڑ཭͚ͩਐΊΔͷͰɺ
 ਐΈ͗ͯ͢௨Γൈ͚Δ͜ͱ͸ͳ͍ ୯७ʂʂγϯϓϧʂʂ 46

  47. ϨΠϚʔνϯάͷΞϧΰϦζϜ ϨΠϚʔνϯάͷ
 ΞϧΰϦζϜͷ܁Γฦ͠ॲཧ cc Ϛʔνϯάϧʔϓ 47

  48. ϨΠϚʔνϯάͷΞϧΰϦζϜ Ϛʔνϯάϧʔϓͷ࣮૷ྫ 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; }
  49. ϨΠϚʔνϯάͷΞχϝʔγϣϯ IUUQTUXJUUFSDPN NPUJPOT@XPSLTUBUVT  49

  50. εϑΟΞʔτϨʔγϯά ࠓ·Ͱઆ໌ͨ͠ͷ͸ϨΠϚʔνϯάͷ̍छͷ
 εϑΟΞʔτϨʔγϯά িಥ൑ఆͷաఔͰٿʢεϑΟΞʔʣ͕ͨ͘͞Μग़ͯ͘Δ 50

  51. 3Dඳըख๏ͷ੔ཧ ϥελϥΠβ ϨΠτϨʔγϯά  ϨΠϚʔνϯά w εϑΟΞτϨʔγϯά 51

  52. ڑ཭ؔ਺ͷ࣮૷

  53. ٿମͷڑ཭ؔ਺ ݪ఺͕த৺ͷ൒ܘ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 ́
  54. ശͷڑ཭ؔ਺ ݪ఺ʹ͋Δେ͖͞Cͷശͷڑ཭ؔ਺ ͜Ε΋௒γϯϓϧ ಈ࡞ݪཧ͸΍΍͍͜͠ͷͰׂѪʼʻ 54 float boxDist(vec3 p, vec3 b){

    return length(max(abs(p) - b, 0.0)); }
  55. ༷ʑͳڑ཭ؔ਺ IUUQJRVJMF[MFTPSHXXXBSUJDMFTEJTUGVODUJPOT EJTUGVODUJPOTIUN ࠷ॳͷϝΨσϞͷ࡞ऀJRࢯͷϖʔδʹ·ͱΊΒ͍ͯΔ 55

  56. γΣʔσΟϯά িಥʮͨ͠ɾ͠ͳ͍ʯͷ৘ใ͔Β͸γϧΤοτ͔͠ग़ͤͳ͍ 56

  57. γΣʔσΟϯά ޫݯͷ޲͖ͱ๏ઢ͕෼͔Ε͹ɺγΣʔσΟϯάʢӄӨޮՌʣͰ͖Δ
 qPBUEJ⒎VTFDMBNQ EPU MJHIU OPSNBM    57

  58. ๏ઢΛٻΊΔ ϨΠτϨʔγϯάͰ͸ɺ
 ܗঢ়ʹԠͨ͡๏ઢͷܭࢉ͕ඞཁ  ٿମͷ๏ઢɿަ఺͔Βٿମͷத৺ΛҾ͘  ϙϦΰϯͷ๏ઢɿΤοδͷ֎ੵΛܭࢉ 58

  59. ๏ઢΛٻΊΔ ϨΠτϨʔγϯάͰ͸ɺ
 ܗঢ়ʹԠͨ͡๏ઢͷܭࢉ͕ඞཁ  ٿମͷ๏ઢɿަ఺͔Βٿମͷத৺ΛҾ͘  ϙϦΰϯͷ๏ઢɿΤοδͷ֎ੵΛܭࢉ 59

  60. ๏ઢΛٻΊΔ ϨΠϚʔνϯάͰ͸ɺ
 ͲΜͳܗঢ়Ͱ΋ಉ͡ܭࢉͰ๏ઢ͕ٻ·Δ  ٿମͷ๏ઢɿڑ཭ؔ਺ͷޯ഑  ശͷ๏ઢɿڑ཭ؔ਺ͷޯ഑ 60

  61. ๏ઢΛٻΊΔ ϨΠϚʔνϯάͰ͸ɺ
 ͲΜͳܗঢ়Ͱ΋ಉ͡ܭࢉͰ๏ઢ͕ٻ·Δ  ٿମͷ๏ઢɿڑ཭ؔ਺ͷޯ഑  ശͷ๏ઢɿڑ཭ؔ਺ͷޯ഑ 61

  62. ๏ઢΛٻΊΔ ͳΔ΄Ͳʂ ޯ഑ʂ
 ͬͯԿ͚ͩͬʁ 62

  63. ๏ઢΛٻΊΔ 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[ͦΕͧΕগͣ͠Βͯ͠ɺ
 ڑ཭ؔ਺ͷࠩ෼Λܭࢉ
  64. ๏ઢΛٻΊΔ ਺ֶͰ͸ɺG Y Z [ ͰදͤΔۂ໘
 ͷ๏ઢϕΫτϧO͸
 O G`Y G`Z

    G`[ ͱGͷภඍ෼ʢޯ഑ʣ
 ͱͳΔͱ஌ΒΕ͍ͯΔ ڑ཭ؔ਺͸G Y Z [ ͰදͤΔۂ໘ʹ౳͍͠ ๏ઢOڑ཭ؔ਺ͷޯ഑ͱͯ͠ܭࢉՄೳ 64
  65. ๏ઢΛٻΊΔ ʮֶߍͰඍ෼͸܏͖ͱशͬͨΜ͚ͩͲʂʁʯ ZYͷΑ͏ͳࣜͩͱɺYͷඍ෼͸܏͖ G Y Z YZʹมܗ͢Ε͹ɺ
 ࣍ݩͰ΋ඍ෼͸๏ઢ 65

  66. ڑ཭ؔ਺͸ສೳ

  67. ڑ཭ؔ਺ͷൃలฤ ϨΠϚʔνϯάͰ͸ɺڑ཭ؔ਺ͰγʔϯΛఆٛ ڑ཭ؔ਺Λ੍ͨ͠ऀ͕
 ϨΠϚʔνϯάΛ੍͢ 67

  68. ࿩ͷྲྀΕ  ϨΠϚʔνϯάͷͨΊͷجૅ஌ࣝ  ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ  ϨΠϚʔνϯάൃలฤ  UISFFKTͷ࿩ 68

  69. ڑ཭ؔ਺ͷ߹੒ ശͱٿମΛ࿨ू߹Ͱ૊Έ߹Θͤͨڑ཭ؔ਺ 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) ); }
  70. ڑ཭ؔ਺ͷ߹੒ ڑ཭ؔ਺ΛNJO΍NBYͰ߹੒͢Δ͚ͩͰɺ$4(දݱ͕Մೳ 70

  71. ڑ཭ؔ਺ͷແݶͷ܁Γฦ͠ 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); }
  72. ڑ཭ؔ਺ͷ࣮ફฤ ࠷ॳͷమࠎͷྫ $4(දݱ
 ʴ
 ແݶͷ܁Γฦ͠
 
 Ͱ࣮ݱՄೳʂ 72

  73. ڑ཭ؔ਺ͷ࣮ફฤ ෯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; }
  74. ڑ཭ؔ਺ͷ࣮ફฤ 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. ڑ཭ؔ਺ͷ࣮ફฤ [࣠ͷ࢛֯பΛ࿨ू߹ 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. ڑ཭ؔ਺ͷ࣮ફฤ ແݶͷ܁Γฦ͠ 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. ڑ཭ؔ਺ͷ࣮ફฤ ಉ༷ʹԁபΛແݶʹ܁Γฦ͠ 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. ڑ཭ؔ਺ͷ࣮ફฤ ֯ப͔ΒԁபΛࠩू߹ͰႡΓ؏͘ͱʜ 78 - =

  79. ڑ཭ؔ਺ͷ࣮ફฤ Χϝϥͷ޲͖Λม͑Δͱʜ 79

  80. ڑ཭ؔ਺ͷ࣮ફฤ 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. ڑ཭ؔ਺ͷ࣮ફฤ ੺͍৭Λ͚ͭͯɺԕ͘Λ໌Δ͘͢Δͱʜ 81

  82. ڑ཭ؔ਺·ͱΊ ڑ཭ؔ਺෺ମ·Ͱͷ࠷୹ڑ཭ ҎԼΛ؆୯ʹ࣮ݱͰ͖Δ  $4(දݱʢਤܗͷ߹੒ʣ  ແݶͷ܁Γฦ͠ গͳ͍ίʔυͰෳࡶͳܗঢ়ΛͰ͖Δ 82

  83. ࿩ͷྲྀΕ  ϨΠϚʔνϯάͷͨΊͷجૅ஌ࣝ  ϨΠϚʔνϯάͷΞϧΰϦζϜղઆ  ϨΠϚʔνϯάൃలฤ  UISFFKTͷ࿩ 83

  84. three.js ͱ͸ 8FC(-ͷϥούʔϥΠϒϥϦ IUUQUISFFKTPSH 84

  85. three.js Λ࢖͏ཧ༝ 8FC(-ͷॳظԽॲཧΛ
 ͨͬͨ਺ߦͷίʔυͰॻ͚Δ ΧϝϥͷίϯτϩʔϧͷͨΊͷ
 ϥΠϒϥϦΛ࠷ॳ͔Βఏڙ 85 େྔͷίʔυΛॻ͖ͨ͘ͳ͍

  86. three.jsͷ༻ޠ ը૾ग़యIUUQTIUNMFYQFSUTKQZPNPUTV 86

  87. ϑϥάϝϯτγΣʔμ࣮૷ γʔϯͷதʹຕͷ൘Λ഑ஔ ຕͷ൘ͷృΓํΛ
 ܾΊΔॲཧͱͯ͠ɺ
 ϨΠϚʔνϯάΛ
 ϑϥάϝϯτγΣʔμ
 Λ͔࣮ͭͬͯ૷ 87

  88. 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);
  89. 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);
  90. three.js vs ੜWebGL εΫϩʔϧόʔʹ஫໨˝ 90 three.js 49ߦ ੜWebGL 215ߦ

  91. ৗʹthree.js͕࠷ద͔ʁ ੜ8FC(-Λॻ͘͜ͱͰ
 ษڧʹͳΔ ߴ౓ͳ͜ͱΛ͍ͨ͠ͳΒɺ ੜ8FC(-Λ࢖͏͔͠ແ͍ 91

  92. ৗʹthree.js͕࠷ద͔ʁ UISFFKT੎΋
 ੜ8FC(-੎΋ ஥ྑ͘͠Α͏ʂ 92

  93. ·ͱΊ ϨΠτϨʔγϯά͸ϑϥάϝϯτγΣʔμͰ
 ߴ଎ʹ(16࣮૷Ͱ͖Δ ϨΠϚʔνϯάͰ͸ڑ཭ؔ਺Ͱিಥ൑ఆΛ͢Δ  ୹͍ίʔυͰෳࡶͳܗঢ়ΛදݱͰ͖Δ  $4(΍܁Γฦ͕͠؆୯ʹͰ͖Δ UISFFKTͰ8FC(-Λগͳ͍ίʔυͰѻ͑Δ 93

  94. ࢀߟࢿྉ զΒ͕!I@EPYBTઌੜͷࢿྉ  IUUQTXHMEPSHEHMTM ϝΨσϞͷਆJR !JRVJMF[MFT ࢯͷϖʔδ  IUUQJRVJMF[MFTPSHXXXJOEFYIUN ͷ8FCϑϩϯτΤϯυຊ

    ࢲͷஶॻ   IUUQTUFDICPPTUFSHJUIVCJPDTDSJQUPPO 94
  95. ࢀߟࢿྉ ͜Ε͕(16ͷྗʂ5ISFFKTʹΑΔ
 lϦΞϧλΠϜzͳϨΠτϨʔγϯά  IUUQRJJUBDPNHBNJUFNT BFBCGEG ͜Ε͕(16ͷྗʂUISFFKTʹΑΔ
 lϦΞϧλΠϜzͳϨΠτϨʔγϯά
 ʙๅੴฤʙ 

    IUUQRJJUBDPNHBNJUFNT EFGFD 95
  96. ࢿྉʹ͍ͭͯ ࢿྉ͸ޙ೔4MJEF4IBSFͰެ։༧ఆ IUUQXXXTMJEFTIBSFOFUTIPIPTPEB 96

  97. END IUUQHBNOFUXFCHM 97