この記事はBabylon.js Advent Calendar 2022の3日目の記事です。
はじめに
ChatGPT で Babylon.js のサンプルも生成できるらしいと聞いて、自分も試してみました。
ChatGPT への依頼内容
依頼内容は日本語で行えるようです。以下をお願いしました。
Babylon.jsで物理演算でボールを地面に落下させるサンプルを教えてください。
条件は下記の通りです。
・物理演算は Babylon.js の物理演算サポート機能を使用しプラグインに Oimo.js を使用する。
・ボールのサイズは半径0.5メートルとする。
・ボールの初期位置は10メートルの高さとする。
・地面は10×10メートルのサイズとする。
・カメラとライトを設定する。
・カメラは高さ10メートル、距離10メートルの位置に設定する。
ChatGPT の回答内容
以下、ChatGPT の回答内容になります。
Babylon.jsで物理演算を使用してボールを地面に落下させるサンプルを提供します。
まず、最初に、次のJavaScriptライブラリをインポートする必要があります。
<!-- Import BabylonJS and OimoJS -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/oimo.js"></script>
次に、次のHTMLを使用して、3Dステージを作成します。
<!-- Create a canvas element to render the scene -->
<canvas id="renderCanvas"></canvas>
次に、次のJavaScriptを使用して、3Dステージと物理演算ワールドを作成します。
// Create the BabylonJS engine
var engine = new BABYLON.Engine(document.getElementById("renderCanvas"));
// Create the scene and enable physics
var scene = new BABYLON.Scene(engine);
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.OimoJSPlugin());
// Create the camera and light
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.setPosition(new BABYLON.Vector3(0, 10, 10));
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
ここで、次のJavaScriptを使用して、ボールを作成します。
// Create a ball with a radius of 0.5 meters
var ball = BABYLON.MeshBuilder.CreateSphere("ball", {diameter: 0.5}, scene);
// Set the initial position of the ball to 10 meters above the ground
ball.position.y = 10;
// Enable physics for the ball
ball.physicsImpostor = new BABYLON.PhysicsImpostor(ball, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 1}, scene);
最後に、次のJavaScriptを使用して、地面を作成します。
// Create a ground with a size of 10x10 meters
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
// Enable physics for the ground
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 0, restitution: 0.9}, scene);
回答内容が正しいか検証してみる
些細な誤りはありますが、概ねあってそうです。（というか模範解答と言ってよいかもしれません。）
誤） <script src="https://cdn.babylonjs.com/oimo.js"></script>
正） <script src="https://cdn.babylonjs.com/Oimo.js"></script>
物理演算の設定についても下記のように、Mesh の形状ごとに適切な形状が指定されているので正しそうです。
・ボールの場合は、BABYLON.PhysicsImpostor.SphereImpostor
・地面の場合は、BABYLON.PhysicsImpostor.BoxImpostor
また、質量の指定（mass）として、地面については「0」を指定していることが分かります。これは物理演算で固定オブジェクトとするため指定になっている為、正しい指定になります。
mass: The only mandatory parameters is mass, which is the object's mass in kg. A 0 as a value will create a static impostor - good for floors.
mass: 唯一の必須パラメーターは mass で、オブジェクトの質量 (kg) です。 値として 0 を指定すると、静的なインポスターが作成されます - 床に適しています。
Babylon.js Playground で動かしてみる
動いてそうです。
ChatGPT が苦手なことは何か？
現状気になった個所としては
・JavaScript で var を多用してくる（constやletを使ってほしいとお願いしても、覚えてくれない？）
・Babylon.js の物理演算プラグインとして Oimo.js を使う場合と生の Oimo.js を使う場合の使い方が混ざる時がある。
・コメントが時々英語になる（最初は日本語でコメントが表示していましたが時々英語でのコメント表示になることがありました。）
・Babylon.js の非推奨なメソッドが使われることがある（現在、BABYLON.Meshは非推奨でBABYLON.MeshBuilderが推奨されている等）
・ソースが長いと途切れることがある。※ その場合は「途切れています」とか「続き」とか入力すると続きを表示してくれる。
といったあたりです。
使い始めて半日程なので、ほかにも色々と苦手なことはあるかもしれません。
おわりに
まだプレビュー版ということですが、十分に実用的なレベルに達しているのではないでしょうか。
学習次第な気がするので、今後改善していくと思います。
今回は Babylon.js での例でしたが、機会があれば他のライブラリでも実験してみようと思います。