CrossRoad

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

Babylon.jsでアニメーションの任意のフレームを検知して処理を作る方法

Babylon.jsにはアニメーションを実現する仕組みがあります。ソースコードでキーフレーム別に座標を書いてもよいし、Blenderなど別のツールで作ったアニメーションを再生させることもできます。 今回は後者のように、別のツールで作ったアニメーションの任意…

Babylon.jsのTrail Meshを使ってきれいな軌跡を描く方法

Babylon.jsにはTrailMeshという機能があります。これを使うと、何かが動いた時の軌跡を表示できます。 しかしTrailMesh単独で使うだけだと、見た目があまりきれいではありませんでした。(やり方次第かもしれませんが) 今回はGlow Layerという別の機能と組み…

Babylon.js Editor v4.2.0でキャラクタが炎の魔法剣を振るモーションを作る方法

以前からBabylon.jsでキャラクタを動かす方法を色々と調べています。特に理由はないのですがキャラクタを動かす方法を調べていく中で、ダイの大冒険6巻で登場した「火炎大地斬」を再現してみようと思って、炎の魔法剣を作って剣を振るモーションを作ってみ…

zshシェルのMacにPATHを通してVisual Studio Codeをcodeコマンドから実行する方法

小ネタですが、Babylon.js EditorからVisual Studio Codeを開くときに少しはまったので書いておきます。 1. Babylon.js EditorではworkspaceをVisual Studio Codeで開くことができる 2. Babylon.js Editorから開くためには、Visual Studio Codeをコマンドラ…

Babylon.jsのPostProcessを使って見た目をきれいにする方法

3DCGを扱うフレームワークには、見た目の描画を綺麗にする方法がたくさんあります。その中にPost Processというものがあります。 今回は、Babylon.jsでPost Processをかける方法と、自分で作った3DCGモデルに対してかけてみた結果をお見せします。 1. Post P…

Babylon.js Editorで移動するglbキャラクターにカメラをつける方法

前回までで、Babylon.js Editorでも再生できるアニメーション付きキャラクターの作成方法、操作方法を書きました。 www.crossroad-tech.com www.crossroad-tech.com 今回はこのキャラクターが移動するときにカメラが追随する処理をまとめました。 1. 今回や…

アニメーション付きキャラクタモデルをBabylon.js Editorで動かす方法

前回は、Blenderを使ってキャラクターに複数のアニメーションを割り当ててBabylon.js sandboxで再生する手順を紹介しました。 www.crossroad-tech.com 今回は、このキャラクタの3DCGモデルを使ってBabylon.js Editorで操作できるシーンを作る手順を紹介しま…

Ready Player Meのキャラクタモデルに複数のアニメーションを割り当てて、Babylon.js で再生する方法

先日Babylon.js のGUI Editorを試した頃から、何かのゲームっぽいものを一通り作成しようと思い、キャラクタを動かすタイプのゲーム開発を進めています。 今回は、キャラクタに複数のアニメーションを割り当ててBabylon.js で表示する方法を解説します。 使…

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 後編

前回の続きです。 www.crossroad-tech.com 今回はBlenderでライトマップベイクをするところから説明します。 試した環境 Blender 2.93 Babylon.js 5.5.5 1. ライトマップベイクとは? 2. ライトマップベイクを実行する前にUV展開しておく 3. ライトマップベ…

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 前編

以前も何度か書いたことがありますが、フォトリアルな表現が好きでもっとスキルをつけたいと思っています。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は最終的にBabylon.jsできれいな表現を試すた…

A report of Babylon.js meetup Vol.1

We finally created a Babylon.js community in Japan! I and some members became organizers in this community. In this post, I report the first meetup held by 6th May (JST) 1. What is Babylon.js Japan? 2. Contents 2.1 Opening 2.2 Getting star…

Babylon.js v5をビルドする方法

Babylon.js v5が公開されています。これまでは4.2.Xだったので久しぶりのメジャーアップデートです。 公式アナウンスも出ており、かっこいいビデオも公開されています。 We'd like to formally introduce the next version of the Babylon Platform - #Babyl…

Babylon.jsのGUI Editorで作ったGUIをソースコードから制御する方法

前回の記事ではGUI Editorの基本的な使い方を説明しました。 www.crossroad-tech.com 今回はGUI Editorを使ってゲームのタイトル画面と設定画面を作ってみたので、この画面をソースコードから切り替える方法を解説します。 なお、この記事で説明に使っている…

Babylon.js v5で正式に追加されたGUI Editorの使い方をまとめました

Babylon.js v5がリリースされました。どちらかというと安定性強化が多いのですが、大きな機能追加がいくつか入っています。 この記事では、追加された機能の1つである、「GUI Editor」について概要から使い方までを紹介します。 1. GUI Editorとは? 2. GUI…

【2022/5/9 エラー問題の対処方法を追記】Babylon.js Editor 4.1.0で追加されたPackge機能について

先日、Babylon.js Editorが4.1.0にアップデートされました。ここではPackageという機能が新しく追加されています。 Package機能を使うとEditorで作った内容をまとめて出力できます。出力結果をサーバに配置すると、Webブラウザで実行することができます。 今…

Blenderでモーション付きアバターをglb形式で出力する方法

前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。 www.crossroad-tech.com このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが…

Babylon.jsのWebXR形式で掴む機能を実装する方法

この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の23日目です。 前回は「Okamoto S」さんの[WebXR] UnityとiPhone LiDAR、THETAを使った崖下を覗ける360°WebGLアプリを作ってみるでした。 Babylon.jsというフレームワークはWebXRに対応しており、i…

Babylon.jsのWebXR形式でテレポート移動を実装する方法

この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の2日目です。 前回はHEAVEN ちゃん (@ikkou) | Twitter さんの#WebXR ( WebVR/WebAR ) の現状確認 2021 Winterでした。 Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモード…

【2021/8/29 json読み込みサンプルコードを追記】Babylon.jsのInspector上からアニメーションを作成できるAnimation Curve Editorの使い方をまとめました

The post introduce how to use Animation Curve Editor (ACE) in Japanese. I'll write English version soon. 先日、このようなツイートを見かけました。しかしまだ詳しい使い方やマニュアルがなかったのでどんなものか整理してみました。 Check out this …

【2021/7/25 位置補正方法の記事リンクを追記】Blender2.9を使って、読み込み、表示がうまくいかないPLATEAUの3DCGモデルを自動補正する方法について

最近、Babylon.js Editorのテンプレートプロジェクトを作っています。とくに、WebXRコンテンツがEditorで作れるようにとおもって、PLATEAUの3DCGモデルを使ってWebXR (immersive-vr) でウォークスルーができる仕組みを作ろうと思いました。 しかし、Babylon.…

Babylon.js Editor v4.0の公式版がリリースされました

日本時間の本日に、Babylon.js Editorのv4公式版がリリースされました。このブログでは去年からv4のbeta、rc (release candidate) の頃から使い方や特徴などを紹介してきました。 www.crossroad-tech.com www.crossroad-tech.com 今回は、改めてBabylon.js E…

【2022/3/8追記】Babylon.jsのWebXRでplayerの位置を調整する方法

Babylon.jsでは、CameraのAPIを使うことでコンテンツの表示位置を決めることができます。 しかし、WebXRを使う場合、このcameraの位置が反映されません。そこで、今回はWebXRで作ったコンテンツがimmersive-vrモードになったときのPlayerの位置を指定する方…

Blenderで指定したオブジェクトのみを.babylon形式でエクスポートする方法

Babylon.jsの公式HPでは、Blenderで作った3DCGモデルを.babylon形式 (Babylon.jsで再生できるフォーマット) でエクスポートするためのアドオンがあります。 これについての使い方も公式ドキュメントで紹介されています。 doc.babylonjs.com しかし、ドキュメ…

【2021/5/9追記】WebXR対応のBabylon.jsでVRコントローラの各種ボタン入力を制御する方法

以前、WebXRのimmersiveモードとBabylon.jsについて紹介したことがありました。 www.crossroad-tech.com このときは、VRモード切り替え、テレポート、コントローラを別の3DCGモデルに変更する方法などを紹介しましたが、コントローラの個別のボタン入力の方…

アプリの画面デザインを簡単に作るためのAdobeXDのTipsについて

最近、Babylon.js Editorに新しい機能を載せたいと思って、開発者の方と相談しています。そのときに、機能のイメージを伝えるためにAdobeXDを使いました。 AdobeXDは作りたいアプリの見た目や画面遷移を表現するのにとても便利なので、備忘録も兼ねてちょっ…

Babylon.js Editor v4.0でプレビュー実行する方法

少し時間が空いてしまいましたが、今回はBabylon.js Editorで開発したものをプレビュー実行する方法の紹介です。 試した環境 Babylon.js Editor : v4.0.0-rc.2 iPhone 12Pro (iOS 14.4.2) のSafariブラウザ 1. Babylon.js Editorについて 2. プレビュー実行…

Babylon.js Editor v4.0でノードベースで処理を描いていくGraph Editorを試してみました

このブログでも何度か紹介しているBabylon.js Editorは、UnityのようなGUIとオブジェクトへのスクリプトアタッチができる仕組みです。それだけでなく、ノードベースで処理を描いていくGraph Editorという仕組みも入っていました。 まだPreviewとあって機能は…

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…

【2021/5/16追記】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…