ランキング参加中JavaScript これはBabylon.js アドベントカレンダー 2023の25日目の記事です。 最終日ということで、Babylon.js勉強会を中心としたコミュニティ活動について色々と書いてみました。 1. Babylon.jsの簡単な説明 2. Babylon.js 勉強会とは 3. …
ランキング参加中JavaScript これは Babylon.js アドベントカレンダー 2023 の記事です。 Babylon.jsの公式ドキュメントを見ていたところ、Mirror Textureという機能を見つけました。これはPlaneを鏡のように使える機能です。 今回はサンプルコードの紹介と…
ランキング参加中JavaScript これは Babylon.js アドベントカレンダー 2023 の記事です。 Babylon.jsでは、空間に並べた3Dモデルの大きさや位置などを直感的に調整できる機能があります。本日はこれを紹介します。 1. どんなことができるか 2. Playground上…
ランキング参加中JavaScript これはBabylon.js アドベントカレンダー2023の 5 日目の記事です。 この記事では、Babylon.js を使ってiOSやAndroidアプリを作るためのReact Naticeの環境構築手順を紹介します。 1. Webアプリとネイティブアプリ 2. React Nativ…
ランキング参加中JavaScript これはWebXR アドベントカレンダー2023の記事です。 adventar.org WebXRコンテンツはJavaScript/TypeScriptで書くとは限りません。 今回はゲームエンジンのようにWebXRコンテンツを開発できるWonderland Engineを紹介します。 1.…
ランキング参加中JavaScript これはBabylon.js アドベントカレンダー2023の 3日目の記事です。 この記事では、Babylon.js を使ったエフェクトを紹介します。 1. 水面 2. エナジーフィールド 3. スキャンエフェクト 4. おわりに
ランキング参加中JavaScript これはBabylon.js Advent Calendar 2023 の1日目の記事です。 Babylon.jsでは、工夫するときれい、かっこいい表現を作ることができます。今回はそんな表現をいくつか紹介します。 1. クリスマスの飾り 2. マンションの中の一部屋…
ランキング参加中JavaScript 引き続きHavokについて調べています。 前回書いた通り、aggregateという関数を使うことで、オブジェクトに物理演算をかけることができます。また、PhysicsViewerを使うことで、物理演算がかかった結果を確認できます。しかし、公…
ランキング参加中JavaScript クリックしたらボールが動くという仕組みです。非常に単純ですが、公式ドキュメントにサンプルコードがなかったので、解説付きでまとめました。 1. Havokでは、3Dオブジェクトに当てたbodyとshapeで物理演算を実行する 2. Havok…
ランキング参加中JavaScript Babylon.jsではv6.0以降にHavokという物理エンジンが使えるようになりました。 これまでの物理エンジンとは少し使い方が異なるので、基本的な使い方をまとめました。 1. Havokとは 2. Babylon.jsでHavokを使う方法 3. 基本的な使…
Babylon.js Japanコミュニティ主催で「ゆるほめLT会 Vol.2」を開催しましたので、内容をまとめてみました。 1. Babylon.js ゆるほめLT会とは？ 2. 発表内容 2.1 Babylon.jsを使ったプレゼンテーション 2.2 パーティクルやってみた！ 2.3 Babylon.jsユーザの…
今更ながら気づいたので書いておきます。 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…
先週より技術書典14が開催されています。 私が所属しているBabylon.js 勉強会では、前回の技術書典13に引き続き「Babylon.jsレシピ集 Vol.2」を頒布しました。コンテンツ以外の前回との差分として、今回は物理本の作成、現地会場での販売に挑戦してみました…
A large technical book showcase event started since yesterday in Japan. In this event, BJS study group in Japan has published a new recipe book Vol.2. techbookfest.org Everyone can purchase it via online and a physical exhibition hall (onl…
前回の記事ではWebGPUを使う方法について紹介しました。 www.crossroad-tech.com Babylon.js WebGPUには最適化手法がいくつかあります。今回はその中の１つであるSnapshot Renderingについて紹介します。 1. Snapshot Renderingとは 2. Snapshot Renderingの…
Babylon.jsではv5.0以降でWebGPUのサポートが開始しました。 WebGPUについては公式ドキュメントに色々と記載があります。今回は、最小構成で記述する方法を紹介します。 1. WebGPUとは 2. WebGPUを使うには 3. Babylon.jsでWebGPUを使った記述をするには 4. …
Babylon.jsで多数の3Dモデルを表示すると、うまく表示されないことがあります。M1 Macのような高性能PCではあまり気にならなくても、iPhoneのようなモバイルにするとロードに失敗することがあります。 今まで見落としていたのですが、Babylon.js Documentati…
We organized second meetup of Babylon.js. The post shows the meetup reports. 1. What is Babylon.js Japan? 2. Preesntations 2.1 Opening 2.2 Introducing Babylon.js 6 -What's new with it- 2.3 A year activities of Babylon.js JAPAN 2.4 Case stu…
これはBabylon.js Advent Calendar 2022の最終日の記事です。 qiita.com 最終日ということで、今年の9月に技術書典13にてBabylon.js勉強会から技術同人誌を頒布したことを書きたいと思います。 先に書いていた英語版の日本語訳に近い内容+加筆です。 www.cro…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsにはNavigation Meshという仕組みがあります。 Navigation Meshとは、指定場所までの移動経路を自動的に計算してくれる仕組みです。UnityだとNavMeshとして紹介されています。 …
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 2022年の夏頃に、Babylon.js ForumでGUI Adventureというコンテストが告知されました。 forum.babylonjs.com ソースコードだけで書くか、以前紹介したBabylon.js GUI Editorのどちらかで何…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 前回作ったキーボード移動は、移動処理しか入れてないので、床があってもなくてもずっと移動できてしまいます。 今回は、ステージに壁を追加して、壁にぶつかったら進まないという処理を追…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回はWASDキーで、平面上のsphereオブジェクトを動かす処理を紹介します。 1. オブジェクトの移動にはtranslateが便利 2. WASDキーでの移動方法 3. 動作確認 4. おわりに
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。 そのため、あまり使われないフォントでサイトを作っても、…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回は、先月作ったソードアートオンライン風のオブジェクトが消えるエフェクトをもとに、簡単なシューティングゲーム風画面を作る方法を解説します。 1. Grid Materialを使ってサイバー風…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsにはGUIを作る仕組みが準備されています。たとえばゲームでよく使われるHPゲージのような表現も比較的簡単に作れます。 今回は、HPゲージがゼロから回復する、HPゲージが特定イ…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回はキー入力をしたら弾が飛ぶ、というシンプルな表現の作り方を紹介します。 実際は他にも方法があるはずなので、今回の紹介は一例としてご理解ください。 1. まずは物理演算を有効にす…
これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsではいろいろな方法で3D空間の中を移動する方法が提供されています。今回はその中でも比較的簡単に移動できる方法を紹介します。 1. Babylon.jsで作った空間を移動する方法 2. …
これはBabylon.js Advent Calendar 2022 の２日目の記事です。 １日目では、はじめてのBabylon.jsについて解説しました。今回はBabylon.jsがどんなところで使われているかを紹介します。 1. 企業や団体による採用事例 1.1 Snap on 1.2 FMD 1.3 FRAME 1.5 ト…
Babylon.js Advent Calendar 2022が始まりました！ qiita.com このアドベントカレンダーでは、Babylon.jsを使い方や知見などがいろいろ紹介されると思います。ぜひ全ての記事をご覧になっていただければと思います。 また、12/1時点ではまだ枠がありますので…
