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

はじめてのBabylon.js

NewD
July 10, 2022

 はじめてのBabylon.js

NewD

July 10, 2022
Tweet

More Decks by NewD

Other Decks in How-to & DIY

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