{"id":408,"date":"2023-04-19T16:00:12","date_gmt":"2023-04-19T16:00:12","guid":{"rendered":"https:\/\/threeaces.co.uk\/insights\/?p=408"},"modified":"2023-08-01T15:53:29","modified_gmt":"2023-08-01T15:53:29","slug":"using-chat-gpt-to-create-a-three-js-composition","status":"publish","type":"post","link":"https:\/\/threeaces.co.uk\/insights\/creative-tech\/using-chat-gpt-to-create-a-three-js-composition\/","title":{"rendered":"Using Chat GPT to create a THREE.js composition"},"content":{"rendered":"\n

I wanted to try using Chat GPT to write code for me based on a simple starting prompt. I had already successfully done that for a very simple composition, now I wanted to try to get Chat GPT to do as much as the work as possible. The idea was to have one instance working as a coder – we\u2019ll call it Coder, and the other reviewing its output – we\u2019ll call it Assistant.<\/p>\n\n\n\n

The purple background text is my prompts, blue background text is Chat GPT’s answers.<\/p>\n\n\n\n

Setup<\/h2>\n\n\n\n

I started by feeding Coder GPT a prompt describing our framework and platform, along with example code and type definition for a VisComp ( visual composition, our main building blocks, similar to Unity game objects ).<\/p>\n\n\n\n

I then gave it the following prompt:<\/p>\n\n\n\n

\n

Write the typedef and the code for a VisComp that:<\/p>\n\n\n\n

– creates a variable amount of objects using its ‘materials’ and ‘geometries’ inputs<\/p>\n\n\n\n

– positions the objects in space on the surface of a sphere of variable radius<\/p>\n\n\n\n

– animates each object along its own curve, which is procedurally generated and loops back onto itself<\/p>\n<\/blockquote>\n\n\n\n

The code it came up with seemed OK, but that wasn’t for to me to judge.<\/p>\n\n\n\n

\n

Here is the type definition and code for the VisComp as per your requirements:<\/p>\n\n\n\n

Example type definition:<\/p>\n\n\n\n

typescriptCopy codetype SphereSurfaceVisComp = {\n  materials: Material[];\n  geometries: Geometry[];\n  count: int;\n  radius: float;\n  \/**\n   * @meta {\"min\":0,\"max\":1}\n   *\/\n  curveTightness: float;\n};\n<\/code><\/pre>\n\n\n\n
Example VisComp code:<\/p>\n\n\n\n
javascriptCopy codeclass SphereSurfaceVisComp extends VisComp {\n  start() {\n    super.start();\n    this.generateObjects();\n  }\n\n  generateObjects() {\n    if (this.objects) {\n      for (let obj of this.objects) {\n        obj.material.dispose();\n        obj.geometry.dispose();\n        this.cont3D.remove(obj);\n      }\n    }\n\n    this.objects = [];\n\n    const materials = this.inputs.get('materials');\n    const geometries = this.inputs.get('geometries');\n    const count = this.inputs.getObject('count');\n    const radius = this.inputs.get('radius');\n    const curveTightness = this.inputs.get('curveTightness');\n\n    for (let i = 0; i < count; i++) {\n      const mat = materials[i % materials.length];\n      const geom = geometries[i % geometries.length];\n      const obj = new THREE.Mesh(geom, mat);\n      const phi = Math.random() * Math.PI * 2;\n      const theta = Math.acos(2 * Math.random() - 1);\n      obj.position.set(\n        radius * Math.sin(theta) * Math.cos(phi),\n        radius * Math.sin(theta) * Math.sin(phi),\n        radius * Math.cos(theta)\n      );\n      obj.curveTightness = curveTightness;\n      obj.curveOffset = Math.random() * Math.PI * 2;\n      obj.curveSpeed = Math.random() * 0.01 + 0.005;\n      this.cont3D.add(obj);\n      this.objects.push(obj);\n    }\n  }\n\n  inputChanged(event) {\n    switch (event.type) {\n      case 'materials':\n      case 'geometries':\n      case 'radius':\n      case 'curveTightness':\n        this.generateObjects();\n    }\n  }\n\n  dispose() {\n    if (this.objects) {\n      for (let obj of this.objects) {\n        obj.material.dispose();\n        obj.geometry.dispose();\n        this.cont3D.remove(obj);\n      }\n    }\n    super.dispose();\n  }\n\n  update(dt) {\n    super.update(dt);\n    for (let obj of this.objects) {\n      const t = (Date.now() * obj.curveSpeed + obj.curveOffset) % (Math.PI * 2);\n      const newPosition = new THREE.Vector3(\n        obj.position.x + Math.cos(t) * obj.curveTightness,\n        obj.position.y + Math.sin(t) * obj.curveTightness,\n        obj.position.z + Math.cos(t) * obj.curveTightness\n      );\n      newPosition.normalize().multiplyScalar(this.inputs.get('radius'));\n      obj.position.copy(newPosition);\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n
This VisComp creates a specified number of objects using the provided materials and geometries, positions them on the surface of a sphere with a variable radius, and animates each object along its own looping, procedurally generated curve.<\/p>\n<\/blockquote>\n\n\n\n
I started another Chat GPT chat for our Assistant:<\/p>\n\n\n\n
\n
You are Assistant GPT. You will be working in tandem with another instance of Chat GPT, which will be writing the code from my initial prompt. You will review its output and suggest how to improve it, and also provide it with any errors that happen when running the code.<\/p>\n\n\n\n
Here is the starting prompt it has received:<\/p>\n\n\n\n
[ here I pasted the prompt I gave Coder ]<\/p>\n\n\n\n
You will now review its code and suggest improvements.<\/p>\n\n\n\n
Here is the typedef and code it has generated:<\/p>\n\n\n\n
[ here i pasted the typedef and code ]<\/p>\n<\/blockquote>\n\n\n\n
I got a decent answer, with a few suggestions on improvements. Assistant also rewrote the code for me, however the code was truncated.<\/p>\n\n\n\n
\n
The generated code appears to be a VisComp class that generates objects on the surface of a sphere with a specified radius, materials, and geometries. The objects move along curved paths based on the curveTightness parameter. Overall, the code is well-structured and mostly correct. However, there are a few improvements and fixes that can be made:<\/p>\n\n\n\n
    \n
  1. In the generateObjects()<\/code> method, you should use this.inputs.getObject()<\/code> instead of this.inputs.get()<\/code> for the count parameter. This is because getObject()<\/code> is used for accessing parameters according to the initial prompt.<\/li>\n\n\n\n
  2. In the inputChanged()<\/code> method, you should regenerate the objects only if there is a change in the materials, geometries, or count. The radius and curveTightness changes should be handled separately, as they don’t require the complete regeneration of objects.<\/li>\n<\/ol>\n\n\n\n
    Here is the updated code:<\/p>\n\n\n\n
    javascriptCopy codeclass SphereSurfaceVisComp extends VisComp {\n  start() {\n    super.start();\n    this.generateObjects();\n  }\n\n  generateObjects() {\n    if (this.objects) {\n      for (let obj of this.objects) {\n        obj.material.dispose();\n        obj.geometry.dispose();\n        this.cont3D.remove(obj);\n      }\n    }\n\n    this.objects = [];\n\n    const materials = this.inputs.get('materials');\n    const geometries = this.inputs.get('geometries');\n    const count = this.inputs.getObject('count');\n    const radius = this.inputs.get('radius');\n    const curveTightness = this.inputs.get('curveTightness');\n\n    for (let i = 0; i < count; i++) {\n      const mat = materials[i % materials.length];\n      const geom = geometries[i % geometries.length];\n      const obj = new THREE.Mesh(geom, mat);\n      const phi = Math.random() * Math.PI * 2;\n      const theta = Math.acos(2 * Math.random() - 1);\n      obj.position.set(\n        radius * Math.sin(theta) * Math.cos(phi),\n        radius * Math.sin(theta) * Math.sin(phi),\n        radius * Math.cos(theta)\n      );\n      obj.curveTightness = curveTightness;\n      obj.curveOffset = Math.random() * Math.PI * 2;\n      obj.curveSpeed = Math.random() * 0.01 + 0.005;\n      this.cont3D.add(obj);\n      this.objects.push(obj);\n    }\n  }\n\n  inputChanged(event) {\n    switch (event.type) {\n      case 'materials':\n      case 'geometries':\n      case 'count':\n        this.generateObjects();\n        break;\n      case 'radius':\n      case 'curveTightness':\n        this.updateObjectParameters();\n        break;\n    }\n  }\n\n  updateObjectParameters() {\n    const radius = this.inputs.get('radius');\n    const curveTightness = this.inputs.get('curveTightness');\n    for (let obj of this.objects) {\n      obj.curveTightness = curveTightness;\n    }\n  }\n\n  dispose() {\n    if (this.objects) {\n      for (let obj of this.objects) {\n        obj.material.dispose();\n        obj.geometry.dispose();\n        this.cont3D.remove(obj);\n      }\n    }\n    super.dispose();\n  }\n\n  update(dt) {\n    super.update(dt);\n    const radius = this.inputs.get('radius');\n    for (let obj of this.objects) {\n      const t = (Date.now() * obj.curveSpeed + obj.curveOffset) % (Math.PI * 2);\n      const newPosition = new THREE.Vector3(\n        obj.position.x + Math.cos(t) * obj.curveTightness,\n        obj.position.y + Math.sin(t) * obj.curveTightness,\n        obj.position<\/code><\/pre>\n<\/blockquote>\n\n\n\n
    So I just pasted Assistant\u2019s output back into the chat with Coder without any extra prompting. And Coder finished the code from where Assistant had stopped.<\/p>\n\n\n\n
    \n
    .z + Math.cos(t) * obj.curveTightness ); newPosition.normalize().multiplyScalar(radius); obj.position.copy(newPosition); } } }<\/p>\n\n\n\n
    This updated VisComp class now uses this.inputs.getObject()<\/code> for accessing the count<\/code> parameter and handles changes to the radius<\/code> and curveTightness<\/code> parameters separately, without regenerating the objects entirely. Instead, the updateObjectParameters()<\/code> method is called, which updates the necessary parameters for the existing objects in the scene.<\/p>\n<\/blockquote>\n\n\n\n
    From what I\u2019ve seen, when Chat GPT completes code snippets, it loses the code highlighting, which is a bit inconvenient.<\/p>\n\n\n\n
    I pasted the code and typedef into our CMS\u2019s editor app, selected a few geometries and materials, and arbitrary values for the count and curveTightness inputs.<\/p>\n\n\n\n
    The code didn;t run, as an error was thrown from somewhere inside the THREE.js library. I checked the GPT generated code and easily\u00a0figured out where the error was coming from. But I wanted to see if GPT would be able to identify it.<\/p>\n\n\n\n
    \n
    ee.min.js:6 Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at Ki.updateMorphTargets (three.min.js:6:106109) at new Ki (three.min.js:6:105732) at SphereSurfaceVisComp.generateObjects (9d8e385b-ca6d-45aa-8ed2-674e27798ee9:27:19) at SphereSurfaceVisComp.start (9d8e385b-ca6d-45aa-8ed2-674e27798ee9:4:10) at SceneSingle.js:332:20 at Generator.next (<anonymous>) at s (asyncToGenerator.js:3:20) at o (asyncToGenerator.js:25:9) at asyncToGenerator.js:32:7 u<\/p>\n<\/blockquote>\n\n\n\n
    <\/p>\n\n\n\n
    Its solution didn\u2019t work, but it was an OK try.<\/p>\n\n\n\n
    \n
    It seems that you’re encountering an error related to the THREE.js library, specifically in the updateMorphTargets<\/code> function. This error typically occurs when the geometry is undefined or null. To resolve this issue, please ensure that you have properly loaded and assigned the geometries before creating the mesh in the generateObjects()<\/code> method.<\/p>\n\n\n\n
    Here’s the updated generateObjects()<\/code> method with added checks for valid geometries and materials:<\/p>\n\n\n\n
    javascriptCopy codegenerateObjects() {\n  if (this.objects) {\n    for (let obj of this.objects) {\n      obj.material.dispose();\n      obj.geometry.dispose();\n      this.cont3D.remove(obj);\n    }\n  }\n\n  this.objects = [];\n\n  const materials = this.inputs.get('materials');\n  const geometries = this.inputs.get('geometries');\n  const count = this.inputs.getObject('count');\n  const radius = this.inputs.get('radius');\n  const curveTightness = this.inputs.get('curveTightness');\n\n  if (!materials || !geometries || materials.length === 0 || geometries.length === 0) {\n    return;\n  }\n\n  for (let i = 0; i < count; i++) {\n    const mat = materials[i % materials.length];\n    const geom = geometries[i % geometries.length];\n\n    if (!mat || !geom) {\n      continue;\n    }\n\n    const obj = new THREE.Mesh(geom, mat);\n    const phi = Math.random() * Math.PI * 2;\n    const theta = Math.acos(2 * Math.random() - 1);\n    obj.position.set(\n      radius * Math.sin(theta) * Math.cos(phi),\n      radius * Math.sin(theta) * Math.sin(phi),\n      radius * Math.cos(theta)\n    );\n    obj.curveTightness = curveTightness;\n    obj.curveOffset = Math.random() * Math.PI * 2;\n    obj.curveSpeed = Math.random() * 0.01 + 0.005;\n    this.cont3D.add(obj);\n    this.objects.push(obj);\n  }\n}\n<\/code><\/pre>\n\n\n\n
    This updated generateObjects()<\/code> method checks if the materials<\/code> and geometries<\/code> arrays are not null and not empty, and checks if the individual mat<\/code> and geom<\/code> elements are not null before creating the mesh. If the geometry or material is not valid, the loop will continue without creating the object. Make sure your assets are properly loaded before creating the VisComp.<\/p>\n<\/blockquote>\n\n\n\n
    The error in the code was caused by my initial prompt, which used the wrong XRC framework method, so GPT was working from an incorrect example\u2026 <\/p>\n\n\n\n
    I informed GPT about it and told it I would fix the code myself.<\/p>\n\n\n\n
    Having fixed the code, the composition was now running, and looking fairly decent. Have a look:<\/p>\n\n\n\n