CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

プロトタイピングツール「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で試しました。結果、…

meshをParticleにしたときのFPS変化をBabylon.jsとUnity WebGLで比較しました

Unityをはじめ、CG系の開発環境にはParticle Systemがあります。炎、雷などの綺麗なグラフィック表現には必須の機能です。 Babylon.jsにもParticle Systemがあります。試したところ思ったよりも負荷が少ない感じでした。一方、UnityはWebGL書き出しが可能で…

.babylonファイルを読み込んでNode.jsサーバで実行する方法

Babylon.jsには3Dモデルの配置や、テクスチャのマッピング情報などをまとめた「.babylon」というファイル形式があります。 今回は.babylonファイルをWebブラウザで表示するまでの流れを書きました。基本的ではありますが、私のようなWeb初心者にとっては、任…

Babylon.js Editorでシーンを出力し、ブラウザで実行する方法

前回までの記事で、Babylon.js Editorで魔法剣エフェクトを作る方法を紹介してきました。 SwordモデルにPBR(Physical Based Rendering)をつける方法 【2018/12/16更新】UnityのようなGUIでWebGLコンテンツが作れるBabylon.js Editorの基本的な使い方 - Cross…

Babylon.jsでWindows Mixed Realityヘッドセットのアプリを作る方法

これはHoloLens Advent Calendar 2018の12日目です。前回はZuQ9Nnさんの『Mixed Realty Tookit Unity vNext2018を利用し、Air TapでCubeを落とすHoloLensアプリを作ってみた』でした。 今回はBabylon.jsをWindows Mixed Reality Headsetで使う方法を紹介しま…

Babylon.js Editorでスクリプトからオブジェクトを制御する方法

Babylon.js EditorはGUIベースでオブジェクトの配置ができます。また、スクリプトを追加してソースコードでも制御できます。 しかし、公式HPにはごく簡単な例しか書いてなかったので、今回はスクリプト制御したときに使いたい例をいくつか紹介します。 1. ス…

Babylon.js EditorのParticle Systemを使って魔法剣エフェクトを作りました

前回はBabylon.js(BJS) Editorの基本的な使い方を説明しながら、swordモデルにPBR(Physical Based Rendering)をつける方法を紹介しました。 今回は、Editorに入っているParticle Systemの紹介と、swordモデルにエフェクトを追加する方法を紹介します。 1. Pa…

【2018/12/16更新】UnityのようなGUIでWebGLコンテンツが作れるBabylon.js Editorの基本的な使い方

2018/12/3 Particle Systemによる魔法剣エフェクトと、プロジェクトの保存方法を追加しました 2018/12/9 スクリプト制御方法を追加しました 2018/12/16 ブラウザから実行する方法を追加し、タイトルをEditorの使い方に変更しました これまでBablon.jsについ…

Blenderでロボットにボーンとモーションをつけて、Babylon.jsで再生させる方法

今回はBabylon.jsで3Dモデルにアニメーションをつけて再生させてみました。Babylon.jsだけでもオブジェクトの移動(UnityでiTweenを使うようなイメージ)はできますが、ボーンを埋め込んだモーションの実現をソースコードだけで作るのは大変そうです。Babylon.…

【2019/3/5更新】Babylon.jsを使った開発方法が色々あるので整理しました

2018/11/5 Babylon.js Editorの実行ファイルの取得先を追記しました最近、WebブラウザでもVRアプリが実行できるBabylon.jsについて調べていますが、日本語の情報が少ないのが現状です。例:2018/8/19現在、Googleで言語設定を日本語にして「Babylon.js」を調…

Babylon.jsでナイトプールを作って、Unityとの作りやすさを整理しました

以前、UnityのShaderの勉強のため、ナイトプールのような風景を作ったことがあります。【Unityアセットアドカレ】Shader Forgeでナイトプールを作ろう! - CrossRoad今回、Babylon.jsの勉強を兼ねて、前に作ったものに似せたナイトプールを作って、Unityで作…

UnityからエクスポートしたBabylon.jsデータの制御方法

前回、UnityからエクスポートしたデータをBabylon.jsで表示したときの調査について解説しました。今回は、エクスポートしたデータをBabylon.jsの仕組みで使う方法を解説します。 1. Unityでエクスポートしたデータ「.babylon」の形式 2. babylonファイルの読…

Babylon Tool KitによるUnityプロジェクトの変換検証

前回、Webベースの3DCGライブラリ「Babylon.js」と、Unityプロジェクトを変換する手順について解説しました。Babylon.js向けデータをUnityから出力する - CrossRoad今回は、変換できるもの、できないものを簡単に整理しました。なお、検証環境は以下の通りで…

Babylon.js向けデータをUnityから出力する

ブログのタイトル通り、私が勉強の対象にしているのはUnityですが、周辺技術や関連分野についても調べることがあります。過去に調べた例 Unity使いから見た、LumberyardとUnityの違い - CrossRoad XCodeでiOSアプリをつくるときに調べた、UnityとXCodeの違い…