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

めくるめくシェーダーアートの世界/The World of Dazzling Shader Art

ta_ka_tsu
September 06, 2019

めくるめくシェーダーアートの世界/The World of Dazzling Shader Art

iOSDC2019

ta_ka_tsu

September 06, 2019
Tweet

More Decks by ta_ka_tsu

Other Decks in Technology

Transcript

  1. Ί͘ΔΊ͘
    γΣʔμΞʔτͷ
    iOSDC Japan 2019
    ੈք

    View full-size slide

  2. !UB@LB@UTV
    ذෞݝࡏॅ
    ࣗݾ঺հ
    %$"%ܥϓϩάϥϚʔ
    %$".ܥϓϩάϥϚʔ
    ϑϦʔϥϯεˡ/PX
    ձࣾઃཱ

    View full-size slide

  3. ࣗݾ঺հ
    ࠷ۙϋϚ͍ͬͯΔ͜ͱ

    View full-size slide

  4. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ੡మ

    View full-size slide

  5. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ࡐྉɿ
    ࠭మɾ໦୸

    View full-size slide

  6. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ࡞Γํɿ
    ଱೤ϒϩοΫͰ࡞ͬͨ
    ࿍ͷதͰઈ͑ͣ෩Λૹ
    Γଓ͚ͳ͕Β໦୸Λ೩
    ΍͠ɺҰఆ͓͖࣌ؒʹ
    ࠭మɾ໦୸Λަޓʹ౤
    ೖͯ͠਺࣌ؒૢۀ

    View full-size slide

  7. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ

    View full-size slide

  8. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ݪཧɿ
    $0ˠ$0
    'F0ʴ$0ˠ'F$0
    ໦୸Λ೩΍ͯ͠ൃੜ͢ΔҰࢎԽ୸ૉ͕
    ࠭మ ࢎԽమ
    Λؐݩ͢Δ͜ͱͰమʹͳΔɻ
    ຊདྷమͷ༥఺͸ˆ͕ͩɺ໦୸ʹ઀͠
    ͍ͯΔˍෆ७෺ΛؚΉ͜ͱʹΑΓڽݻ఺
    ߱Լ͕ى͜ΓɺΑΓ௿͍Թ౓Ͱ༹༥͠࿍
    ͷఈͰమմͱͳΔɻ

    View full-size slide

  9. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ

    View full-size slide

  10. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ݱࡏɿ
    మͷ୸ૉྔͷௐ੔ʹ௅ઓத
    ˞ৄ͍͠ਓ͕͍ͨΒ
    ͥͻΞυ
    όΠεԼ͍͞

    View full-size slide

  11. ࣗݾ঺հ࠷ۙϋϚ͍ͬͯΔ͜ͱ
    ࢀߟจݙɿ
    ɾӬా࿨޺ɹ
    ɹΠν͔Β࡞Δమ
    ೶ࢁړଜจԽڠձ
    ɾӬా࿨޺ɹ
    ɹਓ͸ͲͷΑ͏ʹమΛ࡞͖͔ͬͯͨ
    ߨஊࣾ
    ɾڥɹஐ༸ɹϨϯΨࣜͨͨΒ੡మ࿍ʹΑΔమͮ͘Γ
    IUUQXXXUPSBZTGPSKQBDUJWJUZTDJFODF@FEVQEGI@QEG
    ɾᜊ౻౒ɾࡔຊູɾߴ௩ल࣏ɹ౛ঊ͕ܧঝ͢Δ఻౷ٕज़ͷࣗવՊ
    ֶతௐࠪ
    IUUQTXXXSFLJIBLVBDKQPVUMJOFQVCMJDBUJPOSPOCVOSPOCVOQEG
    QEG

    View full-size slide

  12. γΣʔμ
    ʔΞʔτͱ͸ʁ

    View full-size slide

  13. γΣʔμ
    ʔΞʔτͱ͸ʁ
    4IBEFSUPZ IUUQTXXXTIBEFSUPZDPN

    View full-size slide

  14. (-4-4BOECPY IUUQHMTMTBOECPYDPN

    γΣʔμ
    ʔΞʔτͱ͸ʁ

    View full-size slide

  15. 2ԿΛ΍͍ͬͯΔͷ͔ʁ
    γΣʔμ
    ʔΞʔτͱ͸ʁ

    View full-size slide

  16. "γΣʔμ
    ʔΛར༻ͯ͠
    ֆΛඳ͍͍ͯΔ
    γΣʔμ
    ʔΞʔτͱ͸ʁ

    View full-size slide

  17. γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  18. ࣍ݩίϯϐϡʔλάϥϑΟοΫεʹ͓͍ͯɺ
    γΣʔσΟϯάʢӄӨॲཧʣΛߦ͏ίϯϐϡʔλ
    ϓϩάϥϜͷ͜ͱɻʮTIBEFʯͱ͸ʮ࣍ୈʹมԽ
    ͤ͞ΔʯʮӄӨɾάϥσʔγϣϯΛ෇͚Δʯͱ͍
    ͏ҙຯͰɺʮTIBEFSʯ͸௖఺৭΍ϐΫηϧ৭ͳ
    ͲΛ࣍ʑʹมԽͤ͞Δ΋ͷʢΑΓ۩ମతʹɺڱٛ
    ͷҙຯͰݴ͑͹ؔ਺ʣΛҙຯ͢Δɻ
    4IBEFS
    IUUQTKBXJLJQFEJBPSHXJLJγΣʔμʔ
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  19. ࣍ݩ$(ͷඳըͷ࢓૊Έ ௒؆қ൛

    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  20. ࣍ݩ$(ͷඳըͷ࢓૊Έ ௒؆қ൛

    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ϨϯμϦϯά
    ύΠϓϥΠϯ
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  21. ࣍ݩ$(ͷඳըͷ࢓૊Έ ௒؆қ൛

    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  22. ࣍ݩ$(ͷඳըͷ࢓૊Έ ௒؆қ൛

    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  23. ࣍ݩ$(ͷඳըͷ࢓૊Έ ௒؆қ൛

    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  24. γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  25. γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  26. γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  27. γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  28. ৄ͘͠͸ͪ͜Β
    IUUQTTQFBLFSEFDLDPNUBLBUTV[VPUVUFXBLBSVSFOEBSJOHVQBJQVSBJO
    DQVEFENJBPIVB
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  29. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  30. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ɾɾɾϓϩάϥϜهड़
    ɾɾɾϓϩάϥϜهड़
    ɾɾɾݻఆॲཧ
    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  31. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ɾɾɾϓϩάϥϜهड़
    ɾɾɾϓϩάϥϜهड़
    ௖఺γΣʔμ
    ʔ

    ϑϥά
    ϝϯτγΣʔμ
    ʔ

    γΣʔμ
    ʔͱ͸ʁ

    View full-size slide

  32. γΣʔμ
    ʔΞʔτͷ
    ࢓૊Έ

    View full-size slide

  33. γΣʔμ
    ʔΞʔτͷ࢓૊Έ
    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ͭͷ఺Ͱ
    ࡾ֯ܗΛͭඳը








    View full-size slide

  34. γΣʔμ
    ʔΞʔτͷ࢓૊Έ
    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾

    View full-size slide

  35. γΣʔμ
    ʔΞʔτͷ࢓૊Έ
    ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾

    View full-size slide

  36. ʮϐΫηϧ࠲ඪΛೖྗͱͯ͠৭Λग़ྗ͢Δؔ਺ʯ
    ͦͷؔ਺͕શϐΫηϧʹద༻͞Εͯը૾͕Ͱ͖Δ
    ຊ࣭తʹ͸͜Ε͚ͩɻ
    γΣʔμ
    ʔΞʔτͷ࢓૊Έ

    View full-size slide

  37. J04Ͱͷ࡞Γํ

    View full-size slide

  38. J04Ͱͷ࡞Γํ
    ͓ͦΒ͘ํ๏͸ͭ
    %"1*ɿ8FC(-
    ඳըઌɿ8,8FC7JFX
    γΣʔμ
    ʔݴޠɿ(-4-
    %"1*ɿ.FUBM
    ඳըઌɿ$".FUBM-BZFS
    γΣʔμ
    ʔݴޠɿ.4-
    %"1*ɿ0QFO(-&4
    ඳըઌɿ$"&"(--BZFS
    γΣʔμ
    ʔݴޠɿ(-4-
    EFQSFDBUFE!

    View full-size slide

  39. J04Ͱͷ࡞Γํ
    ະݕূ

    %"1*ɿ8FC(-
    ඳըઌɿ8,8FC7JFX
    γΣʔμ
    ʔݴޠɿ(-4-
    %"1*ɿ.FUBM
    ඳըઌɿ$".FUBM-BZFS
    γΣʔμ
    ʔݴޠɿ.4-

    View full-size slide

  40. J04Ͱͷ࡞Γํ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPONFUBM
    VTJOH@B@SFOEFS@QJQFMJOF@UP@SFOEFS@QSJNJUJWFT
    ࢀߟɿ6TJOHB3FOEFS1JQFMJOFUP3FOEFS1SJNJUJWFT
    ࡾ֯ܗΛͭඳ͚ͩ͘ͳͷͰ
    ϑϥά
    ϝϯτγΣʔμ
    ʔҎ֎͸ׂѪ

    View full-size slide

  41. جຊฤ
    #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }

    View full-size slide

  42. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ૊ΈࠐΈؔ਺ͷΠϯΫϧʔυ
    جຊฤ

    View full-size slide

  43. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ໊લۭؒNFUBMΛ࢖͏ͱ͍͏એݴ
    جຊฤ

    View full-size slide

  44. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ϑϥά
    ϝϯτγΣʔμ
    ʔ༻ͷؔ਺Ͱ͋Δͱ͍͏ؔ਺ଐੑ
    جຊฤ

    View full-size slide

  45. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ϥελϥΠβ͔Β౉͞ΕΔϐΫηϧ࠲ඪͰ͋Δ͜ͱΛࣔ͢
    Ҿ਺ଐੑ
    جຊฤ

    View full-size slide

  46. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ೖྗͱͳΔϐΫηϧ࠲ඪΛ֨ೲ͢Δม਺
    جຊฤ

    View full-size slide

  47. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    ϑϥά
    ϝϯτγΣʔμ
    ʔͷؔ਺໊
    جຊฤ

    View full-size slide

  48. let library = device.makeDefaultLibrary()
    let fragmentFunction = library.makeFunction(name:”Basic1”)
    . . .
    let pipelineDescriptor = MTLRenderPipelineDescriptor()
    pipelineDescriptor.fragmentFunction = fragmentFunction
    . . .
    $16ଆͰؔ਺໊͔Β.5-'VODUJPOΛऔಘ͠
    ύΠϓϥΠϯͷϑϥά
    ϝϯτγΣʔμ
    ʔͱͯ͠ઃఆ͓ͯ͘͠
    جຊฤ

    View full-size slide

  49. #include
    using namespace metal;
    fragment float4 Basic1(float4 pixPos [[position]])
    {
    return float4(1.0, 0.0, 0.0, 1.0);
    }
    3 ( # Ћ
    جຊฤ

    View full-size slide

  50. float
    bool
    int
    char short
    uchar
    uint
    ushort
    half
    size_t ptrdiff_t void
    ˞MPOHVOTJHOFEMPOH͸.FUBMҎ߱Ͱαϙʔτ
    ˞EPVCMFMPOHMPOHVOTJHOFEMPOHMPOHMPOHEPVCMF͸ະαϙʔτ
    جຊฤ
    .4-ͷεΧϥʔܕ

    View full-size slide

  51. float2
    float3
    float4
    bool2
    bool3
    bool4
    int2
    int3
    int4
    char2
    char3
    char4
    short2
    short3
    short4
    uchar2
    uchar3
    uchar4
    uint2
    uint3
    uint4
    ushort2
    ushort3
    ushort4
    half2
    half3
    half4
    جຊฤ
    .4-ͷϕΫτϧܕ

    View full-size slide

  52. .4-ͷϕΫτϧܕ֤ίϯϙʔωϯτ΁ͷΞΫηε
    float4 vec(1.0, 2.0, 3.0, 4.0);
    float a = vec.x; // 1.0
    float b = vec.y; // 2.0
    float c = vec.z; // 3.0
    float d = vec.w; // 4.0
    float e = vec.r; // 1.0
    float f = vec.g; // 2.0
    float g = vec.b; // 3.0
    float h = vec.a; // 4.0
    vec.x = 3.0; // (3.0, 2.0, 3.0, 4.0)
    float i = vec.r; // 3.0
    جຊฤ

    View full-size slide

  53. float4 vec1(4.0, 4.0, 4.0, 4.0);
    float4 vec2(1.0, 2.0, 4.0, 8.0);
    float4 v1 = vec1 + vec2; // (5.0, 6.0, 8.0, 12.0)
    float4 v2 = vec1 - vec2; // (3.0, 2.0, 0.0, -4.0)
    float4 v3 = vec1 * vec2; // (4.0, 8.0, 16.0, 32.0)
    float4 v4 = vec1 / vec2; // (4.0, 2.0, 1.0, 0.5)
    .4-ͷϕΫτϧܕՃݮ৐আ
    جຊฤ

    View full-size slide

  54. float4 vec(1.0, 2.0, 3.0, 4.0);
    float4 v1 = vec + 2.0; // (3.0, 4.0, 5.0, 6.0)
    float4 v2 = vec - 2.0; // (-1.0, 0.0, 1.0, 2.0)
    float4 v3 = vec * 2.0; // (2.0, 4.0, 6.0, 8.0)
    float4 v4 = vec / 2.0; // (0.5, 1.0, 1.5, 2.0)
    vec = 1.0; // (1.0, 1.0, 1.0, 1.0)
    .4-ͷϕΫτϧܕεΧϥʔܕͱͷՃݮ৐আ
    جຊฤ

    View full-size slide

  55. half2x2
    half2x3
    half2x4
    float2x2
    float2x3
    float2x4
    half3x2
    half3x3
    half3x4
    half4x2
    half4x3
    half4x4
    float3x2
    float3x3
    float3x4
    float4x2
    float4x3
    float4x4
    .4-ͷߦྻܕ ໊લۭؒNFUBM಺

    جຊฤ

    View full-size slide

  56. return float4(1.0, 0.0, 0.0, 1.0);
    શͯͷϐΫηϧΛ੺ʹ͢Δ
    جຊฤ

    View full-size slide

  57. fragment float4 Basic2(float4 pixPos [[position]])
    {
    return clamp(length(pixPos.xy)/300.0, 0.0, 1.0);
    }
    جຊฤ

    View full-size slide

  58. fragment float4 Basic2(float4 pixPos [[position]])
    {
    return clamp(length(pixPos.xy)/300.0, 0.0, 1.0);
    }
    جຊฤ
    ͜Ε͸Կʁ

    View full-size slide

  59. .4-ͷϕΫτϧܕ4XJ[[MJOH
    float4 vec(1.0, 2.0, 3.0, 4.0);
    vec.xy; // (1.0, 2.0)
    vec.zwx; // (3.0, 4.0, 1.0)
    vec.xxxy; // (1.0, 1.0, 1.0, 2.0)
    vec.ra; // (1.0, 4.0)
    vec.rgb; // (1.0, 2.0, 3.0)
    vec.xyb; // compile error!
    vec.xy = float2(0.0, 1.0); // (0.0, 1.0, 3.0, 4.0)
    vec.xxy = float3(5.0, 4.0, 3.0); // compile error!
    جຊฤ

    View full-size slide

  60. fragment float4 Basic2(float4 pixPos [[position]])
    {
    return clamp(length(pixPos.xy)/300.0, 0.0, 1.0);
    }
    MFOHUIؔ਺
    جຊฤ

    View full-size slide

  61. MFOHUIؔ਺
    ϕΫτϧYͷ௕͞Λฦ͢
    float2 vec2d(3.0, 4.0);
    length(vec2d); // 5.0
    float3 vec3d(1.0, 1.0, 1.0);
    length(vec3d); // 1.732…
    P
    W
    MFOHUI W

    ؔ࿈ɿEJTUBODFؔ਺EJTUBODF Q Q
    MFOHUI QQ

    Ts length(T x)
    جຊฤ

    View full-size slide

  62. fragment float4 Basic2(float4 pixPos [[position]])
    {
    return clamp(length(pixPos.xy)/300.0, 0.0, 1.0);
    }
    DMBNQؔ਺
    جຊฤ

    View full-size slide

  63. DMBNQؔ਺
    YΛNJO7ʙNBY7ͷൣғʹΫϥϯϓ͢Δ NJO7ʽNBY7

    clamp(0.6, 0.0, 1.0); // 0.6
    clamp(-0.3, 0.0, 1.0); // 0.0
    clamp(1.2, 0.0, 1.0); // 1.0
    DMBNQ Y NJO7 NBY7
    NJO NBY Y NJO7
    NBY7

    T clamp(T x, T minV, T maxV)
    جຊฤ

    View full-size slide

  64. 9
    :

    8JEUI

    )FJHIU
    8JEUI )FJHIU

    ϐΫηϧ࠲ඪܥ
    جຊฤ

    View full-size slide


  65. ݪ఺ͱͷڑ཭ΛͰׂͬͨ΋ͷΛ໌Δ͞ͱ͍ͯ͠Δ
    return clamp(length(pixPos.xy)/300.0, 0.0, 1.0);
    جຊฤ

    View full-size slide

  66. fragment float4 Basic3(float4 pixPos [[position]])
    {
    return step(300.0, length(pixPos.xy));
    }
    جຊฤ

    View full-size slide

  67. fragment float4 Basic3(float4 pixPos [[position]])
    {
    return step(300.0, length(pixPos.xy));
    }
    TUFQؔ਺
    جຊฤ

    View full-size slide

  68. TUFQؔ਺
    Y͕FEHFҎ্ͷ৔߹ʹΛ
    ͦΕҎ֎ͷ৔߹͸Λฦؔ͢਺
    step(0.5, 1.0); // 1.0
    step(0.5, 0.3); // 0.0
    step(0.5, 0.5); // 1.0
    TUFQ Y
    ͷάϥϑ
    T step(T edge, T x)
    جຊฤ

    View full-size slide

  69. return step(300.0, length(pixPos.xy));
    ݪ఺ͱͷڑ཭͕Ҏ্ͷՕॴ͕നɺະຬͷՕॴ͕ࠇ
    جຊฤ

    View full-size slide

  70. fragment float4 Basic4(float4 pixPos [[position]])
    {
    return smoothstep(300.0, 400.0, length(pixPos.xy));
    }
    جຊฤ

    View full-size slide

  71. fragment float4 Basic4(float4 pixPos [[position]])
    {
    return smoothstep(300.0, 400.0, length(pixPos.xy));
    }
    TNPPUITUFQؔ਺
    جຊฤ

    View full-size slide

  72. TNPPUITUFQؔ਺
    Y͕FҎԼͷ৔߹͸ FҎ্ͷ৔߹͸Λฦ͢ɻ
    ͦͷؒͷ৔߹͸Τϧϛʔτิؒ ˞
    ͨ݁͠ՌΛฦ͢ɻ
    FʻF

    smoothstep(0.5, 1.0, 1.2); // 1.0
    smoothstep(0.5, 1.0, 0.2); // 0.0
    smoothstep(0.5, 1.0, 0.6); // 0.104
    smoothstep(0.5, 1.0, 0.9); // 0.896
    T smoothstep(T e1, T e2, T x)
    ˞۠ؒ [e1
    , e2
    ] 3(
    x − e1
    e2
    − e1
    )2 − 2(
    x − e1
    e2
    − e1
    )3
    ͷ x ʹରͯ͠͸ Λฦ͢
    جຊฤ

    View full-size slide

  73. TNPPUITUFQ Y
    ͷάϥϑ
    جຊฤ

    View full-size slide



  74. return smoothstep(300.0, 400.0, length(pixPos.xy));
    جຊฤ

    View full-size slide

  75. fragment float4 Basic5(float4 pixPos[[position]])
    {
    float4 red(1.0, 0.0, 0.0, 1.0);
    float4 green(0.0, 1.0, 0.0, 1.0);
    float m1 =
    smoothstep(300.0, 400.0, length(pixPos.xy));
    return mix(red, green, m1);
    }
    جຊฤ

    View full-size slide

  76. fragment float4 Basic5(float4 pixPos[[position]])
    {
    float4 red(1.0, 0.0, 0.0, 1.0);
    float4 green(0.0, 1.0, 0.0, 1.0);
    float m1 =
    smoothstep(300.0, 400.0, length(pixPos.xy));
    return mix(red, green, m1);
    }
    جຊฤ
    NJYؔ਺

    View full-size slide

  77. NJYؔ਺
    YͱZͷؒΛBͰઢܗิؒ ˞
    ͢Δؔ਺ ʽBʽ

    mix(10.0, 20.0, 0.5); // 15.0
    mix(100.0, 50.0, 0.2); // 90.0
    mix(10, -10.0, 0.6); // -2.0
    T mix(T x, T y, T a)
    NJY Y
    ͷάϥϑ
    جຊฤ

    View full-size slide

  78. fragment float4 Basic5(float4 pixPos[[position]])
    {
    float4 red(1.0, 0.0, 0.0, 1.0);
    float4 green(0.0, 1.0, 0.0, 1.0);
    float m1 =
    smoothstep(300.0, 400.0, length(pixPos.xy));
    return mix(red, green, m1);
    }
    جຊฤ

    View full-size slide

  79. fragment float4 Basic5(float4 pixPos[[position]])
    {
    float4 red(1.0, 0.0, 0.0, 1.0);
    float4 green(0.0, 1.0, 0.0, 1.0);
    float m1 =
    smoothstep(300.0, 400.0, length(pixPos.xy));
    return mix(red, green, m1);
    }
    جຊฤ
    NJYؔ਺

    View full-size slide

  80. fragment float4 Basic6(float4 pixPos[[position]])
    {
    float4 red(1.0, 0.0, 0.0, 1.0);
    float4 green(0.0, 1.0, 0.0, 1.0);
    float4 blue(0.0, 0.0, 1.0, 1.0);
    float m1 =
    smoothstep(300.0, 400.0, length(pixPos.xy));
    float4 col = mix(red, green, m1);
    float m2 = step(500.0, length(pixPos.xy));
    col = mix(col, blue, m2);
    return col;
    }
    جຊฤ

    View full-size slide

  81. جຊฤ

    float m2 = step(500.0, length(pixPos.xy));
    col = mix(col, blue, m2);

    View full-size slide

  82. جຊςΫχοΫ

    View full-size slide

  83. ਖ਼نԽ
    ࠲ඪม׵ͱ

    View full-size slide

  84. ࠲ඪม׵ͱਖ਼نԽ
    return step(300.0, length(pixPos.xy));

    View full-size slide

  85. return step(320.0, length(pixPos.xy - float2(568.0, 320.0)));


    ˞J1IPOF4&ͷ৔߹
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  86. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    όοϑΝ ڞ௨σʔλ
    γΣʔμ
    ʔʹ͸όοϑΝΛ௨ͯ͡ڞ௨σʔλΛ౉ͤΔ
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  87. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    όοϑΝ ը໘ղ૾౓
    ղ૾౓Λ౉͢
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  88. // όοϑΝͷ࡞੒
    resolutionBuffer =
    device.makeBuffer(length: 2 *ɹMemoryLayout.size,
    options: [])
    . . .
    // όοϑΝ΁ղ૾౓Λॻ͖ࠐΈ
    memcpy(resolutionBuffer.contents(),
    [width, height], 2 * MemoryLayout.size)
    . . .
    // ϑϥάϝϯτγΣʔμʔͷόοϑΝͱͯ͠ઃఆ
    renderEncoder.setFragmentBuffer(resolutionBuffer,
    offset: 0,
    index: 0)
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  89. // όοϑΝͷ࡞੒
    resolutionBuffer =
    device.makeBuffer(length: 2 *ɹMemoryLayout.size,
    options: [])
    . . .
    // όοϑΝ΁ղ૾౓Λॻ͖ࠐΈ
    memcpy(resolutionBuffer.contents(),
    [width, height], 2 * MemoryLayout.size)
    . . .
    // ϑϥάϝϯτγΣʔμʔͷόοϑΝͱͯ͠ઃఆ
    renderEncoder.setFragmentBuffer(resolutionBuffer,
    offset: 0,
    index: 0)
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  90. fragment float4 Hogehoge(float4 pixPos [[position]],
    constant float2& res [[buffer(0)]])
    {
    . . .
    }
    όοϑΝ͔Β౉͞ΕΔ஋Ͱ͋Δ͜ͱΛࣔ͢
    Ҿ਺ଐੑ
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  91. fragment float4 Hogehoge(float4 pixPos [[position]],
    constant float2& res [[buffer(0)]])
    {
    . . .
    }
    όοϑΝ͔Β౉͞ΕΔ஋͸
    ࢀরܕ͔ϙΠϯλܕͰड͚औΒͳ͚Ε͹ͳΒͳ͍
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  92. fragment float4 Hogehoge(float4 pixPos [[position]],
    constant float2& res [[buffer(0)]])
    {
    . . .
    }
    .4-Ͱ͸ࢀরܕ΍ϙΠϯλܕʹ͸
    ΞυϨεۭؒम০ࢠ͕ඞཁ
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  93. fragment float4 CodSys1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    return step(length(uv), 1.0);
    }
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  94. ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  95. fragment float4 CodSys1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    return step(length(uv), 1.0);
    }
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  96. 9

    8JEUI

    )FJHIU
    8JEUI )FJHIU

    ϐΫηϧ࠲ඪܥ
    pixPos.xy
    :
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide



  97. 8JEUI

    )FJHIU
    8JEUI )FJHIU

    ࠲ඪ஋Λഒ͢Δ
    2.0 * pixPos.xy
    ࠲ඪม׵ͱਖ਼نԽ
    8JEUI )FJHIU

    View full-size slide



  98. 8JEUI

    )FJHIU
    8JEUI )FJHIU

    2.0 * pixPos.xy - res
    ղ૾౓ΛҾ͘
    8JEUI )FJHIU

    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide







  99. (2.0 * pixPos.xy - res)/min(res.x, res.y)
    ղ૾౓ͷখ͍͞ํͰׂΔ


    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide







  100. float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y)
    uv.y *= -1.0
    :࠲ඪΛ൓సͤ͞Δ










    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

















  101. ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  102. ৽͍͠࠲ඪ VW
    Ͱݪ఺த৺ɺ൒ܘͷԁ
    return step(length(uv), 1.0);
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  103. ࠲ඪม׵ͷߟ͑ํͷίπ
    ɾ఺ͷม׵ͱݟΔ
    ɾ࠲ඪܥͷม׵ͱݟΔ
    ౳Ձͳͭͷࢹ఺Λ࣋ͭ͜ͱ
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  104. ྫฏߦҠಈ
    ఺ͷม׵ͱͯ͠ͷࢹ఺ ࠲ඪܥͷม׵ͱͯ͠ͷࢹ఺

    t
    − ⃗
    t

    P + ⃗
    t
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  105. ྫճస
    ఺ͷม׵ͱͯ͠ͷࢹ఺ ࠲ඪܥͷม׵ͱͯ͠ͷࢹ఺
    θ
    θ
    R(θ) ⃗
    P
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  106. ྫεέʔϦϯά
    ఺ͷม׵ͱͯ͠ͷࢹ఺ ࠲ඪܥͷม׵ͱͯ͠ͷࢹ఺
    sഒ
    1/sഒ
    s ⃗
    P
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  107. ɾ఺ͷม׵ͱݟΔ
    ɾ࠲ඪܥͷม׵ͱݟΔ
    ౳Ձͳͭͷࢹ఺Λ࣋ͭ͜ͱ
    ࠲ඪม׵ͷߟ͑ํͷίπ
    ࠲ඪม׵ͱਖ਼نԽ

    View full-size slide

  108. ۃ࠲ඪͷར༻

    View full-size slide

  109. ۃ࠲ඪͷར༻
    ௚ަ࠲ඪදࣔ
    x
    y (x, y)

    View full-size slide

  110. θ
    r
    ۃ࠲ඪදࣔ
    (r, θ)
    ۃ࠲ඪͷར༻

    View full-size slide

  111. fragment float4 Polar1(float4 pixPos [[position]],
    constant float2 &res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    float theta = atan2(uv.y, uv.x);
    float threshold = 0.5*sin(5 * theta) + 0.5;
    return step(length(uv), threshold);
    }
    ۃ࠲ඪͷར༻

    View full-size slide

  112. ۃ࠲ඪͷར༻

    View full-size slide

  113. θ
    ภ֯ͷ஋ʹΑ͖͍ͬͯ͠஋Λม͍͑ͯΔ
    float theta = atan2(uv.y, uv.x);
    float threshold = 0.5*sin(5 * theta) + 0.5;
    return step(length(uv), threshold);
    ۃ࠲ඪͷར༻

    View full-size slide

  114. θ
    ͖͍͠஋ͷม͑ํͰ৭ʑͳܗʹ
    float theta = atan2(uv.y, uv.x);
    float threshold = 0.2*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    ۃ࠲ඪͷར༻

    View full-size slide

  115. θ
    ͖͍͠஋ͷม͑ํͰ৭ʑͳܗʹ
    float theta = atan2(uv.y, uv.x);
    float threshold = 0.1*step(sin(20 * theta), 0.0) + 0.9;
    return step(length(uv), threshold);
    ۃ࠲ඪͷར༻

    View full-size slide

  116. Ξχϝʔγϣϯ

    View full-size slide

  117. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    Ξχϝʔγϣϯ
    όοϑΝ ը໘ղ૾౓
    ܦա࣌ؒ΋౉͢
    όοϑΝ ܦա࣌ؒ

    View full-size slide

  118. fragment float4 Animation1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    float theta = atan2(uv.y, uv.x) - time;
    float threshold = 0.2*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    }
    Ξχϝʔγϣϯ

    View full-size slide

  119. fragment float4 Animation1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    float theta = atan2(uv.y, uv.x) - time;
    float threshold = 0.2*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    }
    Ξχϝʔγϣϯ

    View full-size slide

  120. Ξχϝʔγϣϯ

    View full-size slide

  121. float theta = atan2(uv.y, uv.x);
    float amp = 0.2 * sin(time);
    float threshold = amp*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    Ξχϝʔγϣϯ

    View full-size slide

  122. Ξχϝʔγϣϯ

    View full-size slide

  123. Ξχϝʔγϣϯ

    View full-size slide

  124. fragment float4 Replication1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2.0;
    uv = fract(uv) * 2.0 - 1.0;
    float theta = atan2(uv.y, uv.x) - time;
    float threshold = 0.2*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    }
    ෳ੡

    View full-size slide

  125. 2.0 * uv
    ෳ੡

    View full-size slide

  126. fract(2.0 * uv);
    ෳ੡

    View full-size slide

  127. fract(2.0 * uv) * 2.0 - 1.0
    ෳ੡

    View full-size slide

  128. GSBDUؔ਺
    Yͷ୺਺ খ਺෦෼
    Λऔಘ͢Δؔ਺
    fract(1.5); // 0.5
    fract(3.0); // 0.0
    fract(-0.1); // 0.9
    GSBDU Y
    ͷάϥϑ
    T fract(T x)
    ෳ੡

    View full-size slide

  129. YYͷάϥϑ
    ෳ੡

    View full-size slide

  130. GSBDU YY
    ͷάϥϑ
    ෳ੡

    View full-size slide

  131. GSBDU






    GSBDU



    ෳ੡

    View full-size slide

  132. ෳ੡
    fragment float4 Replication1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 5.0;
    uv = fract(uv) * 2.0 - 1.0;
    float theta = atan2(uv.y, uv.x) - time;
    float threshold = 0.2*sin(5 * theta) + 0.8;
    return step(length(uv), threshold);
    }

    View full-size slide

  133. ෳ੡ͷࣝผ

    View full-size slide

  134. fragment float4 Id1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2.0;
    uv = fract(uv) * 2.0 - 1.0;
    return step(length(uv), 1.0);
    }
    ෳ੡ͷࣝผ

    View full-size slide

  135. ෳ੡ͷࣝผ

    View full-size slide

  136. fragment float4 Id2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2.0;
    float2 id = floor(uv);
    uv = fract(uv) * 2.0 - 1.0;
    float threshold = exp(-length(id));
    return step(length(uv), threshold);
    }
    ෳ੡ͷࣝผ

    View full-size slide

  137. ෳ੡ͷࣝผ

    View full-size slide

  138. fragment float4 Id2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2.0;
    float2 id = floor(uv);
    uv = fract(uv) * 2.0 - 1.0;
    float threshold = exp(-length(id));
    return step(length(uv), threshold);
    }
    ෳ੡ͷࣝผ

    View full-size slide

  139. qPPSؔ਺
    চؔ਺ɹYΛ௒͑ͳ͍࠷େͷ੔਺Λฦ͢
    floor(1.5); // 1.0
    floor(3.0); // 3.0
    floor(-0.1); // -1.0
    T floor(T x)
    qPPS Y
    ͷάϥϑ
    ෳ੡ͷࣝผ

    View full-size slide

  140. 2.0 * uv
    ෳ੡ͷࣝผ

    View full-size slide

  141. floor(2.0 * uv)




















































    ෳ੡ͷࣝผ

    View full-size slide

  142. ෳ੡ͷࣝผ
    fragment float4 Id2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2.0;
    float2 id = floor(uv);
    uv = fract(uv) * 2.0 - 1.0;
    float threshold = exp(-length(id));
    return step(length(uv), threshold);
    }

    View full-size slide

  143. ෳ੡ͷࣝผ

    View full-size slide

  144. ෳ੡ͷࣝผ

    View full-size slide

  145. ٙࣅཚ਺
    TJO Y

    GSBDU TJO Y


    View full-size slide

  146. ٙࣅཚ਺
    GSBDU TJO Y


    GSBDU TJO Y


    View full-size slide

  147. ٙࣅཚ਺
    GSBDU TJO Y


    GSBDU TJO Y


    View full-size slide

  148. ٙࣅཚ਺
    GSBDU TJO Y


    GSBDU TJO Y


    View full-size slide

  149. ٙࣅཚ਺
    GSBDU TJO Y


    View full-size slide

  150. float N11(float v) {
    return fract(sin(v)*43758.5453123);
    }
    fragment float4 Noise1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    return N11(uv.x);
    }
    ٙࣅཚ਺

    View full-size slide

  151. float N21(float2 p) {
    return N11(dot(p, float2(12.9898, 78.233)));
    }
    fragment float4 Noise2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    return N21(uv);
    }
    ٙࣅཚ਺
    ˞EPU W W
    ɿϕΫτϧͷ಺ੵΛऔΔؔ਺

    View full-size slide

  152. fragment float4 Noise3(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    uv *= 4.0;
    float2 id = floor(uv);
    return N21(id);
    }
    ٙࣅཚ਺

    View full-size slide

  153. fragment float4 Noise4(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    uv *= 4.0;
    float2 id = floor(uv);
    uv = fract(uv)*2.0 - 1.0;
    float r = N21(id);
    return step(length(uv), r);
    }
    ٙࣅཚ਺

    View full-size slide

  154. fragment float4 Color1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    float2 id = floor(4*uv);
    float r = N21(id);
    float g = N21(id + float2(123.34, 32.34));
    float b = N21(id + float2(23.0, 342.0));
    return float4(r, g, b, 1.0);
    }

    View full-size slide


  155. )47৭ۭؒΛ࢖͏
    IUUQTKBXJLJQFEJBPSHXJLJ)47৭ۭؒ

    View full-size slide

  156. float3 hsv2rgb(float h, float s, float v) {
    float3 a = fract(h + float3(0.0, 2.0, 1.0)/3.0)*6.0-3.0;
    a = clamp(abs(a) - 1.0, 0.0, 1.0) - 1.0;
    a = a*s + 1.0;
    return a*v;
    }

    ৭૬ ࠼౓ ໌౓
    )47৭ۭؒΛ࢖͏
    ˞I T W͸શͯʙͷ஋

    View full-size slide

  157. fragment float4 Color2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    float2 id = floor(4*uv);
    float h = N21(id);
    float3 rgb = hsv2rgb(h, 1.0, 1.0);
    return float4(rgb, 1.0);
    }

    View full-size slide

  158. fragment float4 Color3(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    float2 id = floor(4*uv);
    float h = N21(id);
    float3 rgb = hsv2rgb(h, 0.7, 1.0);
    return float4(rgb, 1.0);
    }

    View full-size slide

  159. fragment float4 Color4(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv *= -1.0;
    float2 id = floor(4*uv);
    float h = N21(id);
    float3 rgb = hsv2rgb(fract(h + 0.2*time), 0.7, 1.0);
    return float4(rgb, 1.0);
    }

    View full-size slide

  160. ۭؒΛ࿪ΊΔ

    View full-size slide

  161. float grid(float2 p)
    {
    float g = 0.0;
    p = fract(p);
    g = max(g, step(0.98, p.x));
    g = max(g, step(0.98, p.y));
    return g;
    }
    fragment float4 Distorted1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    float4 red(1.0, 0.0, 0.0, 1.0);
    return red * grid(uv);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  162. ۭؒΛ࿪ΊΔ

    View full-size slide

  163. fragment float4 Distorted2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    uv.x += sin(uv.y);
    float4 red(1.0, 0.0, 0.0, 1.0);
    return red * grid(uv);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  164. ۭؒΛ࿪ΊΔ

    View full-size slide

  165. fragment float4 Distorted3(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    uv.x += sin(uv.y);
    uv.y += sin(uv.x);
    float4 red(1.0, 0.0, 0.0, 1.0);
    return red * grid(uv);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  166. ۭؒΛ࿪ΊΔ

    View full-size slide

  167. fragment float4 Distorted4(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    uv.x += 0.5 * sin(uv.y + time) + 0.5;
    uv.y += 0.5 * sin(uv.x + time) + 0.5;
    float4 red(1.0, 0.0, 0.0, 1.0);
    return red * grid(uv);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  168. ۭؒΛ࿪ΊΔ

    View full-size slide

  169. fragment float4 Distorted5(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    uv *= 1.0 + (0.1 * sin(time) + 0.1) * length(uv);
    float4 red(1.0, 0.0, 0.0, 1.0);
    return red * grid(uv);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  170. ۭؒΛ࿪ΊΔ

    View full-size slide

  171. fragment float4 Distorted6(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    uv *= 2;
    uv.x += 0.5 * sin(uv.y + time) + 0.5;
    uv.y += 0.5 * sin(uv.x + time) + 0.5;
    uv = fract(uv);
    uv -= 0.5;
    float theta = atan2(uv.y, uv.x);
    float threshold = 0.25*sin(5*theta)+0.25;
    return step(length(uv), threshold);
    }
    ۭؒΛ࿪ΊΔ

    View full-size slide

  172. ۭؒΛ࿪ΊΔ

    View full-size slide

  173. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ςΫενϟ
    όοϑΝ ը໘ղ૾౓
    ςΫενϟ΋౉ͤΔ
    όοϑΝ ܦա࣌ؒ
    ςΫενϟ

    View full-size slide

  174. // όοϑΝͷ࡞੒
    imageTexture =
    try! textureLoader.newTexture(name: “icon",
    scaleFactor: 1.0,
    bundle: nil,
    options: [.SRGB: false])
    . . .
    // ϑϥάϝϯτγΣʔμʔͷόοϑΝͱͯ͠ઃఆ
    renderEncoder.setFragmentTexture(imageTexture, index: 0)
    ςΫενϟ

    View full-size slide

  175. // όοϑΝͷ࡞੒
    imageTexture =
    try! textureLoader.newTexture(name: “icon",
    scaleFactor: 1.0,
    bundle: nil,
    options: [.SRGB: false])
    . . .
    // ϑϥάϝϯτγΣʔμʔͷόοϑΝͱͯ͠ઃఆ
    renderEncoder.setFragmentTexture(imageTexture, index: 0)
    ςΫενϟ

    View full-size slide

  176. fragment float4 Hogehoge(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    . . .
    }
    ςΫενϟ

    View full-size slide

  177. fragment float4 Texture1(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    uv.y *= -1.0;
    constexpr sampler s(address::clamp_to_edge, filter::linear);
    return image.sample(s, uv);
    }
    ςΫενϟ

    View full-size slide

  178. fragment float4 Texture2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    // uv.y *= -1.0;
    constexpr sampler s(address::clamp_to_edge, filter::linear);
    return image.sample(s, uv);
    }
    ςΫενϟ

    View full-size slide

  179. fragment float4 Texture2(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    // uv.y *= -1.0;
    constexpr sampler s(address::clamp_to_edge, filter::linear);
    return image.sample(s, uv);
    }
    ςΫενϟ

    View full-size slide

  180. fragment float4 Texture3(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    constexpr sampler s(address::repeat, filter::linear);
    return image.sample(s, uv);
    }
    ςΫενϟ

    View full-size slide

  181. address::mirrored_repeat address::clamp_to_zero
    ςΫενϟ

    View full-size slide

  182. fragment float4 Texture4(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    texture2d tex[[texture(0)]])
    {
    float2 uv = (2.0 * pixPos.xy - res)/min(res.x, res.y);
    constexpr sampler s(address::repeat, filter::linear);
    float idY = floor(uv.y * 40);
    float d = N11(idY);
    float offset = 0.1 * step(0.8, d);
    uv.x += offset;
    return image.sample(s, uv);
    }
    ςΫενϟ

    View full-size slide

  183. ΠϯλϥΫγϣϯ

    View full-size slide

  184. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    ΠϯλϥΫγϣϯ
    όοϑΝ ը໘ղ૾౓
    όοϑΝ ܦա࣌ؒ
    ςΫενϟ

    View full-size slide

  185. ௖఺ॲཧ
    ϥελϥΠζ
    ϑϥάϝϯτॲཧ
    ೖྗɿ௖఺ྻ
    ग़ྗɿը૾
    όοϑΝ ը໘ղ૾౓
    όοϑΝ ܦա࣌ؒ
    ςΫενϟ
    όοϑΝ Ճ଎౓
    όοϑΝ ϚΠΫԻྔ
    ςΫενϟ Χϝϥը૾
    όοϑΝ ࠷ޙʹ৮ͬͨ఺
    ΠϯλϥΫγϣϯ

    View full-size slide

  186. fragment float4 Sample(float4 pixPos [[position]],
    constant float2& res[[buffer(0)]],
    constant float& time[[buffer(1)]],
    constant float& volume[[buffer(2)]],
    constant float& accel[[buffer(3)]],
    constant float2& touch[[buffer(4)]],
    texture2d tex[[texture(0)]],
    texture2d cam[[texture(1)]])
    {
    . . .
    }
    ΠϯλϥΫγϣϯ

    View full-size slide

  187. ϨΠϚʔνϯά
    εϑ
    ΟΞτϨʔγϯά

    View full-size slide

  188. ϨΠϚʔνϯά

    View full-size slide

  189. ϨΠϚʔνϯά
    ΧϝϥɾεΫϦʔϯɾΦϒδΣΫτΛԾఆ͢Δ

    View full-size slide

  190. ϨΠϚʔνϯά
    ͋ΔϐΫηϧʹண໨

    View full-size slide

  191. ϐΫηϧͷ৭͸֎ଆ͔Βೖ͖ͬͯͨޫ
    ϨΠϚʔνϯά

    View full-size slide

  192. ޫ͕Ͳ͔͜Βདྷͨͷ͔ΛٯʹḷΔ
    ˠϨΠτϨʔγϯά
    ϨΠϚʔνϯά

    View full-size slide

  193. ϨΠϚʔνϯά

    View full-size slide

  194. ϨΠϚʔνϯά

    View full-size slide

  195. ϨΠϚʔνϯά

    View full-size slide

  196. ϨΠϚʔνϯά

    View full-size slide

  197. ࠷୹ڑ཭Λऔಘʁ
    Ͳ͏΍ͬͯʁ
    ϨΠϚʔνϯά

    View full-size slide

  198. ڑ཭ͰϞσϧܗঢ়ΛܾΊΔ
    ϨΠϚʔνϯά

    View full-size slide

  199. f(P)
    ϨΠϚʔνϯά
    ͸఺Λೖྗ͠ڑ཭Λग़ྗ͢Δؔ਺
    f
    P

    View full-size slide

  200. f(P) = 0 ͱͳΔ఺ͷू߹ʂ
    Ϟσϧͷܗঢ়͸
    ϨΠϚʔνϯά
    f(P)
    P

    View full-size slide

  201. IUUQJRVJMF[MFTPSHXXXBSUJDMFTEJTUGVODUJPOTEJTUGVODUJPOTIUN
    ϨΠϚʔνϯά

    View full-size slide

  202. fͷ౳஋໘ͱ௚ަ͢Δ
    εΧϥʔ৔ͷޯ഑
    f
    gradf ͸
    gradf
    ϨΠϚʔνϯά
    ɿϕΫτϧΛฦؔ͢਺

    View full-size slide

  203. NBY " #

    NBY # "

    ڑ཭ؔ਺"Ͱఆٛ͞ΕΔܗঢ় ڑ཭ؔ਺#Ͱఆٛ͞ΕΔܗঢ়
    NBY " #

    NJO " #

    ϨΠϚʔνϯά

    View full-size slide

  204. l3BZNBSDIJOHJO3BZNBSDIJOHzDSFBUFECZLBOFUB !LBOFUBBBBB

    IUUQTXXXTIBEFSUPZDPNWJFXXM4(8Z
    ϨΠϚʔνϯά

    View full-size slide

  205. ӍཻγΣʔμ
    ʔղઆ

    View full-size slide

  206. ӍཻγΣʔμ
    ʔղઆ
    ॎԣൺ͕ҟͳΔάϦουΛ࡞Δ

    View full-size slide

  207. ӍཻγΣʔμ
    ʔղઆ
    άϦου಺ʹԁΛඳ͘

    View full-size slide

  208. ӍཻγΣʔμ
    ʔղઆ
    ԁΛΞχϝʔγϣϯͤ͞Δ

    View full-size slide

  209. ӍཻγΣʔμ
    ʔղઆ
    άϦου΋ಈ͔͢

    View full-size slide

  210. ӍཻγΣʔμ
    ʔղઆ
    άϦου಺ʹখ͍͞఺Λඳ͘

    View full-size slide

  211. ӍཻγΣʔμ
    ʔղઆ
    େ͖͍ԁΑΓ্ͷҐஔͰখ͍͞ԁʹϚεΫΛ͔͚Δ

    View full-size slide

  212. ӍཻγΣʔμ
    ʔղઆ
    খ͍͞ԁʹάϥσʔγϣϯΛ͔͚Δ

    View full-size slide

  213. ӍཻγΣʔμ
    ʔղઆ
    େ͖͍ԁΛগ͠࿪·ͤͯԼଆ͕গ͠େ͖͍ܗʹ͢Δ

    View full-size slide

  214. ӍཻγΣʔμ
    ʔղઆ
    ࠨӈํ޲ʹ΋Ξχϝʔγϣϯͤ͞Δ

    View full-size slide

  215. ӍཻγΣʔμ
    ʔղઆ
    άϦουຖʹλΠϛϯάͱҐஔΛͣΒ͢

    View full-size slide

  216. ӍཻγΣʔμ
    ʔղઆ
    ௨աҐஔۙล͚ͩʹάϥσʔγϣϯϚεΫΛ࡞Δ

    View full-size slide

  217. ӍཻγΣʔμ
    ʔղઆ
    ΧϝϥೖྗΛςΫενϟͱͯ͠ೖྗ͠
    ӍཻͷՕॴ͸αϯϓϦϯά͢Δ৔ॴΛͣΒ͢

    View full-size slide

  218. ӍཻγΣʔμ
    ʔղઆ
    άϥσʔγϣϯϚεΫʹԠͯ͡΅͔͢

    View full-size slide

  219. ӍཻγΣʔμ
    ʔղઆ
    5IF"SUPG$PEF
    IUUQTXXXZPVUVCFDPNDIBOOFM6$D"M5RE[*%B/95[XY+9H

    View full-size slide

  220. 4IBEFS"SU4BNQMFT
    IUUQTHJUIVCDPNUBLBUTV4IBEFS"SU4BNQMFT

    View full-size slide

  221. ࢀߟ
    ɾ5IF#PPLPG4IBEFS

    ɹIUUQTUIFCPPLPGTIBEFSTDPN
    ɾ*OJHP2VJMF[ࢯͷαΠτ
    ɹIUUQJRVJMF[MFTPSH
    ɾ5IF"SUPG$PEF
    ɹIUUQTXXXZPVUVCFDPNDIBOOFM6$D"M5RE[*%B/95[XY+9H
    ɾXHMEPSH(-4-DPOUFOUT

    ɹIUUQTXHMEPSHEHMTM
    ɾָ͍͠ʂ6OJUZγΣʔμʔ͓ֆඳ͖ೖ໳ʂ

    ɹIUUQTUDPLX3"/MV$

    View full-size slide

  222. &OKPZ4IBEFS
    1SPHSBNNJOH

    View full-size slide