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をコマンドラ…
3DCGを扱うフレームワークには、見た目の描画を綺麗にする方法がたくさんあります。その中にPost Processというものがあります。 今回は、Babylon.jsでPost Processをかける方法と、自分で作った3DCGモデルに対してかけてみた結果をお見せします。 1. Post P…
前回までで、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できれいな表現を試すた…
We finally created a Babylon.js community in Japan! I and some members became organizers in this community. In this post, I report the first meetup held by 6th May (JST) 1. What is Babylon.js Japan? 2. Contents 2.1 Opening 2.2 Getting star…
Babylon.js v5が公開されています。これまでは4.2.Xだったので久しぶりのメジャーアップデートです。 公式アナウンスも出ており、かっこいいビデオも公開されています。 We'd like to formally introduce the next version of the Babylon Platform - #Babyl…
前回の記事ではGUI Editorの基本的な使い方を説明しました。 www.crossroad-tech.com 今回はGUI Editorを使ってゲームのタイトル画面と設定画面を作ってみたので、この画面をソースコードから切り替える方法を解説します。 なお、この記事で説明に使っている…
Babylon.js v5がリリースされました。どちらかというと安定性強化が多いのですが、大きな機能追加がいくつか入っています。 この記事では、追加された機能の１つである、「GUI Editor」について概要から使い方までを紹介します。 1. GUI Editorとは？ 2. GUI…
先日、Babylon.js Editorが4.1.0にアップデートされました。ここではPackageという機能が新しく追加されています。 Package機能を使うとEditorで作った内容をまとめて出力できます。出力結果をサーバに配置すると、Webブラウザで実行することができます。 今…
前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。 www.crossroad-tech.com このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが…
この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の23日目です。 前回は「Okamoto S」さんの[WebXR] UnityとiPhone LiDAR、THETAを使った崖下を覗ける360°WebGLアプリを作ってみるでした。 Babylon.jsというフレームワークはWebXRに対応しており、i…
この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の2日目です。 前回はHEAVEN ちゃん (@ikkou) | Twitter さんの#WebXR ( WebVR/WebAR ) の現状確認 2021 Winterでした。 Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモード…
The post introduce how to use Animation Curve Editor (ACE) in Japanese. I'll write English version soon. 先日、このようなツイートを見かけました。しかしまだ詳しい使い方やマニュアルがなかったのでどんなものか整理してみました。 Check out this …
最近、Babylon.js Editorのテンプレートプロジェクトを作っています。とくに、WebXRコンテンツがEditorで作れるようにとおもって、PLATEAUの3DCGモデルを使ってWebXR (immersive-vr) でウォークスルーができる仕組みを作ろうと思いました。 しかし、Babylon.…
日本時間の本日に、Babylon.js Editorのv4公式版がリリースされました。このブログでは去年からv4のbeta、rc (release candidate) の頃から使い方や特徴などを紹介してきました。 www.crossroad-tech.com www.crossroad-tech.com 今回は、改めてBabylon.js E…
Babylon.jsでは、CameraのAPIを使うことでコンテンツの表示位置を決めることができます。 しかし、WebXRを使う場合、このcameraの位置が反映されません。そこで、今回はWebXRで作ったコンテンツがimmersive-vrモードになったときのPlayerの位置を指定する方…
Babylon.jsの公式HPでは、Blenderで作った3DCGモデルを.babylon形式 (Babylon.jsで再生できるフォーマット) でエクスポートするためのアドオンがあります。 これについての使い方も公式ドキュメントで紹介されています。 doc.babylonjs.com しかし、ドキュメ…
以前、WebXRのimmersiveモードとBabylon.jsについて紹介したことがありました。 www.crossroad-tech.com このときは、VRモード切り替え、テレポート、コントローラを別の3DCGモデルに変更する方法などを紹介しましたが、コントローラの個別のボタン入力の方…
最近、Babylon.js Editorに新しい機能を載せたいと思って、開発者の方と相談しています。そのときに、機能のイメージを伝えるためにAdobeXDを使いました。 AdobeXDは作りたいアプリの見た目や画面遷移を表現するのにとても便利なので、備忘録も兼ねてちょっ…
少し時間が空いてしまいましたが、今回はBabylon.js Editorで開発したものをプレビュー実行する方法の紹介です。 試した環境 Babylon.js Editor : v4.0.0-rc.2 iPhone 12Pro (iOS 14.4.2) のSafariブラウザ 1. Babylon.js Editorについて 2. プレビュー実行…
