2018年11月28日水曜日

jsdo.itにBabylon.jsのよる3Dプログラムを投稿

 タイトルにあるようにjsdo.itに、Babylon.jsという3Dライブラリを使用したプログラムをいつくか作成してアップロードしてみました。

 前にも、自分のNaverまとめ「 jsdo.it投稿コードまとめ Babylon.jsで3D表示その1
 」にまとめているようにBabylon.jsによる3Dプログラムを作成していましたが、今回以下のサイトでBabylon.jsを使いこなしてのゲーム開発について説明されているのを見て、久しぶりにBabylon.jsによるプログラムがしてみたくなりタイトルにあるようなプログラム投稿となりました。

CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成
WebGLフレームワーク「Babylon.js 3.3.0」リリース!VR向けGUI対応、パーティクルエフェクト強化、動画キャプチャー機能など


作成して投稿したプログラムの、画像サムネイル付きのNaverまとめでの一覧は以下になります。

jsdo.it投稿コードまとめ Babylon.jsで3D表示その2
jsdo.itに投稿したBabylon.jsバージョン3.2による3Dプログラム
約15個のプログラムの一覧を表示しています

jsdo.it投稿コードまとめ Babylon.jsで3D表示その3
jsdo.itに投稿したBabylon.jsバージョン3.3による3Dプログラム
約70個のプログラムの一覧を表示しています

 今回久しぶりに使用したBabylon.jsでは、glTFという3Dモデルのファイルフォーマットがアニメーション付きのものも含めて非常によく表示できたと感じました。
 物理演算もOimo.jsやCannon.jsといった物理演算ライブラリをラップして使えるようです。 
 あとは、個人的にですが、Three.jsと比べてGUIの機能がかなりBabylon.jsライブラリ自体の機能として取り込まれていて、ゲームなどのインターフェースが作りやすそうだと感じられました。


 以下、投稿順とは一致してませんが、おおまかな区分と説明で分類してみたjsdo.it投稿プログラムの一覧です。 Babylon.jsのバージョンは3.3.0でのものです。

区分は以下のようになっています
①基本機能
②GUI機能とSound機能
③Tween的アニメーション機能
④glTFファイル形式の3Dモデル表示
⑤glTFファイル形式のアニメーション付き3Dモデル表示
⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
⑦babylon形式の3Dモデルを表示


①基本機能
基本的な機能、単純な3Dオブジェクトを表示したり、ただテクスチャをそれらに貼り付けて表示する機能を試したプログラムの一覧です。
Babylon.js v3.3.0 でBoxを表示

Babylon.js v3.3.0 でSphereを表示

Babylon.js v3.3.0 でPlaneを表示

Babylon.js v3.3.0 でCylinderを表示

Babylon.js v3.3.0 でTorusを表示

Babylon.js v3.3.0 でTorusKnotを表示

Babylon.js v3.3.0 でLinesを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたPlaneを表示

Babylon.js v3.3.0 テクスチャを貼り付けたBoxを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたSphereを表示


②GUI機能とSound機能
Babylon.jsによるラベルやボタン表示の機能、サウンド再生機能、3Dオブジェクトをクリックしたときの機能、Cannon.jsでの衝突判定、等を試しています。
Babylon.js v3.3.0 で3D GUI機能テスト

Babylon.js v3.3.0 でGUI機能テスト

Babylon.js v3.3.0 で3D GUI(MeshButton3D)機能テスト

Babylon.js v3.3.0 でSound再生機能テスト

Babylon.js v3.3.0 でSound on Mesh再生機能テスト

Babylon.js v3.3.0 でGUIのボタン・ラベルの機能いろいろテスト

Babylon.js v3.3.0 でGUIボタンでBox操作してみるテスト

Babylon.js v3.3.0 で衝突判定つき3Dオブジェクトを操作してみるテスト

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 で回転・前進操作を対象3Dオブジェクトに設定してみるテスト

Babylon.js v3.3.0 でArcRotateCameraの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 のTrigger機能で3Dオブジェクトへのクリック・タッチ判定テスト

Babylon.js v3.3.0 でClick/Touch処理の3Dオブジェクトへの追加テスト


③Tween的アニメーション機能
Tweenという名前で呼ばれている、プログラム上で操作対象の動きを指定する機能を使用してみました。 Babylon.jsではAnimationという名前でそのTween的機能が提供されているようでした。
Babylon.js v3.3.0 でAnimation

Babylon.js v3.3.0 でAnimationその2

Babylon.js v3.3.0 でAnimationその3


④glTFファイル形式の3Dモデル表示
glTFというファイル形式の3Dモデルを表示しています。 最初にBabylon.jsをさわりはじめたころは、あまりうまく表示できず一度挫折しましたが、今回のBabylon.jsのテストではほぼ問題なく表示できました。 今回作成したBabylon.jsによるプログラムの大部分はglTFによる3Dモデルの表示になっています。
Babylon.js v3.3.0 でMagicaVoxelで作成した3DモデルをglTFファイルに変換して表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その2

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その3

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その4

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その5

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その6

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その7

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その8

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その9

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その10

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その11

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その12

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その13

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その14

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その15

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その17

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その20

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その21

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その22

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その24

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その27

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その28

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その29

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その32

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その34

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その36


⑤glTFファイル形式のアニメーション付き3Dモデル表示
glTF形式のアニメーション付き3Dモデルを表示しています。 今回は、アニメーション付きのものまでサクッと簡単に表示できてしまいました。 3Dモデルの読み込み時、アニメーション時に処理重い場合はありますが。
Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデル(重め)を表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その16

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その18

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その19

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その23

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その25

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その26

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その30

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その31

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その33

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その35

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その37


⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
Babylon.jsの機能で表示できるGUIボタンで、3Dモデルのアニメーションを切り替えられるようにしてみました。 ゲームなんかで3Dモデルのアニメーションを切り替えるのに利用できるかもしれません。
Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その38

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その39


⑦babylon形式の3Dモデルを表示
Babylon.jsのbabylon形式3Dファイルを表示しています。 表示だけ、アニメーション付き、アニメーション切り替え機能付き、とあります。
Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示
3Dモデルのアニメーションとその切り替え機能付き

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その2
3Dモデル表示のみ

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その3
3Dモデルのアニメーション

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その4
3Dモデルのアニメーション



あとはこのプログラム
ES6(ES2015)ではじめてのBabylon.js Ver.3.2.0 元ネタ
のように、ECMAScriptによるBabylon.jsのプログラムもできるようなので、そのうち気が向いたらECMAScriptによる書き直しなんかもやってみるかもです。

0 件のコメント:

コメントを投稿