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

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

dojineko
August 03, 2022

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

dojineko

August 03, 2022
Tweet

More Decks by dojineko

Other Decks in Technology

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 も手の1つ

    View Slide

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

    View Slide

  16. View Slide