CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.jsv4.2のリリースに合わせて公式ドキュメントが大幅アップデートされているので解説します

2020/11/12にBabylon.jsがv4.2に上がりました。これからはCDNなどで使うときはBabylon.jsはv4.2になります。 Today we are incredibly proud to introduce the latest evolution of the Babylon Platform, the amazingly #simple Babylon.js 4.2https://t.co…

WebXR対応のbabylon.jsでVRアプリを開発するときのTipsやサンプルコード

以前WebXRの書き方でbabylon.jsでARを試した例をまとめたことがあります。 www.crossroad-tech.com 今回は、Oculus Quest2が届いたこともあり、VRを試してみました。検証に使ったPlayGroundのbabylon.jsのバージョンは、4.2.0-beta17です。 1. WebXRとは? 2…

An introduction of a powerful development tool for Web applications: Babylon.js Editor

There are a lot of methods for developing 3DCG based applications. Unity and Unreal Engine are good tools for applications on Windows, MacOS, Linux, iOS, Android and so on. three.js and a-frame are also useful frameworks on web application…

Babylon.js Editor v4.0でGSAPのアニメーション表現を試してみました

偶然見つけた下記のサイトで、WebGLのアニメーションができることを知りました。 ics.media このサイトではThree.jsを使った例を紹介しているのですが、Babylon.jsでも動かすことができます。今回は最近紹介しているBabylon.js Editor v4.0を使って動かして…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.6(サーバに格納して実行)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.5(得点加算、ライフ変更、テキスト表示)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、ブロックを崩したときにス…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.4(GUIの追加)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、ブロックに当てた数、ライフの数を表示させるGUI関…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.3(衝突判定)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com 今回は、飛ばしたボールがブロックとぶつかったとき、ブロックが消えるまでを作りま…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.1(ステージ作成、操作)

前回紹介したBabylon.js Editorは最低限の使い方以外は情報がありません。そこで、簡単なゲームを作りながら使い方を調べることにしました。 作るゲームはブロック崩しです。今回はステージ作成とキーボード操作について解説します。 使用した環境 ・Mac OS …

【2020/10/4追記】UnityのようにBabylon.jsコンテンツが作れる「Babylon.js Editor」が大幅アップデートしていたので使い方を調べてみました

以前何度か紹介したBabylon.js Editorですが、GitHubリポジトリをみたら、見た目や操作方法が大きく変わっていました。 このアップデートにより、操作感がかなりUnityに近づきました。Unityに近い使い方でWebコンテンツを作れるとJavaScriptに不慣れな人でも…

Build2020で紹介されたBabylon.js (TypeScript) 製ミニゲーム「SnakeVR」のソースコードを調べてみました

先月、米国Microsoftによるテクニカルカンファレンス「Build2020」がオンライン開催されました。 この中では、Babylon.jsを使って簡単なゲームを作る方法の講演がありました。Babylon.jsでゲームを作る方法についてはあまり情報がないのと、この講演自体が英…

Babylon.jsを使ってWebXRのARモードを試す方法

このブログで時々紹介しているBabylon.jsについてネットや公式フォーラムで調べると、2D画面上での表現、あるいはVRモードの使用例がほとんどです。一方、あまり知られていませんが、WebXRにも対応していてARも使えます。 そこで、今回はBabylon.jsのWebXR対…

Babylon.jsのパーティクルをGUIで設定できるParticle Editorを使って、いくつかエフェクトをつくってみました

Babylon.jsにParticle Editorという仕組みができたので、いろいろと試してみました。 以下の環境で確認しています。 Babylon.js 4.2.0-alpha.17 1. Particle Editorとは? 2. Particle Editorを使うための準備 2.1 PlaygroundからInspectorを起動して使う 2.…

【2020/10/24webpackエラーについて追記】ES6以降の仕様でBabylon.jsのコードを記述する方法について

JavaScriptは、ECMAという言語仕様のバージョンによって書き方が変わります。いろいろ調べたところ、2015年に策定されたES2015 (ES6) で大きく変化し、Mozilla Hubsなど、JavaScriptのOSSの多くはES6以降の仕様で書かれている印象です。 一方、Babylon.js公…

Noodlで任意の3Dモデルを表示させる方法をまとめました

これは Noodl Advent Calendar 2019 の14日目の投稿です。昨日は@kmaepuさんのラズパイとNoodlでデジタルサイネージを作った話でした。 本日は、Noodlで3DCGモデルを表示する方法やTipsを紹介します。 なお、Noodlの基本的な内容を確認したい場合、たとえば…

PWAでWebXRアプリをオフラインで使うための方法

これは PWA Advent Calendar 2019の3日目の投稿です。昨日は@dryttさんの初学者目線でみるPWAでした。 本日は、PWAとBabylon.jsで作ったWebXRアプリをオフラインで使う方法を説明します。 1. 前提 1.1 Babylon.jsとは? 1.2 PWAとは? 2. オフラインに対応し…

プロトタイピングツール「Noodl」でBabylon.jsを表示させる手順について

前回の記事では、Noodlの概要を紹介しました。 www.crossroad-tech.com Noodlはノードをつなげてプロトタイピングするツールですが、javascriptを自分で書いたり、インターネットで提供されているjavascriptソースを読み込んで使うこともできます。 今回はBa…

【暫定版】BabylonjsベースのWebXRコンテンツをオフラインのOculus Questで動かす方法

前回、PWAを使ってBabylon.jsで作られたWebサイトをアプリのようにする方法をまとめました。 www.crossroad-tech.com PWA(Progressive Web App)の特徴の1つにオフライン動作というのがあります。うまく使えればWebXRアプリをネットワーク接続不要で動作でき…

Babylon.jsで動くサイトをPWA化する手順について

Babylon.jsを使ってOculus Quest向けのアプリを作ろうとすると、ネットワーク接続が必須になります。そのため、自宅以外では動作確認がしづらくなります。 そこで、Progressive Web App(PWA)で解決ができないかを調べることにしました。 PWAをうまく使うと、…

Babylon.jsでOculus Questのコントローラを使ってオブジェクトを移動させる方法

Babylon.jsはWebVRコンテンツを作る仕組みが色々と揃っていますが、コントローラでオブジェクトを移動させる機能は入っていません。 そこで、Babylon.jsのメソッドを利用して作りました。今回は作り方を紹介します。 1. Babylon.jsにはコントローラのrayが当…

Babylon.jsでglb形式の建物モデルを読み込み、Oculus Questでテレポート移動させる方法

Babylon.jsでOculus Questのコントローラ入力の方法がわかってきたので、今度はテレポート移動を試してみました。 このようになります。 今回はこのテレポート移動を実現するための方法だけでなく、表示した博物館のモデルを読み込む手順も書きました。 1. …

Babylon.jsでOculus Questコントローラの入力を取る方法

Babylon.jsを使ってOculus Questのコントローラ周りを色々と調べています。 コントローラの表示はできても、各ボタンの入力を取るための具体的な方法が見つからなかったので、まとめてみました。 1. コントローラの表示はOculus Touchだが、全ボタンの入力を…

Babylon.jsをビルドしてローカル環境を作り、他の端末からアクセスする方法

Babylon.jsは、通常CDN(Contents Delivery Network)を使うなどして、必要なjavascriptを呼ぶだけで使うことができます。 しかし、それだとBabylon.jsそのものに変更を加えることができません。 今回はBabylon.js自体をビルドし、その結果を実行する方法を解…

【2019/6/26 更新】Babylon.jsでOculus Questのコントローラを任意のモデルに変更する方法

2019/6/26 追記 デフォルトのTouchコントローラのモデルが残ってしまう問題の解決方法を追記しました。 Babylon.jsでVRコンテンツを作り、VRヘッドセットでアクセスすると、コントローラもVR空間に表示されます。 ただし、5月に発売したばかりのOculus Quest…

Babylon.jsで360度画像を回転させる方法

以前、Babylon.jsのWebVR機能について書いたとき、360度画像をみられる"photoDome"という機能を少しだけ紹介しました。 Babylon.jsのWebVRモードと通常モードを切り替える方法 - CrossRoad 今回、このような問い合わせがありました。 @WheetTweet はじめまし…

VRMとアニメーションで勘違いしていたことを整理しました

前回、VRM形式のキャラクタモデルをWebブラウザで表示させる方法を解説しました。 【2019/7/21更新】Babylon.jsでVRMモデルを読み込み、Oculus Questで表示させるまでの手順をまとめました - CrossRoad これはアニメーションを入れていないので当然ですが止…

【2019/7/21更新】Babylon.jsでVRMモデルを読み込み、Oculus Questで表示させるまでの手順をまとめました

最近、vrmという規格に興味があって調べていたところ、株式会社バーチャルキャストがBabylon.jsに対応したbabylon-vrm-loaderを公開したことを知りました。 VRM は Unity 専用じゃない!ブラウザで VRM 表示出来るものを作りました! | VirtualCast Blog Git…

Oculus GoでBabylon.jsを使ったときに、没入型と通常VRモードを切り替える方法

前回、PCのような2Dスクリーンで、Babylon.jsのVRモードと通常表示をキーボードで切り替える方法を紹介しました。 Babylon.jsのWebVRモードと通常モードを切り替える方法 - CrossRoad これだとVRヘッドセットを使うときもキーボード接続が必要になります。そ…

Babylon.jsのWebVRモードと通常モードを切り替える方法

English version is here How to switching mode between WebVR and 2D view in Babylon.js - CrossRoad Babylon.jsを使うと、以前紹介したようにWebVRコンテンツも開発できます。 Babylon.jsでWindows Mixed Realityヘッドセットのアプリを作る方法 - Cross…

Babylon.jsとDayDreamを使って、ChromeのWebVR機能を使うためのTipsについて

以前、Babylon.jsのWebVRについて調べたことがあります。 Babylon.jsでWindows Mixed Realityヘッドセットのアプリを作る方法 - CrossRoad そのときはWindows Mixed Realityヘッドセットを使いましたが、今回はモバイルVRであるDayDreamで試しました。結果、…