これは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時点ではまだ枠がありますので…

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

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…

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

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

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

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

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

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

WebARで有名な8thWallに関する勉強会がありました。私はWebARはあまり試したことがないので、最近の動向を知りたくて参加しました。 せっかくなので、聴講した発表について簡単にまとめてみました。 1. 8th Wall Tech Talk Japanとは？ 2. 勉強会の内容 2.1 …

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

今度はBabylon.js Editorで炎の剣を作ってみます。 なお、以前も似たようなことを試したことがあります。 www.crossroad-tech.com この時の違いは、以下の通りです。 ・Babylon.js Editor v2.5 → v4.2 に変更 ・作った炎の剣をキャラクタと一緒に動かしてい…

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

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

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

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

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

今回は以前紹介したSurface Duoについてです。 www.crossroad-tech.com 後でSIMロック解除ができると聞いていたので、当時はSIMロック版を購入しました。 しかし、うっかりSIMロック解除の手続きを間違えてしまい、最終的にSIMロック解除ができるまで半年近…