CrossRoad

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

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

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

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

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

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/9更新】UnityのようなGUIでWebGLコンテンツが作れるBabylon.js EditorでPBRを試してみた - 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の違い…