CrossRoad

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

An event report of selling 2nd Babylon.js recipe book on a technical books showcase

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…

Babylon.js WebGPUパフォーマンスを向上するSnapshot Renderingについて

前回の記事ではWebGPUを使う方法について紹介しました。 www.crossroad-tech.com Babylon.js WebGPUには最適化手法がいくつかあります。今回はその中の1つであるSnapshot Renderingについて紹介します。 1. Snapshot Renderingとは 2. Snapshot Renderingの…

Babylon.jsのWebGPUを最小構成で使ってみよう

Babylon.jsではv5.0以降でWebGPUのサポートが開始しました。 WebGPUについては公式ドキュメントに色々と記載があります。今回は、最小構成で記述する方法を紹介します。 1. WebGPUとは 2. WebGPUを使うには 3. Babylon.jsでWebGPUを使った記述をするには 4. …

Babylon.jsでパフォーマンスチューニングをしてみたお話

Babylon.jsで多数の3Dモデルを表示すると、うまく表示されないことがあります。M1 Macのような高性能PCではあまり気にならなくても、iPhoneのようなモバイルにするとロードに失敗することがあります。 今まで見落としていたのですが、Babylon.js Documentati…

【生成AIの検証】BlenderGPTを試してみました

前回に引き続き、今度はBlenderでの3Dモデル自動生成機能である、BlenderGPTを試してみました。 1. BlenderGPTとは 2. 環境構築 3. BlenderGPTで試した結果 4. OpenAI (ChatGPT 3.5) でBlenderのPythonスクリプトを問い合わせた結果 5. Tips 5.1 OpenAIのAPI…

【生成AIの検証】Roblox StudioのAI-Powered Code CompletionとMaterial Generator

ここ半年ほどの生成AIブームにより、いろいろな生成AIが発表されています。 どういう機能なのかは実際に試してみないと判断ができないので、気になったものを試しています。 今回は、Roblox Studioというゲーム作成ツールに搭載された生成AI機能を試した結果…

A report of Babylon.js meetup Vol.2

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 勉強会 Vol.2の概要をまとめました

2022年5月から開始した「Babylon.js Japan」の主催による第2回の勉強会を実施しましたので、まとめてみました。 1. Babylon.js Japanとは? 2. 発表 2.1 オープニング 2.2 Babylon.js 6.0 新機能まとめ 2.3 Babylon.js JAPAN 活動紹介 2.4 Babylon.js 活用事…

有料プランのTwitter Blueでできることと、規約の一部を確認しました

数日前よりTwitterの有料版「Twitter Blue」が日本でも使えるようになりました。 wired.jp ここではTwitter Blueでできるようになることや、課金に関する規約関連を簡単にまとめました。 2023/1/22 追記 1/14に申し込みして、1/19の朝に青バッジマークがつき…

Blender 3.1.2でUV展開を使って3Dモデルにテクスチャを貼る方法

Blenderでモデリングをしたとき、任意の場所にテクスチャを貼りたいことがあります。 これが思ったよりも手間取ったので、簡単な例をもとに手順を記載しようと思います。 使用した環境 Blender 3.1.2 1. ドアの3Dモデルと画像を準備する 2. Blenderでドア3D…

BlenderとArchimeshを使う時のちょっとしたTips

最近またBlenderのArchimeshを試しています。ArchimeshとはBlenderで部屋の間取りを作ることができるアドオンです。概要や基本的な使い方は以下をご参照ください。 www.crossroad-tech.com 今回は以前の記事で書けなかったArchimeshのTipsを追加します。 Ble…

技術書典13に「Babylon.js レシピ集 Vol.1」を頒布したお話

これはBabylon.js Advent Calendar 2022の最終日の記事です。 qiita.com 最終日ということで、今年の9月に技術書典13にてBabylon.js勉強会から技術同人誌を頒布したことを書きたいと思います。 先に書いていた英語版の日本語訳に近い内容+加筆です。 www.cro…

Babylon.jsでNavigation Meshを使う方法を調べてみた

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsにはNavigation Meshという仕組みがあります。 Navigation Meshとは、指定場所までの移動経路を自動的に計算してくれる仕組みです。UnityだとNavMeshとして紹介されています。 …

Babylon.jsのGUIコンテストで入賞したお話

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 2022年の夏頃に、Babylon.js ForumでGUI Adventureというコンテストが告知されました。 forum.babylonjs.com ソースコードだけで書くか、以前紹介したBabylon.js GUI Editorのどちらかで何…

Babylon.jsで壁にぶつかる処理を書いてみよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 前回作ったキーボード移動は、移動処理しか入れてないので、床があってもなくてもずっと移動できてしまいます。 今回は、ステージに壁を追加して、壁にぶつかったら進まないという処理を追…

Babylon.jsで指定したオブジェクトをキーボード操作で移動させてみよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回はWASDキーで、平面上のsphereオブジェクトを動かす処理を紹介します。 1. オブジェクトの移動にはtranslateが便利 2. WASDキーでの移動方法 3. 動作確認 4. おわりに

Babylon.jsで、ブラウザ再生環境に依存せずにフォントが使えるようにしよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。 そのため、あまり使われないフォントでサイトを作っても、…

Babylon.jsでシューティングゲーム風画面を作ってみた

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回は、先月作ったソードアートオンライン風のオブジェクトが消えるエフェクトをもとに、簡単なシューティングゲーム風画面を作る方法を解説します。 1. Grid Materialを使ってサイバー風…

Babylon.jsでHPゲージを作ってみよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsにはGUIを作る仕組みが準備されています。たとえばゲームでよく使われるHPゲージのような表現も比較的簡単に作れます。 今回は、HPゲージがゼロから回復する、HPゲージが特定イ…

Babylon.jsで弾を飛ばす処理を作ってみよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com 今回はキー入力をしたら弾が飛ぶ、というシンプルな表現の作り方を紹介します。 実際は他にも方法があるはずなので、今回の紹介は一例としてご理解ください。 1. まずは物理演算を有効にす…

Babylon.jsで作った空間の中を自由に移動してみよう

これはBabylon.js アドベントカレンダー2022の記事です。 qiita.com Babylon.jsではいろいろな方法で3D空間の中を移動する方法が提供されています。今回はその中でも比較的簡単に移動できる方法を紹介します。 1. Babylon.jsで作った空間を移動する方法 2. …

Babylon.jsの採用事例

これはBabylon.js Advent Calendar 2022 の2日目の記事です。 1日目では、はじめてのBabylon.jsについて解説しました。今回はBabylon.jsがどんなところで使われているかを紹介します。 1. 企業や団体による採用事例 1.1 Snap on 1.2 FMD 1.3 FRAME 1.5 ト…

はじめてのBabylon.js

Babylon.js Advent Calendar 2022が始まりました! qiita.com このアドベントカレンダーでは、Babylon.jsを使い方や知見などがいろいろ紹介されると思います。ぜひ全ての記事をご覧になっていただければと思います。 また、12/1時点ではまだ枠がありますので…

IDEACTIVE JAPAN PROJECTのひらめきトライアルで優秀賞をいただいたお話

最近、IDEACTIVE JAPANというプロジェクトが発足しました。 www.ideactive.jp あまり話題になっていませんが、2022年9月に発足して、Microsoft、ソフトバンク、Metaなどの大手企業をはじめとして、多数の企業が参加しています。 今回は、IDEACTIVE JAPANの概…

How we published a new Babylon.js recipe book Vol. 1

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.1. techbookfest.org The book has been written by several BJS developers in Japan and contai…

ソードアートオンラインのオブジェクトが消えるエフェクトを作ってみました

今さらかもしれませんが、最近ソードアートオンライン (Sword Art Online : SAO) のアニメにはまっています。 今はガンゲイルオンライン編を見てます。 はまったついでに、SAOで共通して使われる物体が消える (ゲーム内のアイテム消費とか) エフェクトをBaby…

Babylon.js Editorを使って、キャラクタが魔法剣を振ったときの破壊エフェクトを作る方法

時間が経ってしまいましたが、前回からの続きです。魔法剣を振ったときに岩を破壊するエフェクトを作りました。 これまでの内容はこちらです。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad…

Babylon.jsゆるほめLT会の内容をまとめました

2022/7/14 追記:NewDさんのスライドを追記しました 2022/7/10 追記:akiraさん、つらみぃさんの発表スライドを追記しました Babylon.js Japanコミュニティ主催で、2カ月ぶりに「ゆるほめLT会」を開催しましたのでまとめてみました。 1. Babylon.js ゆるほ…

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

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

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

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