CrossRoad

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

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…

Babylon.js Editor v4.2.0で魔法剣エフェクトを表示させる方法

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

Babylon.js Editorで移動するglbキャラクターにカメラをつける方法

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

アニメーション付きキャラクタモデルをBabylon.js Editorで動かす方法

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

Ready Player Meのキャラクタモデルに複数のアニメーションを割り当てて、Babylon.js で再生する方法

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

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 後編

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

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 前編

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

AT&TのUnlock your deviceでPendingのまま進まなくなったときの対処方法 (Surface Duo)

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

A report of Babylon.js meetup Vol.1

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をビルドする方法

Babylon.js v5が公開されています。これまでは4.2.Xだったので久しぶりのメジャーアップデートです。 公式アナウンスも出ており、かっこいいビデオも公開されています。 We'd like to formally introduce the next version of the Babylon Platform - #Babyl…

Babylon.jsのGUI Editorで作ったGUIをソースコードから制御する方法

前回の記事ではGUI Editorの基本的な使い方を説明しました。 www.crossroad-tech.com 今回はGUI Editorを使ってゲームのタイトル画面と設定画面を作ってみたので、この画面をソースコードから切り替える方法を解説します。 なお、この記事で説明に使っている…

Babylon.js v5で正式に追加されたGUI Editorの使い方をまとめました

Babylon.js v5がリリースされました。どちらかというと安定性強化が多いのですが、大きな機能追加がいくつか入っています。 この記事では、追加された機能の1つである、「GUI Editor」について概要から使い方までを紹介します。 1. GUI Editorとは? 2. GUI…

【2022/5/9 エラー問題の対処方法を追記】Babylon.js Editor 4.1.0で追加されたPackge機能について

先日、Babylon.js Editorが4.1.0にアップデートされました。ここではPackageという機能が新しく追加されています。 Package機能を使うとEditorで作った内容をまとめて出力できます。出力結果をサーバに配置すると、Webブラウザで実行することができます。 今…

Blenderでモーション付きアバターをglb形式で出力する方法

前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。 www.crossroad-tech.com このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが…

Plaskで取得したbvh形式モーションをglb形式のアバターに適用させる方法

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

Surface DuoのAndroid11アップデートによる変化について

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

WebXRをサポートするFirefox Realityの後継ブラウザ「Wolvic」について

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

Blender3.0のVirtual RealityモードをQuest2で試してみました

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

Intel MacとParallel Desktop17 (Windows11) でかな・英数入力キーを使う方法

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

マザーボードの電池消耗による症状の例と電池交換の手順について (H97I-PLUS)

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

Babylon.jsのWebXR形式で掴む機能を実装する方法

この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の23日目です。 前回は「Okamoto S」さんの[WebXR] UnityとiPhone LiDAR、THETAを使った崖下を覗ける360°WebGLアプリを作ってみるでした。 Babylon.jsというフレームワークはWebXRに対応しており、i…

Babylon.jsのWebXR形式でテレポート移動を実装する方法

この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 の2日目です。 前回はHEAVEN ちゃん (@ikkou) | Twitter さんの#WebXR ( WebVR/WebAR ) の現状確認 2021 Winterでした。 Babylon.jsというフレームワークはWebXRに対応しており、immersive-vrモード…

PWA Night vol.33 ~WebXR~ の概要をまとめました

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

Surface Duoの購入方法と便利アプリについて

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

Microsoft Edgeでダークテーマのアドレスバーの文字が見づらいときの対処方法

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