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ロック解除ができるまで半年近…

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形式で出力したかったのですが…

数ヶ月前より、Plaskというサービスが出ています。 Plask これは、スマートフォンなどのカメラで撮影した人の動き (モーション) をアップロードすると、Humanoidアバターにモーションを割り当ててくれるWebサービスです。 割り当てたモーション付きのアバタ…

少し前になりますがSurface Duoのアップデートが配信され、Android10からAndroid11になりました。 今回は、アップデートされたSurface Duoについて説明します。 検証したSurface DuoのOSバージョン Android 11 ビルド番号：2021.1027.156 1. Surface Duoのア…

これまでWolvicについてあまり知らなかったので、どんな団体がどういう経緯で開発をしているのかについて調べてみました。 また、Quest2のApp Labで配信されていたので実際に試してみました。 1. Wolvicとは？ 2. なぜWolvicと名付けたか？ 3. 開発を引き継…

以前書いた通り、Blenderは2.83よりVRモードが追加されています。 www.crossroad-tech.com これを使うと、WindowsPCのBlenderで作ったCGをVRヘッドセットを装着して直接確認することができます。以前試したときはOculus Quset CV1で試しましたが、今回はQues…

最近、Unreal Engineの勉強のためにParallel DesktopのWindows11環境を使っています。 Parallel DesktopでのWindows11は便利なのですが、Macの日本語キーボードの「かな」と「英数」を使った文字入力が正しく効かないので文字入力がしづらいという問題があり…

最近、自宅のWindows10デスクトップの調子がおかしくて困っていたのですが、休みの日に調べたらマザーボードの電池が切れかけていることが原因とわかりました。 今回は、マザーボードの電池が切れることでどんな症状が起きたのか、私が使っているH97I-PLUSと…

この投稿は、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モード…

以前このブログでPWA (Progressive Web Apps) という技術について書いたことがあります。今回はPWAのコミュニティ「PWA Night」よりお誘いを受けて発表させていただきました。 この記事ではPWA Nightのミートアップ概要と自分の発表についてまとめました。 1…

先週、このツイートをきっかけに購入したSuface Duoが届きました！ 投げ売り状態になっている初代Surface Duo、$440なら全然ありだな。元々が$1500なのでハードの高級感はすごい。マンガ読みデバイスとしては最強に近い。見開きも行ける。 pic.twitter.com/z…

こんなニーズがあるかわかりませんが、突然発生したので備忘録として書いておきます。 Microsoft Edge : 95.0.1020.30 (MacOS) 1. 何が起きたかについて 2. 解決方法：設定から「テーマ」を変更する 3. 補足：垂直タブは意外に便利