Babylon.js Playground上のサンプルで自分が欲しい部分を ChatGPT に取り出してもらう【完走賞ゲット-22】

※ Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です

この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 22日目の記事です。

今回の内容

今回の内容は、Babylon.js Playground上で公開されているサンプルで、自分が欲しい部分がその全体ではなく一部だという時に、ChatGPT に取り出しをやってもらった話についてです。

以下の記事に書いた内容をやる中で、Babylon.js Playground上で公開されていたパーティクルを使った描画をいくつか見ていきました。その中で、パーティクル描画のコアの部分のみを取り出したいということがあり、それをやるのに試しに ChatGPT でやってみたという流れのものです。

●ブラウザのウィンドウをスクリーン上で動かした時の位置の変化が Babylon.js で描画したパーティクルの数・背景の色などに影響する処理【Babylon.js-3】 - Qiita
　https://qiita.com/youtoy/items/1a4bf2fd0eef426dd4a0

実際に試してみる

やってみたこと

まず、上で「パーティクル描画のコアの部分のみを取り出したい」と書いていた話の、対象の 1つが以下です。

●Particle System Examples | Babylon.js Playground
　https://playground.babylonjs.com/#0K3AQ2#3067

ここで公開されている内容は、パーティクルの描画を行う部分以外に、GUI でパーティクル描画のパラメータを変更できるようにする部分が含まれていました。
それらの中の、パーティクルの描画を行う部分のみを取り出そうとしてみました。

ChatGPT に依頼した内容

ChatGPT を使って、上に書いた内容を進めていきます。

以下が、ChatGPT で入力したプロンプトです。

以下は  Babylon.js Playground上で示されたサンプルです。
描画の処理と、それに加えて、GUI上でスライダーバーなどを使ってパラメータを変える処理が入っています。そのGUI上で操作する処理は除き、最低限のパーティクル描画の部分のみ残したコードを提示してください。
説明なしのコメントなしで、コードのみ提示してください。

### 
var createScene = function () {
    var scene = new BABYLON.Scene(engine);
（以降、省略）

### の下に貼り付けた内容は、Babylon.js Playground上で公開されているサンプルの内容そのままです。

ChatGPT のレスポンス

上記の内容に対して、ChatGPT のレスポンスは以下になりました。

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Setup environment
    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", -Math.PI / 2, 7 * Math.PI / 16, 20, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    // Ground
    var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
    ground.position = new BABYLON.Vector3(0, -50, 0);
    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
    ground.material.backFaceCulling = false;
    ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);

    // Create a particle system
    var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

    // Texture of each particle
    particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene);

    // Where the particles come from
    particleSystem.emitter = BABYLON.Vector3.Zero(); // the starting position
    particleSystem.minEmitBox = new BABYLON.Vector3(-1, -1, -1); // Bottom Left Front
    particleSystem.maxEmitBox = new BABYLON.Vector3(1, 1, 1); // Top Right Back

    // Colors of all particles
    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

    // Size of each particle (random between...
    particleSystem.minSize = 0.1;
    particleSystem.maxSize = 0.5;

    // Life time of each particle (random between...
    particleSystem.minLifeTime = 0.3;
    particleSystem.maxLifeTime = 1.5;

    // Emission rate
    particleSystem.emitRate = 1500;

    // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
    particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

    // Set the gravity of all particles
    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

    // Direction of each particle after it has been emitted
    particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
    particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

    // Angular speed, in radians
    particleSystem.minAngularSpeed = 0;
    particleSystem.maxAngularSpeed = Math.PI;

    // Speed
    particleSystem.minEmitPower = 1;
    particleSystem.maxEmitPower = 3;
    particleSystem.updateSpeed = 0.005;

    // Start the particle system
    particleSystem.start();

    return scene;
}

そして、レスポンスの内容を Babylon.js Playground上で動作させてみたところ、問題なく動きました。

さらに短くする

ChatGPT に入力したプロンプトの中の「コメントなし」というのは、コード内のコメントをなくして良いという意図でしたが、それは意図通りになっていませんでした。
その部分は手動で取り除いて、さらに内容を短くしてみました（それと合わせて、var が使われている部分で const に置きかえて問題ないところを、全て置きかえてしまったりもしました）。

内容は以下の通りです。

const createScene = function () {
  const scene = new BABYLON.Scene(engine);

  const light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
  const camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", -Math.PI / 2, 7 * Math.PI / 16, 20, new BABYLON.Vector3(0, 0, 0), scene);
  camera.attachControl(canvas, true);

  const ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
  ground.position = new BABYLON.Vector3(0, -50, 0);
  ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
  ground.material = new BABYLON.StandardMaterial("groundMat", scene);
  ground.material.backFaceCulling = false;
  ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);

  const particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
  particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene);

  particleSystem.emitter = BABYLON.Vector3.Zero(); // the starting position
  particleSystem.minEmitBox = new BABYLON.Vector3(-1, -1, -1); // Bottom Left Front
  particleSystem.maxEmitBox = new BABYLON.Vector3(1, 1, 1); // Top Right Back

  particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
  particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
  particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

  particleSystem.minSize = 0.1;
  particleSystem.maxSize = 0.5;

  particleSystem.minLifeTime = 0.3;
  particleSystem.maxLifeTime = 1.5;

  particleSystem.emitRate = 1500;

  particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

  particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

  particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
  particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

  particleSystem.minAngularSpeed = 0;
  particleSystem.maxAngularSpeed = Math.PI;

  particleSystem.minEmitPower = 1;
  particleSystem.maxEmitPower = 3;
  particleSystem.updateSpeed = 0.005;

  particleSystem.start();

  return scene;
}

おおよそ、自分が得たいと思っていた内容を取り出すことができました。

おわりに

今回、Babylon.js Playground上で公開されているサンプルに対し、ChatGPT にその一部を取り出してもらう、ということを試しました。

Babylon.js に限らず、描画系のプログラムでそのコアの部分だけを取り出したいということがあり、内容を見つつ手動で取り出すというのをやっていました。今回は、それを ChatGPT でやってみたのですが、今回の例ではサクッと意図通りの内容を取り出すことができて、とても便利でした。