WebGLとThree.jsで遊ぼう フロントエンド勉強会#09

Transcript

1. 8FC(-ͱ5ISFFKTͰ༡΅͏  
   ϑϩϯτΤϯυ-5ձ
2. ΊͪΌͪ͘ΌΧοί͍͍αΠτɺ ͭ͘Γͨ͘ͳ͍ʁ
3. ϒϥ΢βͰͷ 
 άϥϑΟοΫදݱͳΒɺ 8FC(-
4. 8FC(-ͱ͸ʁ
5. WebGLͱ͸ʁ 8FC(-ͱ͸ɺ 8FC
   (SBQIJDT
   -JCSBSZͷུɻ 
 ϒϥ΢βͰ%άϥϑΟοΫε΍%άϥϑΟοΫεΛϨϯμϦϯά ͢ΔͨΊͷ+BWB4DSJQU
   "1*ɻ
6. w DBOWBTཁૉʹඳը͢Δ
   w *&ؚΊɺҰൠతͳϞμϯϒϥ΢βͰαϙʔτ͞Ε͍ͯΔ
   w %ϞσϧͷදࣔɺΠϯλϥΫςΟϒͳάϥϑΟοΫεͷඳըͳͲ
   w (16Λ࢖ͬͨߴ଎ͳϨϯμϦϯά͕Մೳ WebGLͱ͸ʁ ΋͏ͪΐͬͱઆ໌ const canvas = document.getElementById('myCanvas'); const gl = canvas.getContext('webgl');
7. ͦ͜Ͱɺ5ISFFKT ͨͩɺͪΐͬͱ೉͍͠ʝ ˠ
   ࠲ඪม׵ ࣍ݩ࠲ඪΛ࣍ݩ࠲ඪʹม׵ ͢Δ࢓૊ΈΛ
   
   
   
   
   
   
   
   
   
   ɹ ɹ
   ͍࣋ͬͯͳ͔ͬͨΓͱ͔ʝ WebGLͱ͸ʁ
8. 5ISFFKTͱ͸ʁ
9. Three.jsͱ͸ʁ 5ISFFKTͱ͸ɺ 8FC(-Λ؆୯ʹ࢖͑ΔΑ͏ʹͯ͘͠Εͯɺૉͷ8FC(-Λ৮ΔΑΓ ͔ͳΓָʹຊ֨తͳ%ඳըΛՄೳʹͯ͘͠ΕΔϥΠϒϥϦɻ
10. w ࣮͸ܰྔͳϥΠϒϥϦ ,#
    w ശܕ΍ٿɺυʔφπܕ΍ԁਲ਼ɺจࣈ΍ଟ֯ܗͳͲͷجຊతͳܗঢ়͸σϑΥϧ τͰଘࡏ͢Δ
    ‎جຊతͳܗঢ়͚ͩͳΒࣗ෼Ͱ%ϞσϦϯάͨ͠Γर͖ͬͯͨΓ͢Δඞཁ͸ ͳ͍
    w ӳޠʹ͸ͳΔ͕ɺެࣜͷαϯϓϧɾυΩϡϝϯτ͕ॆ࣮ͯ͠Δײ͡ͳͷͰֶ श͠΍͍͢
    w 8FC(-Λ௚Ͱ৮Δͷͱൺ΂Δͱָ͘͢͝ Three.jsͱ͸ʁ 5ISFFKTͷಛ௃
11. ൺֱత؆୯ʹ 
 %Ϟσϧͱ͔࢖ͬͯ 
 Χοί͍͍ͷΛ࡞ΕΔɻ ཁ͢Δʹʝ
12. ͱΓ͋͑ͣಈ͔ͯ͠ΈΔ
13. ͍ΖΜͳ࡞ྫΛݟͯΈΔ
14. 5ISFFKTͷެ͚ࣜͩͰ΋αϯϓϧ 
 ΊͪΌͪ͘Ό͋Δɻ ͍ΖΜͳ࡞ྫΛݟͯΈΔ
15. αϯϓϧ͕ݟΒΕΔαΠτ w IUUQTUISFFKTPSHFYBNQMFT
    5ISFFKTެࣜ
    w IUUQTBMUFSFERVBMJBDPN
    Իָͱ߹Θ͍ͤͯΔ΋ͷ΋͋ͬͨΓָ͍͠
    w IUUQTXXXBXXXBSETDPNBXXXBSETDPMMFDUJPOTXFCHM 
 8FC(-͕࢖ΘΕ͍ͯΔ͍͍ײ͡ͷαΠτͷ঺հ ͍ΖΜͳ࡞ྫΛݟͯΈΔ
16. ࣮ࡍͲΜͳͱ͖ʹ࢖͑Δͷ͔ʁ
17. w αΠτͷΩʔϏδϡΞϧ
    ‣ IUUQTIPNVODVMVTKQBCPVU
    ‣ IUUQTXXXXBOOBCFUPZT
    w ήʔϜ࡞੒
    
    
    ‣ IUUQIFYHMCLDPSFDPNQMBZ
    w Ξʔτ
    ‣ IUUQTQBWFMEPHSFBUHJUIVCJP8FC(-'MVJE4JNVMBUJPO
    w 73ʢ93ʣ ࣮ࡍͲΜͳͱ͖ʹ࢖͑Δͷ͔ʁ
18. ࠷ޙʹ
19. 5ISFFKTษڧͯ͠Χοί͍͍ͷ 

    ࡞Γ͍ͨʂ ݸਓతͳ໨ඪ
    
20. Έͳ͞Μ΋ശΛ͘Δ͘Δͤͯ͞ ΈΔͱ͜Ζ͔Βʂ
21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ