Shaderお絵描き初級編

2018/11/28 Gotanda.unity #9 でのLTスライドです。
プロジェクトはこちら https://github.com/hacha/ForGotandaUnity_9

Transcript

1. γΣʔμʔ͓ֆඳ͖ॳڃฤ @hacha 2018/11/28
 Gotanda.unity #9
 in Unity Technologies Japan @ۜ࠲
2. ࣗݾ঺հ • hacha(@hacha) • ϑϦʔϥϯεͷΤϯδχΞ
 ओʹιγϟήͱ͔ϞόΠϧ޲͚ήʔϜ։ൃ
 ࠷ۙ͸MRؔ܎ͷ͜ͱ΍ͬͯͨΓ
3. ࠓճ࿩͢಺༰ • QuadʹϑϥάϝϯτγΣʔμʔͰ
 ͳΜ͔ͪΐͬͱΠΠΧϯδͷ໛༷Λඳ͘ • γΣʔμʔͰ໛༷Λඳָ͘͠͞Λ఻͑Δ ࠓճ࿩͞ͳ͍಺༰ • HLSLͷࡉ͔͍จ๏ͱ͔͸આ໌͠·ͤΜɻ
 ͋·Γ೉͍͜͠ͱ͸͍ͯ͠ͳ͍ͷͰɺ΍ͬͯ Δ͜ͱͷχϡΞϯεΛ΅Μ΍Γ௫ΜͰ΋Β͑ Ε͹ɻ
4. Step1 ৭ΛృΔ fixed4 frag (v2f_img i) : SV_Target { return fixed4(1, 0, 0, 1); } ൘ϙϦΛਅͬ੺ʹϕλృΓ͢Δɻ
   ϑϥάϝϯτγΣʔμʔͷ෦෼͚ͩൈਮ 3(#"ͷ஋Λฦ͢ͱɺͦͷ৭Ͱృͬͯ͘ΕΔɻ
   ͦΕ͕ϑϥάϝϯτγΣʔμʔͬͯ΍ͭͩɻ
   
5. Step2 നࠇͷάϥσʔγϣϯʹ͢Δ fixed4 frag (v2f_img i) : SV_Target { // i.uv ʹUV࠲ඪͷ஋͕ೖ͍ͬͯΔ float c = i.uv.x * i.uv.y; return fixed4(c, c, c, 1); } ϕλృΓ͡Ό໘ന͘ͳ͍ͷͰɺάϥσʔγϣϯʹ ͢Δɻ
   
6. Step2 നࠇͷάϥσʔγϣϯʹ͢Δ γΣʔμʔͰQuadʹԿ͔ඳͬͯ͘͜ͱ͸ͭ·Γ 0.0ʙ1.0ͷ஋ͷೖྗʹରͯ͠ɺԿΒ͔ͷRGBAͷ஋ Λฦ͢͜ͱ
7. Step3 ԁΛඳ͘ fixed4 frag (v2f_img i) : SV_Target { float2 pos = i.uv; // 0.0ʙ1.0 ͷൣғͷ pos Λ -1.0ʙ1.0 ͷൣғʹͳΔΑ͏ม׵ pos = pos * 2.0 - 1.0; // ԁΛඳ͘ float c = 1.0 - length(pos); return fixed4(c, c, c, 1); } த৺͔Βͷڑ཭ʹԠͯ͡৭͕มΘΔΑ͏ʹ͍ͯ͠ Δɻ
8. Step4 ಈ͔͢ fixed4 frag (v2f_img i) : SV_Target { float2 pos = i.uv; // 0.0ʙ1.0 ͷൣғͷ pos Λ -1.0ʙ1.0 ͷൣғʹͳΔΑ͏ม׵ pos = pos * 2.0 - 1.0; // ԁΛඳ͘ float c = 1.0 - length(pos); // ࣌ؒܦաͰ஋͕มΘΔΑ͏ʹ͢Δ c = frac(c + _Time.x * 5.0); return fixed4(c, c, c, 1); } _Timeͬͯͷ͸ఆٛࡁΈͷ࣌ؒͰɺ૿͑ଓ͚Δ஋ɻ ͦͷ··଍͠ࠐΉͱ1Λ௒͑ͪΌ͏ͷͰɺfrac()ؔ਺Ͱ 0.0ʙ1.0ͷൣғʹͳΔΑ͏ௐ੔ɻ
9. Step4 ಈ͔͢ frac(x)ؔ਺͸ɺxͷখ਺෦Λฦؔ͢਺ɻ ͭ·Γ஋Λ0.0ʙ1.0ͷൣғͷ܁Γฦ͠ʹͰ͖Δɻ ͪͳΈʹ͜ͷਤ͸GraphToyͰඳ͍ͯ·͢ɻ ͪΐͬͱࣜΛ֬ೝ͍ͨ࣌͠ʹศརʂ http://www.iquilezles.org/apps/graphtoy/ y=x ͱ y=frac(x) ͷରൺΠϝʔδ
10. Step5 ৭Λ෇͚Δ { ʙ͜ΕҎલ͸লུʙ return fixed4(c, c, c, 1); } { ʙ͜ΕҎલ͸লུʙ fixed4 ret = hsv2rgb(c, 1.0, 1.0); // ผ్ఆٛͯ͠·͢ return ret; } ͜͜·ͰRGB͕શͯಉ͡஋Ͱฦ͍ͯͨ͠ͷͰࠇ͔Βനͷάϥσʔγϣϯͩͬͨɻ HSV͔ΒRGBʹม׵ͯ͠ฦ͢Α͏ʹͯ͠ΈΔɻ hsv2rgb()ͷৄࡉ͸ׂѪɻͦ͏͍͏͕ࣜ͋ΔͬΆ͍ͷΛ͖͚࣋ͬͯͨͩͳΜͰɻ
11. Step5 ৭Λ෇͚Δ HSV৭ۭؒͱ͸ʁ ͳΔ΄ͲɺΑ͘෼͔ΒΜ͕Hͷ஋͚ͩΠδΕ͹ ΧϥϑϧʹͳΔͬΆ͍ɻ
12. Step6 ϙελϦθʔγϣϯ { ʙ͜ΕҎલ͸লུʙ c = floor(c * 6.0) / 6.0; fixed4 ret = hsv2rgb(c, 1.0, 1.0); return ret; } ͋͑ͯ৭ௐΛམͱ͢ͱύΩοͱͯ͠ΠΠΧϯδʹ ͳΔɻ
13. Step6 ϙελϦθʔγϣϯ y=x ͱ y=floor(x * 6.0) / 6.0 ͷରൺΠϝʔδ 0.0ʙ1.0ͷ஋ͷൣғΛɺ0.0ʙ6.0ʹҾ͖৳͹ͯ͠
 floor()Ͱখ਺఺ҎԼ੾Γࣺ͔ͯͯΒ
 ·ͨ0.0ʙ1.0ͷൣғʹ໭͢ɻ ͭ·Γ஋ͷσΟςΟʔϧ͕ݮΔɺΈ͍ͨͳɻ
14. Step7 ฒ΂Δ { float2 pos = i.uv; // 0.0ʙ1.0 ͷൣғΛ 0.0ʙ2.0 ͷൣғʹ্ͨ͠Ͱɺ࠶౓ 0.0ʙ1.0 ʹԡ͠ࠐΊΔ pos.x = frac(pos.x * 2.0); pos.y = frac(pos.y * 2.0); // 0.0ʙ1.0 ͷൣғͷ pos Λ -1.0ʙ1.0 ͷൣғʹͳΔΑ͏ม׵ pos = pos * 2.0 - 1.0; // ԁΛඳ͘ // ҎԼུ }
15. Step7 ฒ΂Δ y=x ͱ y=frac(x * 2.0) ͷରൺΠϝʔδ 0.0ʙ1.0ͷ஋ͷൣғΛɺ0.0ʙ2.0ʹҾ͖৳͹ͯ͠
 frac()Ͱখ਺෦ͷΈऔΓग़͢ɻ
 ͭ·Γ0.0ʙ1.0ͷൣғ͕2ճݱΕΔɻ
16. Step8 ద౰ʹࣜΛ͍͡Δ ͱΓ͍͔͋͑ͣͭ͘ύϥϝʔλΛ͍͡ΕΔΑ͏ʹ ͓͍ͯͯ͠ɺ͜͜·Ͱͷࣜʹద౰ʹ଍ͨ͠Γֻ͚ ͨΓͯ͠ΈΔɻ ਺ֶʹऑ͍ਓ΋ɺԿͱͳ͍ͬͯ͘͡มԽͨ͠΋ͷ ΛݟͯԿނͦ͏ͳͬͨͷ͔ߟ͑ͯΈΔͱษڧʹͳ Δɻͱࢥ͏ɻ
17. Step9 nanoKONTROL2Λങ͏ KORGͷMIDIίϯτϩʔϥʔ https://www.korg.com/jp/products/ computergear/nanokontrol2/
18. nanoKONTROL2ͷ͕͜͜ΠΠʂ • ϚςϦΞϧϓϩύςΟΛෳ਺ಉ࣌ʹ͍ ͡ΕΔʂ • ෺ཧతʹखͰ஋Λૢ࡞͢Δͱָ͍͠ʂ • ਺ֶʹ৮ΕͯΔײʂ • ٬؍తʹεΰΠײ͕ग़Δʂ • Կͱͳ͘ϓϩͬΆ͍ʂ
19. nanoKONTROL2Λ࢖͓͏ʂ ɾࢀߟϦϯΫ MIDIίϯτϩʔϥʔNanoKONTROL2ΛUnityΞφ ϩάೖྗσόΠεͱͯ͠ར༻͢Δ http://psychic-vr-lab.com/blog/unity/ midi%E3%82%B3%E3%83%B3%E3%83%88%E 3%83%AD%E3%83%BC%E3%83%A9%E3%83 %BCnanokontrol2%E3%82%92unity%E3%82%A 2%E3%83%8A%E3%83%AD%E3%82%B0%E5% 85%A5%E5%8A%9B%E3%83%87%E3%83%90 %E3%82%A4%E3%82%B9%E3%81%A8/
20. Enjoy Shader!!