WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!

Transcript

1. WebXRで
   ポートフォリオを作ろう!
   2022-08-03 福岡XR部 @dojineko
   

   View Slide

2. どじねこ @dojineko
   GMOペパボ / よろず屋
   

   View Slide

3. 今回お話する内容
   

   View Slide

4. View Slide

5. これをやった話です
   https://xr.dojineko.dev
   

   View Slide

6. もくじ
   ➔ なんでXR？
   ➔ 使ったもの紹介
   ➔ 完走した感想
   

   View Slide

7. なんでXR？
   ● 普通にWebサイトでポートフォリオを作るとページになる
   ● 最近は個人的にVR的な活動をしてることが多い
   ○ せっかくならそういう要素を盛り込みたい！
   ■ VRChatやClusterもいいけど、
   もっと気軽に見れるようにしたい！
   ● ・・・いっちょやってみっか〜！
   

   View Slide

8. 使ったもの紹介
   

   View Slide

9. ● モデリング: Blender
   ● フレームワーク: A-Frame
   ● ブラウザ: Google Chrome
   (…これだけ！)
   使ったもの紹介
   

   View Slide

10. View Slide

11. View Slide

12. 簡単な紹介動画をYouTubeにあげてます
    https://www.youtube.com/watch?v=X7hSph7Uk6c
    

    View Slide

13. 完走した感想
    

    View Slide

14. 完走した感想
    ● Blenderをﾁｮｯﾄﾃﾞｷﾙ状態だったので作りたいものはすぐ作れた！
    ● A-Frameは初めてだったけどBlednerからgLTFで出力したモデルを
    すぐ取り込めて表示できた！
    ○ 初めてでもすぐにできる手軽さが超魅力！
    ○ ImageTrackingもできるし、VRモードにもすぐ対応できる！
    ● 一方で難しい点も
    ○ ES ModulesなJavaScriptを使っておうとすると苦労する
    ○ 細かいことをしたいなら Three.js か Babylon.js も手の１つ
    

    View Slide

15. バーチャルでも表現しよう！
    

    View Slide

16. View Slide