Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebXR TechTokyo #0 in Cluster発表資料

829 views

Published on

Babylon.js EditorでWebXR (VR) コンテンツを作る方法です。

Published in: Technology
  • Be the first to comment

WebXR TechTokyo #0 in Cluster発表資料

  1. 1. 2020/4/27 WebXR Tech Tokyo #0 @Cluster Limes (@WheetTweet) Babylon.js Editorを使った WebXRアプリの開発⽅法
  2. 2. ⾃⼰紹介 ■ 産業向けXR適⽤を進めている社会⼈ ■ 2013年よりVR系の活動開始。2014年頃より、⼦育 てで外向き活動削減。少しずつ再開中。Unityだけで なく、システム構成に関わる技術全体に興味あり ■ Microsoft MVP (Unity :2016/10-2018/7) ■ (Windows Mixed Reality :2018/7-) ■ Blog : Cross Road ■ https://www.crossroad-tech.com/
  3. 3. 本⽇の概要 ■ WebXRのうち、とくにVRに絞ってお話 ■ ほぼGUI操作でWebXR (VR) コンテンツを作る⽅法
  4. 4. WebXR(VR)コンテンツ開発⽅法の例 https://unity.com/ https://www.unrealengine.com/ https://www.youtube.com/channel/UCm1ec-SgYpZO_4dCE_7h48g/featured https://aframe.io/ https://facebook.github.io/react-360/ https://threejs.org/ https://developers.google.com/vr/develop/web/vrview-web https://blogs.windows.com/windowsdeveloper/2019/04/30/babylon-js-4-0-is-here/#zTvCK8y8mgMsDQHv.97
  5. 5. babylon.jsとは︖ ■ Webブラウザで3DCGを描画するためのフレームワーク ■ PBRが使えるなど、表現⼒が⾼い ■ WebXRへの対応が進んでいる (1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/open (2)https://www.babylonjs.com/ (3) https://www.davrous.com/2017/07/07/from-zero-to-hero-creating- webvr-experiences-with-babylon-js-on-all-platforms/ (1) (2) (3)
  6. 6. babylon.js での開発⽅法 テキストエディタでコードを書く babylon.js Editor を使う
  7. 7. Babylon.js Editorとは︖ ■ Unityに似た開発ツール – オブジェクトにスクリプトをアタッチ – Particle、マテリアルをGUIで制御 – Play and Stop、デバッグ. etc.. ■ VR機能は標準ではないが、簡単に導⼊可能 ■ 導⼊⼿順はこちら https://doc.babylonjs.com/resources/getting_started
  8. 8. EditorでVRコンテンツを作るには︖ 1. NEW Scriptでスクリプトを作成 2. Start()関数に、VR⽤のコードを1⾏追記 3. Play!
  9. 9. Editorからpublishする ■ 「Export Project Templete」を選択 ビルドして (⼿順説明あり)、サーバに置けばコンテンツ完成︕
  10. 10. Editorで作ったコンテンツを⽤意しました。 ■ ⾬の中 (Particle System) で暖炉 (Partcile System) を⾒るだけの コンテンツです。 ■ 床の反射はPBR (Physical Based Rendering) が効いています。 https://flushpot1125.github.io/rainyroom-demo/ 選択すると VRモードに切替
  11. 11. 動画を再⽣して終わります

×