はじめてのBabylon.js

Transcript

1. 2022/7/8 Babylon.jsゆるほめLT会
   ͸͡ΊͯͷBabylon.js
   1
   NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ
   - The Very First StepΛਐΊͯΈͨ
   

   View Slide

2. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/6 Babylon.js 勉強会 vol.1を視聴する まで 2
   ITΤϯδχΞͷํʑ
   OTͷΤϯδχΞͷํʑ
   

   (Operational Technology)
   2020೥
   ●x◆ʂˈʁ
   
   
   ▶︎ ■□ xˍˋ
   ʁʁ
   python
   IoT
   ిࢠ޻࡞
   JavaScript
   3DϓϦϯλ
   ഑৴
   Adobe/3D
   ಈը/Ξχϝʔγϣϯ
   3DCG
   2021೥
   Blender A-Frame
   New Directions
   PlayCanvas
   AR.js Studio
   Unity
   2022೥
   ●x◆ʂˈʁ
   
   
   ▶︎ ■□ xˍˋ
   WebAR
   C#
   Babylon.js ʁʁ
   Babylon.js 勉強会 vol.1
   

   View Slide

3. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）から読み始める
   ▸ 1-01 : ϋϩʔϫʔϧυʂ࠷ॳͷγʔϯͱϞσϧ
   3
   #BCZMPOKTެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁
   ༁஫ʣʂʹ΋ֶͼ͕͋Δ
   

   View Slide

4. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-03：モデルを扱う まで頑張って読む
   1-03ɿ༁஫ʣʂͰߦ͖٧·Δ
   ▸ JavaScript Ͱͷඇಉظॲཧͱ Promise पΓͷ஌ࣝʁ
   4
   ϞσϧΛѻ͏
   

   View Slide

5. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）まで戻る
   ݱ৔100ว - ߦ͖٧·ͬͨΒݱ৔ʹ໭Δ
   ▸ 1-00ɿ࠷ॳʢFirstsʣ·Ͱ໭ͬͯΈΔ
   5
   #BCZMPOKTެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁
   

   View Slide

6. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）まで戻る
   ”͜ͷϖʔδͷݪจ ” ʹؾͮ͘
   ▸ →ϦϯΫΛ౿ΜͰΈΔ
   6
   #BCZMPOKTެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁
   

   View Slide

7. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 「最初（Firsts）」の更に前があることに気づく　→Your Journey Starts Here
   ཱྀͷ࢝·Γ͸΋ͬͱલʹ͋ͬͨ
   ▸ Your Journey Starts Here
   7
   Your Journey Starts Here
   https://doc.babylonjs.com/journey
   

   View Slide

8. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 こっちが本当の最初　Your Journey Starts Here＞The Very First Step
   ͍͖ͳΓ(FUUJOH4UBSUFE͸ૣ͗ͨ͢
   ▸ The Very First StepΛਐΊͯΈΔ
   8
   The Very First Step
   

   View Slide

9. 2022/7/8 Babylon.jsゆるほめLT会
   2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
   ్த·Ͱ݁ߏαΫαΫ
   ▸ ফͯ͠ɺ੺ͯ͘͠ɺνΣοΫʹͳͬͨ
   9
   Your First Creation
   https://doc.babylonjs.com/journey/
   

   theFirstStep#your-
   fi
   rst-creation
   

   View Slide

10. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ߦ͖٧·ͬͨ৔߹Ͱ΋
    ▸ ֤࡞ۀ͝ͱͷมԽΛ ϓϨΠάϥ΢ϯυͷϦϯΫ͔Β
    ผλϒͰࢀর͠ͳ͕ΒਐΊΔ͜ͱ͕Ͱ͖Δ
    10
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    Your First Creation
    

    View Slide

11. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ςϯϓϨʔτͷग़͠ํ͕͔͍͍ͬ͜
    ▸ CTRL+SPACEͰϘϯʂ
    11
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    これから
    
    
    イエティを呼びます
    

    View Slide

12. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ςϯϓϨʔτͷग़͠ํ͕͔͍͍ͬ͜
    ▸ ख࣋ͪͷMacBookͰ΋ fn + control + spaceͰͨ͠
    12
    Introducing Playground
    Templates
    @Babylonjs YouTube
    最初はWindowsPCで
    
    
    やりました
    

    View Slide

13. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ςϯϓϨʔτΛॻ͖׵͑ͯαΫαΫ
    ▸ .gltf ΦϒδΣΫτΛঌשͯ͠αΠζௐ੔ɻ
    13
    Your First Creation
    アニメーション付き
    
    
    .gltfオブジェクト
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

14. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ͪͳΈʹαΠζௐ੔͢Δલͷେ͖͞
    ▸ .gltf ΦϒδΣΫτΛঌשɻ
    14
    Your First Creation
    手順1.2.3をやって4.を飛ばして
    
    
    5.シーンを更新してみた場合
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

15. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ࣍ʹγʔϯΛΠϯλϥΫςΟϒʹ͍ͨͦ͠͏Ͱ͕͢
    ▸ ࠓͷঢ়ଶͰ΋Ϛ΢εͰάϦάϦˍΧʔιϧͰҠಈͰ͖
    Δ͚Ͳɺ͜Ε͸ΠϯλϥΫςΟϒͱ͸ݴΘͳ͍ͷʁʁ
    15
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

16. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ࣍ʹγʔϯΛΠϯλϥΫςΟϒʹ͍ͨͦ͠͏Ͱ͕͢
    16
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    ▸ ʲଟ෼ʳࠓͷঢ়ଶ͸ɺVector3 (0, 5, -10)ʹஔ͍ͨ
    FreeCamera͔Βݪ఺ ( Vector3.Zero() )Λݟ͍ͯΔʁ
    

    View Slide

17. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ϋϸϜϱ⑲ύớᠭͩ͸"SD3PUBUF$BNFSBΤᑿ͘
    ▸ Arc Rotate Camera͸͜ͷஈ֊ͳΒDegreesͰ΋
    RadiansͰ΋ͲͪΒͰ΋ྑ͍ͷ͔ͳʁ
    17
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

18. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ิ଍
    ▸ Ծ૝ੈքΛදࣔͯ͠ૢ࡞͢Δʹ͸ɺΧϝϥΛΩϟϯ
    όεʹΞλον͢Δඞཁ͕͋Γ·͢ɻ
    

    λʔήοτͷपΓʹճసͤ͞Δ͜ͱͷͰ͖Δ
    BABYLON.ArcRotateCameraͷλΠϓͷΧϝϥΛ௥
    Ճ͠·͠ΐ͏ɻ
    18
    γʔϯΛ४උ͢Δ

    ˏBabylonJSΛ࢖༻ͨ͠
    VR Hello World
    

    View Slide

19. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ϋϸϜϱ⑲ύớᠭͩ͸"SD3PUBUF$BNFSBΤᑿ͘
    ▸ Arc Rotate Camera͸͜ͷஈ֊ͳΒDegreesͰ΋
    RadiansͰ΋ͲͪΒͰ΋ྑ͍ͷ͔ͳʁ - DegreesͰɻ
    19
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

20. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation
    ΠϯλϥΫγϣϯ͕ՃΘͬͨΒ͍͠
    ▸ ՃΘΔલͷಈ͖ɹ ɹͱɹ ɹՃΘͬͨޙͷಈ͖
    20
    Your First Creation
    https://doc.babylonjs.com/journey/
    

    theFirstStep#your-
    fi
    rst-creation
    

    View Slide

21. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞The .html File
    IUNMϑΝΠϧΛμ΢ϯϩʔυ
    ▸ μ΢ϯϩʔυͨ͠ϑΝΠϧΛϗεςΟϯά͍ͨ͠ɾɾɹɹ
    21
    The .html File
    ファイルがzipだったからと言って
    
    
    そのままアップロードするものではないらしい。
    

    View Slide

22. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 Your Journey Starts Here＞The Very First Step＞Hosting Your Babylon Project
    4ճ໨ͷਖ਼௚
    ▸ 3ճࣦഊͯ͠ɺͦͷ౓ʹ First ͕૿͚͑ͨͲͰ͖ͨʂ
    22
    Hosting Your Babylon
    Project
    

    View Slide

23. 2022/7/8 Babylon.jsゆるほめLT会
    2022/5/19 GitHub
    4ճ໨ͷਖ਼௚
    ▸ ࣦഊͨ͠ͷ͸ޙͰ࡟আ͍ͨ͠
    23
    GitHuB
    https://a2k3ine.github.io/
    

    myFirstBabylon/
    

    View Slide

24. 2022/7/8 Babylon.jsゆるほめLT会
    ؤுͬͨɻ
    24
    2022/5/19 GitHub
    

    View Slide

25. 2022/7/8 Babylon.jsゆるほめLT会
    ͸͡ΊͯͷBabylon.js
    25
    NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide