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

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

がむ
February 14, 2016

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

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

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

がむ

February 14, 2016
Tweet

More Decks by がむ

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    UISFFKTʹ13͕Ϛʔδ͞Εͨ

    IUUQUISFFKTPSHFYBNQMFTXFCHM@SBZNBSDIJOH@SFqFDU

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ,BMJࢯͷ࡞඼IUUQTXXXTIBEFSUPZDPNWJFX9UG3O
    8

    View full-size slide

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

    IUUQTXXXTIBEFSUPZDPNSFTVMUT RVFSZUBH%SBZNBSDIJOH
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ϥελϥΠζ๏
    ܗঢ়Λࡾ֯ܗ

    ϙϦΰϯ
    ͷ

    ू߹Ͱදݱ
    %ͷ௖఺Λ%

    ʹ౤Өͯ͠ඳը
    ॲཧ͕͍ܰ
    15

    View full-size slide

  16. ϥελϥΠζ๏
    ܗঢ়Λࡾ֯ܗ

    ϙϦΰϯ
    ͷ

    ू߹Ͱදݱ
    %ͷ௖఺Λ%

    ʹ౤Өͯ͠ඳը
    ॲཧ͕͍ܰ
    16

    View full-size slide

  17. ϨΠτϨʔγϯά๏
    Χϝϥʹಧ͘ޫઢʢϨΠʣΛ

    શϐΫηϧ਺γϡϛϨʔγϣϯ
    17
    ʲը૾ग़యʳ
    http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154

    View full-size slide

  18. ϨΠτϨʔγϯά๏
    શϐΫηϧ਺γϛϡϨʔτ
    Y

    ճ
    ॲཧ͸ॏ͍
    ແݶʹ׈Β͔ɾ

    ෺ཧݱ৅ͷ࠶ݱ͕Մೳ
    18
    ʲը૾ग़యʳ
    https://sites.google.com/site/
    rendering1h/

    View full-size slide

  19. ϨΠτϨʔγϯά๏
    શϐΫηϧ਺γϛϡϨʔτ
    Y

    ճ
    ॲཧ͸ॏ͍
    ແݶʹ׈Β͔ɾ

    ෺ཧݱ৅ͷ࠶ݱ͕Մೳ
    19
    ʲը૾ग़యʳ
    https://sites.google.com/site/
    rendering1h/
    ৄ͘͠͸
    ϨΠτϨʔγϯάͷઐ໳Ո
    IPMFࢯʹฉ͍͍ͯͩ͘͞
    eduptʢύετϨʔγϯάϕʔεͷ

    ෺ཧϕʔεϨϯμϥʣͷ࡞ऀ

    View full-size slide

  20. 2छྨͷγΣʔμ
    8FC(-ͷγΣʔμ͸छྨ
    ௖఺γΣʔμ

    WFSUFYTIBEFS

    ϑϥάϝϯτγΣʔμ

    GSBHNFOUTIBEFS

    20

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷
    %γʔϯͷதʹຕͷ൘Λ഑ஔ
    ຕͷ൘ͷృΓํΛ

    ܾΊΔॲཧͱͯ͠ɺ

    ϨΠτϨʔγϯάΛ

    ϑϥάϝϯτγΣʔμ

    Λ͔࣮ͭͬͯ૷
    23

    View full-size slide

  24. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷
    ϑϥάϝϯτγΣʔμ͸

    (16Ͱฒྻॲཧ͞ΕΔ
    ͱͯ΋ߴ଎ʹॲཧͰ͖Δ
    ϦΞϧλΠϜඳը͕Մೳ
    24

    View full-size slide

  25. ϨΠτϨͷϑϥάϝϯτγΣʔμ࣮૷
    (16Ͱฒྻॲཧʁ೉ͦ͠͏ʜ
    ϨΠτϨʔγϯά͸

    ฒྻੑ͕ߴ͍ख๏
    ฒྻͷ࣮૷͸؆୯
    25

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    িಥ൑ఆͷΞϧΰϦζϜΛ࢖͍෼͚
    ϨΠϚʔνϯά
    w ڑ཭ؔ਺ͰγʔϯΛఆٛ͠ɺ

    ϨΠΛগͣͭ͠ਐΊͳ͕Βিಥ൑ఆ
    28

    View full-size slide

  29. ڑ཭ؔ਺ͱ͸
    ڑ཭ؔ਺
    ೖྗɿ%ͷ࠲ඪQ WFD

    ग़ྗɿ఺Q͔Βγʔϯͷ෺ମ΁ͷ

    ࠷୹ڑ཭ qPBU

    29

    View full-size slide

  30. ڑ཭ؔ਺ͱ͸
    ڑ཭ؔ਺࠷୹ڑ཭
    Πϝʔδͣ͠Β͍ͷͰɺ

    ࣮ྫΛڍ͍͖͛ͯ·͢
    30

    View full-size slide

  31. ڑ཭ؔ਺ͱ͸
    ڑ཭ؔ਺

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

    View full-size slide

  32. ڑ཭ؔ਺ͱ͸
    ڑ཭ؔ਺

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

    View full-size slide

  33. ڑ཭ؔ਺ͱ͸
    ڑ཭ؔ਺

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

    View full-size slide

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

    View full-size slide

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

    cc
    ϨΠϚʔνϯά
    35

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. ϨΠϚʔνϯάͷΞϧΰϦζϜ
    িಥ͢Δ·Ͱʢ࠷୹ڑ཭͕ʣʹͳΔ·Ͱɺ

    ͻͨ͢ΒϨΠΛਐΊΔ͚ͩ
    ࠷୹ڑ཭͚ͩਐΊΔͷͰɺ

    ਐΈ͗ͯ͢௨Γൈ͚Δ͜ͱ͸ͳ͍
    ୯७ʂʂγϯϓϧʂʂ
    46

    View full-size slide

  47. ϨΠϚʔνϯάͷΞϧΰϦζϜ
    ϨΠϚʔνϯάͷ

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

    View full-size slide

  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;
    }

    View full-size slide

  49. ϨΠϚʔνϯάͷΞχϝʔγϣϯ
    IUUQTUXJUUFSDPN
    NPUJPOT@XPSLTUBUVT

    49

    View full-size slide

  50. εϑΟΞʔτϨʔγϯά
    ࠓ·Ͱઆ໌ͨ͠ͷ͸ϨΠϚʔνϯάͷ̍छͷ

    εϑΟΞʔτϨʔγϯά
    িಥ൑ఆͷաఔͰٿʢεϑΟΞʔʣ͕ͨ͘͞Μग़ͯ͘Δ
    50

    View full-size slide

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

    View full-size slide

  52. ڑ཭ؔ਺ͷ࣮૷

    View full-size slide

  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
    ́

    View full-size slide

  54. ശͷڑ཭ؔ਺
    ݪ఺ʹ͋Δେ͖͞Cͷശͷڑ཭ؔ਺
    ͜Ε΋௒γϯϓϧ
    ಈ࡞ݪཧ͸΍΍͍͜͠ͷͰׂѪʼʻ
    54
    float boxDist(vec3 p, vec3 b){
    return length(max(abs(p) - b, 0.0));
    }

    View full-size slide

  55. ༷ʑͳڑ཭ؔ਺
    IUUQJRVJMF[MFTPSHXXXBSUJDMFTEJTUGVODUJPOT
    EJTUGVODUJPOTIUN
    ࠷ॳͷϝΨσϞͷ࡞ऀJRࢯͷϖʔδʹ·ͱΊΒ͍ͯΔ
    55

    View full-size slide

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

    View full-size slide

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

    qPBUEJ⒎VTFDMBNQ EPU MJHIU OPSNBM


    57

    View full-size slide

  58. ๏ઢΛٻΊΔ
    ϨΠτϨʔγϯάͰ͸ɺ

    ܗঢ়ʹԠͨ͡๏ઢͷܭࢉ͕ඞཁ
    ٿମͷ๏ઢɿަ఺͔Βٿମͷத৺ΛҾ͘
    ϙϦΰϯͷ๏ઢɿΤοδͷ֎ੵΛܭࢉ
    58

    View full-size slide

  59. ๏ઢΛٻΊΔ
    ϨΠτϨʔγϯάͰ͸ɺ

    ܗঢ়ʹԠͨ͡๏ઢͷܭࢉ͕ඞཁ
    ٿମͷ๏ઢɿަ఺͔Βٿମͷத৺ΛҾ͘
    ϙϦΰϯͷ๏ઢɿΤοδͷ֎ੵΛܭࢉ
    59

    View full-size slide

  60. ๏ઢΛٻΊΔ
    ϨΠϚʔνϯάͰ͸ɺ

    ͲΜͳܗঢ়Ͱ΋ಉ͡ܭࢉͰ๏ઢ͕ٻ·Δ
    ٿମͷ๏ઢɿڑ཭ؔ਺ͷޯ഑
    ശͷ๏ઢɿڑ཭ؔ਺ͷޯ഑
    60

    View full-size slide

  61. ๏ઢΛٻΊΔ
    ϨΠϚʔνϯάͰ͸ɺ

    ͲΜͳܗঢ়Ͱ΋ಉ͡ܭࢉͰ๏ઢ͕ٻ·Δ
    ٿମͷ๏ઢɿڑ཭ؔ਺ͷޯ഑
    ശͷ๏ઢɿڑ཭ؔ਺ͷޯ഑
    61

    View full-size slide

  62. ๏ઢΛٻΊΔ
    ͳΔ΄Ͳʂ
    ޯ഑ʂ

    ͬͯԿ͚ͩͬʁ
    62

    View full-size slide

  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[ͦΕͧΕগͣ͠Βͯ͠ɺ

    ڑ཭ؔ਺ͷࠩ෼Λܭࢉ

    View full-size slide

  64. ๏ઢΛٻΊΔ
    ਺ֶͰ͸ɺG Y Z [
    ͰදͤΔۂ໘

    ͷ๏ઢϕΫτϧO͸

    O G`Y G`Z G`[
    ͱGͷภඍ෼ʢޯ഑ʣ

    ͱͳΔͱ஌ΒΕ͍ͯΔ
    ڑ཭ؔ਺͸G Y Z [
    ͰදͤΔۂ໘ʹ౳͍͠
    ๏ઢOڑ཭ؔ਺ͷޯ഑ͱͯ͠ܭࢉՄೳ
    64

    View full-size slide

  65. ๏ઢΛٻΊΔ
    ʮֶߍͰඍ෼͸܏͖ͱशͬͨΜ͚ͩͲʂʁʯ
    ZYͷΑ͏ͳࣜͩͱɺYͷඍ෼͸܏͖
    G Y Z
    YZʹมܗ͢Ε͹ɺ

    ࣍ݩͰ΋ඍ෼͸๏ઢ
    65

    View full-size slide

  66. ڑ཭ؔ਺͸ສೳ

    View full-size slide

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

    ϨΠϚʔνϯάΛ੍͢
    67

    View full-size slide

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

    View full-size slide

  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)
    ); }

    View full-size slide

  70. ڑ཭ؔ਺ͷ߹੒
    ڑ཭ؔ਺ΛNJO΍NBYͰ߹੒͢Δ͚ͩͰɺ$4(දݱ͕Մೳ
    70

    View full-size slide

  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);
    }

    View full-size slide

  72. ڑ཭ؔ਺ͷ࣮ફฤ
    ࠷ॳͷమࠎͷྫ
    $4(දݱ

    ʴ

    ແݶͷ܁Γฦ͠


    Ͱ࣮ݱՄೳʂ
    72

    View full-size slide

  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;
    }

    View full-size slide

  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);
    }

    View full-size slide

  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);
    }

    View full-size slide

  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

    View full-size slide

  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);
    }

    View full-size slide

  78. ڑ཭ؔ਺ͷ࣮ફฤ
    ֯ப͔ΒԁபΛࠩू߹ͰႡΓ؏͘ͱʜ
    78
    - =

    View full-size slide

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

    View full-size slide

  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);
    }

    View full-size slide

  81. ڑ཭ؔ਺ͷ࣮ફฤ
    ੺͍৭Λ͚ͭͯɺԕ͘Λ໌Δ͘͢Δͱʜ
    81

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. three.js Λ࢖͏ཧ༝
    8FC(-ͷॳظԽॲཧΛ

    ͨͬͨ਺ߦͷίʔυͰॻ͚Δ
    ΧϝϥͷίϯτϩʔϧͷͨΊͷ

    ϥΠϒϥϦΛ࠷ॳ͔Βఏڙ
    85
    େྔͷίʔυΛॻ͖ͨ͘ͳ͍

    View full-size slide

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

    View full-size slide

  87. ϑϥάϝϯτγΣʔμ࣮૷
    γʔϯͷதʹຕͷ൘Λ഑ஔ
    ຕͷ൘ͷృΓํΛ

    ܾΊΔॲཧͱͯ͠ɺ

    ϨΠϚʔνϯάΛ

    ϑϥάϝϯτγΣʔμ

    Λ͔࣮ͭͬͯ૷
    87

    View full-size slide

  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);

    View full-size slide

  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);

    View full-size slide

  90. three.js vs ੜWebGL
    εΫϩʔϧόʔʹ஫໨˝
    90
    three.js 49ߦ ੜWebGL 215ߦ

    View full-size slide

  91. ৗʹthree.js͕࠷ద͔ʁ
    ੜ8FC(-Λॻ͘͜ͱͰ

    ษڧʹͳΔ
    ߴ౓ͳ͜ͱΛ͍ͨ͠ͳΒɺ
    ੜ8FC(-Λ࢖͏͔͠ແ͍
    91

    View full-size slide

  92. ৗʹthree.js͕࠷ద͔ʁ
    UISFFKT੎΋

    ੜ8FC(-੎΋
    ஥ྑ͘͠Α͏ʂ
    92

    View full-size slide

  93. ·ͱΊ
    ϨΠτϨʔγϯά͸ϑϥάϝϯτγΣʔμͰ

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

    View full-size slide

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

    IUUQTUFDICPPTUFSHJUIVCJPDTDSJQUPPO
    94

    View full-size slide

  95. ࢀߟࢿྉ
    ͜Ε͕(16ͷྗʂ5ISFFKTʹΑΔ

    lϦΞϧλΠϜzͳϨΠτϨʔγϯά
    IUUQRJJUBDPNHBNJUFNT
    BFBCGEG
    ͜Ε͕(16ͷྗʂUISFFKTʹΑΔ

    lϦΞϧλΠϜzͳϨΠτϨʔγϯά

    ʙๅੴฤʙ
    IUUQRJJUBDPNHBNJUFNT
    EFGFD
    95

    View full-size slide

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

    View full-size slide

  97. END
    IUUQHBNOFUXFCHM
    97

    View full-size slide