ランキング参加中JavaScript ブラウザで動く3DCGを作る方法は色々あり、このブログでよく紹介しているBabylon.jsはその中の１つです。 別の方法としてPlayCanvasもあります。今回は、PlayCanvasコミュニティの方々と合同でLT会を開催しましたので、その内容…
Babylon.js Japanコミュニティ主催で「ゆるほめLT会 Vol.3」を開催しましたので、内容をまとめてみました。 1. Babylon.js ゆるほめLT会とは？ 2. 発表内容 2.1 超ぷち点群データを生成させて表示した話 2.2 Babylon.js × microCMS でフォトギャラリーサイト…
Babylon.jsはJavaScript/TypeScriptを使ったフレームワークのため、ブラウザ用コンテンツを作るのが基本的な使い方です。 一方、Babylon.jsで書いたコードを元に、Windows/iOS/Androidのネイティブアプリを開発する「Babylon Native」という方法もあります。…
Apple Vision ProはWebXRに対応しています。そのため、Apple Vision ProのSafariでWebXRに対応しているサイトを表示すると、VRモードにすることができます。ただし、現時点ではVRのみ対応で、ARは対応していません。 Babylon.jsもWebXRに対応しており、ブラ…
We organized third meetup of Babylon.js. The post shows the meetup reports. 1. What is Babylon.js Japan? 2. Preesntations 2.1 Activities of Babylon.js JAPAN 2.2 New feature of Babylon.js v7 2.3 Babylon.js on Re:Earth 2.4 WebXR session feat…
ランキング参加中JavaScript 今回で３回目になる勉強会の内容をまとめました。 1. Babylon.js Japanとは? 2. 発表内容 2.1 Babylon.js JAPAN 活動紹介 2.2 Babylon.js v7 新機能まとめ 2.3 Re:Earth上でBabylon.jsを動かしてみた 2.4 Babylon.js を使ってい…
ランキング参加中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 ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。 そのため、あまり使われないフォントでサイトを作っても、…
