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…
今更ながら気づいたので書いておきます。 Meta Quest2/ProのWebXRコンテンツを、HMD実機なしで動作確認できるエミュレータについてです。 動作環境 macOS Ventura 13.4 Microsoft Edge browser 114.0.1823.58 Google Chrome 114.0.5735.198 Immersive Web Em…
前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、ブロックに当てた数、ライフの数を表示させるGUI関…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsではいろいろな方法で3D空間の中を移動する方法が提供されています。今回はその中でも比較的簡単に移動できる方法を紹介します。 1. Babylon.jsで作った空間を移動する方法 2. …
ランキング参加中JavaScript これは Babylon.js アドベントカレンダー 2023 の記事です。 Babylon.jsでは、空間に並べた3Dモデルの大きさや位置などを直感的に調整できる機能があります。本日はこれを紹介します。 1. どんなことができるか 2. Playground上…
前回は、Blenderを使ってキャラクターに複数のアニメーションを割り当ててBabylon.js sandboxで再生する手順を紹介しました。 www.crossroad-tech.com 今回は、このキャラクタの3DCGモデルを使ってBabylon.js Editorで操作できるシーンを作る手順を紹介しま…
これは「Babylon.js アドベントカレンダー2024」の3日目です。 qiita.com 今回は、Babylon.js forumで紹介されているサンプルプロジェクトやゲームを紹介します。 1. サンプルプロジェクトを探せるサイト 2. サンプルプロジェクトの例 2.1 Space Shooter 2.2…
前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。 www.crossroad-tech.com このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが…
これは「Babylon.js アドベントカレンダー2024」の19日目の記事です。遡って書きました。 Visual Studio Codeには、glTF またはバイナリのglb形式の3Dモデルを表示できるExtention (拡張機能) があります。この拡張機能による3Dモデル表示には、Babylon.jsが…
ここ最近、ナレッジグラフを使ったデータ分析？や可視化を試しています。 今回はもう少し拡張して、データを3D表示してみました。実際のデータの方が面白かったので、自分のブログ10年分を使って取り組んだ技術の変遷や関係性をGraph表示してみました。 使用…
以前から色々と書いているBabylon.js (OSSで提供されているWebGLフレームワーク。3DCGを扱うブラウザ向けコンテンツを開発できる) について、新しいバージョンのEditorが発表されています。 editor.babylonjs.com 今回は新しいEditorの概要を紹介します。ま…
Babylon.jsの公式サイトより、新しく軽量版のBabylon Liteが発表されました。 すでに概要については、いくつか日本語で記事が出ています。今回はBabylon Liteを使った上で最も単純なコードを書く方法を紹介します。 使用した環境 - Babylon Lite: 1.2.0 - Ty…
前回の記事は、Babylon Liteという軽量版Babylon.jsを使う時の最小限プロジェクトを紹介しました。 www.crossroad-tech.com 今回は、Babylon Liteがそもそもどれくらい軽量なのかを簡単に測定してみました。 1. Babylon Liteで何がよくなるか？ 2. glbファイ…
これは「Babylon.js アドベントカレンダー2024」の23日目の記事です。 今回は公式ドキュメントで紹介されているBabylon Viewerについて解説します。 1. Babylon Viewerとは 2.サポートしているファイルフォーマット 3. WebGPUが有効な場合、snapshot renderi…
ランキング参加中JavaScript 引き続きHavokについて調べています。 前回書いた通り、aggregateという関数を使うことで、オブジェクトに物理演算をかけることができます。また、PhysicsViewerを使うことで、物理演算がかかった結果を確認できます。しかし、公…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。 そのため、あまり使われないフォントでサイトを作っても、…
Babylon.jsではv5.0以降でWebGPUのサポートが開始しました。 WebGPUについては公式ドキュメントに色々と記載があります。今回は、最小構成で記述する方法を紹介します。 1. WebGPUとは 2. WebGPUを使うには 3. Babylon.jsでWebGPUを使った記述をするには 4. …
以前WebXRの書き方でbabylon.jsでARを試した例をまとめたことがあります。 www.crossroad-tech.com 今回は、Oculus Quest2が届いたこともあり、VRを試してみました。検証に使ったPlayGroundのbabylon.jsのバージョンは、4.2.0-beta17です。 1. WebXRとは？ 2…
これは「Babylon.js アドベントカレンダー2024」の8日目です。 前回の私の記事では、Babylon Toolkitの概要や環境構築方法を書きました。 www.crossroad-tech.com 今回はUnityを開いてからの初期設定や、CubeとPlaneを置いたシーンをエクスポートしてブラウ…
先日、Babylon.js Editorが4.1.0にアップデートされました。ここではPackageという機能が新しく追加されています。 Package機能を使うとEditorで作った内容をまとめて出力できます。出力結果をサーバに配置すると、Webブラウザで実行することができます。 今…
以前から何度か紹介しているBabylon.js Editorに新機能が増えていたので試してみました。 1. Fabとは 2. Babylon.js Editorに搭載されたFab Plugin 2.1 Babylon.js Editor側でFab Pluginをインストール 2.2 Epic Games LauncherアプリでFabを確認できるよう…
We organized fifth meetup of Babylon.js. The post shows the meetup reports. Japanese version www.crossroad-tech.com In this meetup, we've honored to introduce David Catuhe, who is a father of Babylon.js. He kindly saved his time to join th…
今回で5回目になる勉強会の内容をまとめました。 English version www.crossroad-tech.com 1. Babylon.js Japanとは? 2. 発表内容 2.1 Babylon.js JAPAN 活動紹介 / Activities of Babylon.js Japan 2.2 Web 3D クリエイションを加速する Babylon.js 9.0/ Ac…
この投稿はBabylon.js Advent Calendar 2025の記事です。 qiita.com 最終日ということで、2024年のBabylon.jsコミュニティを振り返ってみようと思います。 1. コミュニティの参加人数 2. 勉強会 3. 書籍出版 4. 今後の予定など
この投稿はBabylon.js Advent Calendar 2025の記事です。 qiita.com 今回は、Babylon.js EditorのPost Process機能を使って、見た目を調整する方法を紹介します。 調整前と後でこのように変わります。 調整前 調整後 使用した環境 Mac OS Tahoe 26.1 Babylon…
この投稿はBabylon.js Advent Calendar 2025の記事です。 qiita.com 今回はBabylon.js Editor v5以降に搭載されたCinematic Editorを使って、カメラを動かしてみました。 11秒の動画ですが、こんな感じです。 youtu.be 使用した環境 Mac OS Tahoe 26.1 Babyl…
この投稿はBabylon.js Advent Calendar 2025の記事です。 qiita.com 前回に引き続きBabylon.js Editorを使ってみます。今回はちょっとホラーな風景を作ってみました。 こんな感じです。 使用した環境 Mac OS Tahoe 26.1 Babylon.js Editor v5.2.4 1. まずは…
この投稿はBabylon.js Advent Calendar 2025の内容です。 qiita.com 以前から何度か書いていたBabylon.js Editorについて、できることを何度かに分けて書いてみたいと思います。 今回はWater Materialです。 こういうものを作ってみました。 1. Babylon.js E…
前回は球がブロックと衝突すると、ブロックが消えるという処理を紹介しました。 今回はブロックが消えたことをスコアとして表示する、終了時にメッセージを出すという処理を追加します。 1. AdvancedDynamicTexture.CreateFullscreenUIを使ってGUIを作る 2. …
前回は、ブロック崩しゲームの弾を飛ばして、壁と弾性衝突するシーンを作りました。 www.crossroad-tech.com 今回はここにブロックを並べて、ブロックと弾がぶつかったらブロックが消えるという処理を解説します。 すぐ終わると思ったのに、予想以上に時間が…
