CrossRoad

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

はじめての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という別の機能と組み…

Babylon.js Editor v4.2.0でキャラクタが炎の魔法剣を振るモーションを作る方法

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

zshシェルのMacにPATHを通してVisual Studio Codeをcodeコマンドから実行する方法

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

8th Wall Tech Talk Japanの概要をまとめました

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

Babylon.jsのPostProcessを使って見た目をきれいにする方法

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