More Related Content
Similar to Babylon.js EditorでWebXRコンテンツを開発するときのプレビュー確認機能について (20)
More from WheetTweet (20)
Babylon.js EditorでWebXRコンテンツを開発するときのプレビュー確認機能について
- 3. 3
Babylon.jsとは
• Webブラウザで3DCGを描画するためのフレームワーク
• Graph Editorにより、ローコード開発も可能
• WebXRへの対応が進んでいる
(1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/op
en
(2) https://doc.babylonjs.com/resources/using_grapheditor#list-of-
all-available-nodes
(3) https://www.davrous.com/2017/07/07/from-zero-to-hero-
creating-webvr-experiences-with-babylon-js-on-all-platforms/
(1) (2) (3)
- 8. Babylon.jsでWebXRコンテンツを開発するときの注意点 8
・https対応のページであることが必要
メリット デメリット
GitHub pagesを利⽤ GitHubにソースコードを公開すれ
ば、https対応のページが使える
ソースコードを公開したくないと
きは使いづらい
Playgroundを利⽤ ソースコードを公開すればhttps対
応のページが使える
同上
⾃分でコードを書いて
ローカルサーバに⽴てる
プライベート環境で検証できる httpsを使うための秘密鍵と認証局
の証明書が必要(オレオレ可)
Playground : Babylon.js専⽤の動作検証サイト。CodePenのようなもの
誰でも閲覧、更新できて公式Docmentationの検索対象になる
Babylon.js Playground (babylonjs.com)
- 10. Babylon.js Editor のhttps対応サーバ機能 10
Editorの開発者の⽅と相談して要件や画⾯遷移を決めまし
た。
最終的にEditorの変更が⼤きいということで、コーディン
グのほとんどは開発者の⽅に対応いただきました。。
(まだ正式リリースされていません。スライド末尾に
Githubからの⼊⼿、環境構築⽅法を記載しています)
アプリの画⾯デザインを簡単に作るためのAdobeXDのTipsについて - CrossRoad
(crossroad-tech.com)
- 15. 15
drumath2237/babylonjs-editor-webxr-app: trials to develop WebXR App in BabylonJs Editor
(github.com)
httpsサーバ対応機能を試したい場合、Babylon.js EditorのGitHubから
4.0.0-rc.3のソースコード⼀式をダウンロードし、ビルドしてElectron形
式の実⾏ファイルを⽣成する必要があります。
参考情報
テンプレートサイト作成の参考にさせていただきました。
Babylon.js EditorでWebXRコンテンツを開発し、Github pagesに
⾃動アップロードできるサンプルコード (にー兄さん提供)
Tags · BabylonJS/Editor (github.com)
ソースコード置き場所
$ node ./script/install.js
$ npm run build
→electron-packagesフォルダ以下に実⾏ファイルが⽣
成される