From ffc72d0127b88bac85bdb4b5d25deb49847a64b0 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Tue, 4 Feb 2025 15:55:12 +0100
Subject: [PATCH 1/8] rename isNode to isANode

---
 src/core/a-node.js          |  8 ++++----
 src/systems/camera.js       |  2 +-
 tests/core/a-entity.test.js | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/core/a-node.js b/src/core/a-node.js
index fd23571b191..5c53c9e3971 100644
--- a/src/core/a-node.js
+++ b/src/core/a-node.js
@@ -14,8 +14,8 @@ export var knownTags = {
   'a-entity': true
 };
 
-function isNode (node) {
-  return node.tagName.toLowerCase() in knownTags || node.isNode;
+function isANode (node) {
+  return node.tagName.toLowerCase() in knownTags || node.isANode;
 }
 
 /**
@@ -29,7 +29,7 @@ export class ANode extends HTMLElement {
     super();
     this.computedMixinStr = '';
     this.hasLoaded = false;
-    this.isNode = true;
+    this.isANode = true;
     this.mixinEls = [];
   }
 
@@ -119,7 +119,7 @@ export class ANode extends HTMLElement {
     if (this.hasLoaded) { return; }
 
     // Default to waiting for all nodes.
-    childFilter = childFilter || isNode;
+    childFilter = childFilter || isANode;
     // Wait for children to load (if any), then load.
     children = this.getChildren();
     childrenLoaded = children.filter(childFilter).map(function (child) {
diff --git a/src/systems/camera.js b/src/systems/camera.js
index 4c00ada75c8..d4615a4f44e 100755
--- a/src/systems/camera.js
+++ b/src/systems/camera.js
@@ -59,7 +59,7 @@ export var System = registerSystem('camera', {
       });
 
       // Load camera and wait for camera to initialize.
-      if (cameraEls[i].isNode) {
+      if (cameraEls[i].isANode) {
         cameraEls[i].load();
       } else {
         cameraEls[i].addEventListener('nodeready', function () {
diff --git a/tests/core/a-entity.test.js b/tests/core/a-entity.test.js
index 13eddfff21e..284173e65dc 100644
--- a/tests/core/a-entity.test.js
+++ b/tests/core/a-entity.test.js
@@ -37,7 +37,7 @@ suite('a-entity', function () {
   });
 
   test('createdCallback', function () {
-    assert.ok(el.isNode);
+    assert.ok(el.isANode);
     assert.ok(el.isEntity);
   });
 
@@ -669,9 +669,9 @@ suite('a-entity', function () {
       el.appendChild(a);
       el.appendChild(b);
       setTimeout(function () {
-        a.isNode = false;
+        a.isANode = false;
         a.hasLoaded = false;
-        b.isNode = false;
+        b.isANode = false;
         b.hasLoaded = false;
         el.hasLoaded = false;
         el.addEventListener('loaded', function () {
@@ -697,9 +697,9 @@ suite('a-entity', function () {
       el.appendChild(a);
       el.appendChild(b);
       setTimeout(function () {
-        a.isNode = false;
+        a.isANode = false;
         a.hasLoaded = false;
-        b.isNode = false;
+        b.isANode = false;
         b.hasLoaded = false;
         el.hasLoaded = false;
         el.addEventListener('loaded', function () {

From 8a911a8b94fcdadadb15a1106f2921630f751e2c Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Tue, 4 Feb 2025 15:56:16 +0100
Subject: [PATCH 2/8] add 'npm run start:webgpu' command to use WebGPURenderer

---
 package.json                     |  1 +
 src/core/scene/a-scene.js        |  5 ++++-
 tests/core/scene/a-scene.test.js |  4 +++-
 webpack.common.cjs               | 13 ++++++++++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d5da1bf704f..c90b4ff9cd8 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "prerelease": "node scripts/release.js 1.5.0 1.6.0",
     "start": "npm run dev",
     "start:https": "npm run dev -- --server-type https",
+    "start:webgpu": "cross-env WEBGPU=true npm run dev -- --server-type https",
     "test": "karma start ./tests/karma.conf.js",
     "test:docs": "node scripts/docsLint.js",
     "test:firefox": "npm test -- --browsers Firefox",
diff --git a/src/core/scene/a-scene.js b/src/core/scene/a-scene.js
index 985d0479ea3..bde29348998 100644
--- a/src/core/scene/a-scene.js
+++ b/src/core/scene/a-scene.js
@@ -547,7 +547,10 @@ export class AScene extends AEntity {
       };
     }
 
-    renderer = this.renderer = new THREE.WebGLRenderer(rendererConfig);
+    renderer = this.renderer = new (THREE.WebGLRenderer || THREE.WebGPURenderer)(rendererConfig);
+    if (!renderer.xr.setPoseTarget) {
+      renderer.xr.setPoseTarget = function () {};
+    }
     renderer.setPixelRatio(window.devicePixelRatio);
 
     if (this.camera) { renderer.xr.setPoseTarget(this.camera.el.object3D); }
diff --git a/tests/core/scene/a-scene.test.js b/tests/core/scene/a-scene.test.js
index 75f51f587e0..e1803177549 100644
--- a/tests/core/scene/a-scene.test.js
+++ b/tests/core/scene/a-scene.test.js
@@ -76,7 +76,9 @@ suite('a-scene (without renderer) - WebXR', function () {
       // Mock renderer.
       assert.ok(sceneEl.renderer);
       // Mock renderer is not a real WebGLRenderer.
-      assert.notOk(sceneEl.renderer instanceof THREE.WebGLRenderer);
+      assert.notOk(
+          (THREE.WebGLRenderer && sceneEl.renderer instanceof THREE.WebGLRenderer) ||
+          (THREE.WebGPURenderer && sceneEl.renderer instanceof THREE.WebGPURenderer));
     });
   });
 
diff --git a/webpack.common.cjs b/webpack.common.cjs
index dff41f94d44..b009934b42e 100644
--- a/webpack.common.cjs
+++ b/webpack.common.cjs
@@ -1,6 +1,7 @@
+var path = require('path');
 var webpack = require('webpack');
 
-module.exports = {
+var config = {
   entry: './src/index.js',
   devtool: 'source-map',
   plugins: [
@@ -28,3 +29,13 @@ module.exports = {
     ]
   }
 };
+
+if (process.env.WEBGPU === 'true') {
+  config.resolve = {
+    alias: {
+      'three$': path.resolve(__dirname, 'node_modules/three/build/three.webgpu.js')
+    }
+  };
+}
+
+module.exports = config;

From 9cb5bb31d537fcacead3485a8a6694f7eb57102b Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Thu, 6 Feb 2025 09:42:23 +0100
Subject: [PATCH 3/8] import UniformsUtils and UniformsLib, those are not
 exposed on the three/webgpu build

---
 src/shaders/msdf.js | 6 ++++--
 src/shaders/sdf.js  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/shaders/msdf.js b/src/shaders/msdf.js
index c638ca5c8aa..0d41e741055 100644
--- a/src/shaders/msdf.js
+++ b/src/shaders/msdf.js
@@ -1,5 +1,7 @@
 import { registerShader } from '../core/shader.js';
 import THREE from '../lib/three.js';
+import { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js';
+import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js';
 
 var VERTEX_SHADER = [
   '#include <common>',
@@ -84,8 +86,8 @@ export var Shader = registerShader('msdf', {
   fragmentShader: FRAGMENT_SHADER,
 
   init: function () {
-    this.uniforms = THREE.UniformsUtils.merge([
-      THREE.UniformsLib.fog,
+    this.uniforms = UniformsUtils.merge([
+      UniformsLib.fog,
       this.initUniforms()
     ]);
     this.material = new THREE.ShaderMaterial({
diff --git a/src/shaders/sdf.js b/src/shaders/sdf.js
index 9e03dbcb972..e8a5e85d77e 100644
--- a/src/shaders/sdf.js
+++ b/src/shaders/sdf.js
@@ -1,5 +1,7 @@
 import { registerShader } from '../core/shader.js';
 import THREE from '../lib/three.js';
+import { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js';
+import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js';
 
 var VERTEX_SHADER = [
   '#include <common>',
@@ -94,8 +96,8 @@ export var Shader = registerShader('sdf', {
   fragmentShader: FRAGMENT_SHADER,
 
   init: function () {
-     this.uniforms = THREE.UniformsUtils.merge([
-       THREE.UniformsLib.fog,
+     this.uniforms = UniformsUtils.merge([
+       UniformsLib.fog,
        this.initUniforms()
      ]);
      this.material = new THREE.ShaderMaterial({

From 95fd6277f7d3cfcdf3e9cbf54580c332608b90c5 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Thu, 6 Feb 2025 09:43:47 +0100
Subject: [PATCH 4/8] renderer.info.programs is undefined with three/webgpu

---
 vendor/rStats.extras.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vendor/rStats.extras.js b/vendor/rStats.extras.js
index 56c87e5182b..3d3b8306773 100644
--- a/vendor/rStats.extras.js
+++ b/vendor/rStats.extras.js
@@ -138,7 +138,7 @@ window.threeStats = function ( renderer ) {
     function _update () {
 
         _rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
-        _rS( 'renderer.info.programs' ).set( renderer.info.programs.length );
+        _rS( 'renderer.info.programs' ).set( renderer.info.programs?.length ?? NaN );
         _rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
         _rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
         _rS( 'renderer.info.render.triangles' ).set( renderer.info.render.triangles );

From b0985c8387495160fed6e364ab80f4f297747dc4 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Thu, 6 Feb 2025 11:39:47 +0100
Subject: [PATCH 5/8] add empty tsl example

---
 examples/showcase/tsl/index.html | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 examples/showcase/tsl/index.html

diff --git a/examples/showcase/tsl/index.html b/examples/showcase/tsl/index.html
new file mode 100644
index 00000000000..11c816e7b64
--- /dev/null
+++ b/examples/showcase/tsl/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>TSL • A-Frame</title>
+    <meta name="description" content="TSL • A-Frame" />
+    <script type="importmap">
+      {
+        "imports": {
+          "aframe": "../../../dist/aframe-master.module.min.js",
+          "three": "../../../super-three-package/build/three.webgpu.js",
+          "three/webgpu": "../../../super-three-package/build/three.webgpu.js",
+          "three/tsl": "../../../super-three-package/build/three.tsl.js",
+          "three/addons/": "../../../super-three-package/examples/jsm/",
+          "aframe-extras/controls": "https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.x/dist/aframe-extras.controls.min.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import AFRAME from "aframe";
+      import "aframe-extras/controls";
+      // import { } from "three/tsl";
+    </script>
+  </head>
+  <body>
+    <a-scene background="color: #ECECEC">
+      <!--
+        <a-entity
+          position="0 0 -2"
+        ></a-entity>
+      -->
+
+      <a-plane
+        position="0 0 -2"
+        rotation="-90 0 0"
+        width="4"
+        height="4"
+        color="#7BC8A4"
+      ></a-plane>
+
+      <a-entity
+        position="0 0 1"
+        id="rig"
+        movement-controls="controls: gamepad,keyboard,nipple"
+        nipple-controls="mode: static"
+      >
+        <a-entity camera position="0 1.6 0" look-controls></a-entity>
+      </a-entity>
+    </a-scene>
+  </body>
+</html>

From d2563cdf3d74d780f932b636e97fca3dfd350531 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Mon, 10 Feb 2025 11:22:59 +0100
Subject: [PATCH 6/8] add galaxy example

---
 examples/showcase/tsl/index.html   | 135 +++++++++++++++++++++++------
 examples/showcase/tsl/message.html |  12 +++
 2 files changed, 121 insertions(+), 26 deletions(-)
 create mode 100644 examples/showcase/tsl/message.html

diff --git a/examples/showcase/tsl/index.html b/examples/showcase/tsl/index.html
index 11c816e7b64..e89e0536f8d 100644
--- a/examples/showcase/tsl/index.html
+++ b/examples/showcase/tsl/index.html
@@ -11,41 +11,124 @@
           "three": "../../../super-three-package/build/three.webgpu.js",
           "three/webgpu": "../../../super-three-package/build/three.webgpu.js",
           "three/tsl": "../../../super-three-package/build/three.tsl.js",
-          "three/addons/": "../../../super-three-package/examples/jsm/",
-          "aframe-extras/controls": "https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.x/dist/aframe-extras.controls.min.js"
+          "three/addons/": "../../../super-three-package/examples/jsm/"
         }
       }
     </script>
     <script type="module">
       import AFRAME from "aframe";
-      import "aframe-extras/controls";
-      // import { } from "three/tsl";
+      import {
+        color,
+        cos,
+        float,
+        mix,
+        range,
+        sin,
+        time,
+        uniform,
+        uv,
+        vec3,
+        vec4,
+        PI2,
+      } from "three/tsl";
+      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
+
+      AFRAME.registerComponent("galaxy", {
+        init() {
+          const material = new THREE.SpriteNodeMaterial({
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+          });
+
+          const size = uniform(0.08);
+          material.scaleNode = range(0, 1).mul(size);
+
+          const radiusRatio = range(0, 1);
+          const radius = radiusRatio.pow(1.5).mul(5).toVar();
+
+          const branches = 3;
+          const branchAngle = range(0, branches).floor().mul(PI2.div(branches));
+          const angle = branchAngle.add(time.mul(radiusRatio.oneMinus()));
+
+          const position = vec3(cos(angle), 0, sin(angle)).mul(radius);
+
+          const randomOffset = range(vec3(-1), vec3(1))
+            .pow(3)
+            .mul(radiusRatio)
+            .add(0.2);
+
+          material.positionNode = position.add(randomOffset);
+
+          const colorInside = uniform(color("#ffa575"));
+          const colorOutside = uniform(color("#311599"));
+          const colorFinal = mix(
+            colorInside,
+            colorOutside,
+            radiusRatio.oneMinus().pow(2).oneMinus()
+          );
+          const alpha = float(0.1).div(uv().sub(0.5).length()).sub(0.2);
+          material.colorNode = vec4(colorFinal, alpha);
+
+          const mesh = new THREE.InstancedMesh(
+            new THREE.PlaneGeometry(1, 1),
+            material,
+            20000
+          );
+          this.el.setObject3D("mesh", mesh);
+
+          // debug
+
+          const gui = new GUI();
+
+          gui.add(size, "value", 0, 1, 0.001).name("size");
+
+          gui
+            .addColor(
+              { color: colorInside.value.getHex(THREE.SRGBColorSpace) },
+              "color"
+            )
+            .name("colorInside")
+            .onChange(function (value) {
+              colorInside.value.set(value);
+            });
+
+          gui
+            .addColor(
+              { color: colorOutside.value.getHex(THREE.SRGBColorSpace) },
+              "color"
+            )
+            .name("colorOutside")
+            .onChange(function (value) {
+              colorOutside.value.set(value);
+            });
+        },
+        remove() {
+          const mesh = this.el.getObject3D("mesh");
+          if (mesh) {
+            mesh.material.dispose();
+            mesh.geometry.dispose();
+          }
+        },
+      });
     </script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/aframe-orbit-controls@1.3.2/dist/aframe-orbit-controls.min.js"
+      type="module"
+    ></script>
+    <script src="../../js/info-message.js" type="module"></script>
   </head>
   <body>
-    <a-scene background="color: #ECECEC">
-      <!--
-        <a-entity
-          position="0 0 -2"
-        ></a-entity>
-      -->
-
-      <a-plane
-        position="0 0 -2"
-        rotation="-90 0 0"
-        width="4"
-        height="4"
-        color="#7BC8A4"
-      ></a-plane>
-
+    <a-scene background="color: #201919" info-message="htmlSrc: #messageText">
+      <a-assets>
+        <a-asset-item id="messageText" src="message.html"></a-asset-item>
+      </a-assets>
+      <a-entity galaxy></a-entity>
       <a-entity
-        position="0 0 1"
-        id="rig"
-        movement-controls="controls: gamepad,keyboard,nipple"
-        nipple-controls="mode: static"
-      >
-        <a-entity camera position="0 1.6 0" look-controls></a-entity>
-      </a-entity>
+        camera="fov: 50; near: 0.1; far: 100"
+        look-controls="enabled: false"
+        orbit-controls="target: 0 0 0; minDistance: 0.1; maxDistance: 50; initialPosition: 4 2 5; enableDamping: true; rotateSpeed: 1"
+      ></a-entity>
     </a-scene>
   </body>
 </html>
diff --git a/examples/showcase/tsl/message.html b/examples/showcase/tsl/message.html
new file mode 100644
index 00000000000..d86940d95ed
--- /dev/null
+++ b/examples/showcase/tsl/message.html
@@ -0,0 +1,12 @@
+<p>
+  Galaxy
+  <br />
+  Based on
+  <a
+    href="https://threejs-journey.com/lessons/animated-galaxy"
+    target="_blank"
+    rel="noopener"
+    >Three.js Journey</a
+  >
+  lessons
+</p>

From 368536b9697c58cb6ad101a3a618763a2ce6c323 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Mon, 10 Feb 2025 11:24:54 +0100
Subject: [PATCH 7/8] add link to tsl example

---
 examples/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/index.html b/examples/index.html
index 7abca21f73e..de46449d11f 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -158,6 +158,7 @@ <h2>Examples</h2>
       <li><a href="mixed-reality/anchor/">Anchor (Mixed Reality)</a></li>
       <li><a href="mixed-reality/real-world-meshing/">Real World Meshing (Mixed Reality)</a></li>
       <li><a href="boilerplate/importmap/">Importmap (import teapot geometry from three/addons)</a></li>
+      <li><a href="showcase/tsl/">WebGPURenderer and TSL</a></li>
     </ul>
 
     <h2>Examples from Documentation</h2>

From f07cc1201523346885782485def002365da305df Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Mon, 10 Feb 2025 11:27:50 +0100
Subject: [PATCH 8/8] remove mesh and gui in remove

---
 examples/showcase/tsl/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/examples/showcase/tsl/index.html b/examples/showcase/tsl/index.html
index e89e0536f8d..9b9313abac4 100644
--- a/examples/showcase/tsl/index.html
+++ b/examples/showcase/tsl/index.html
@@ -80,6 +80,7 @@
           // debug
 
           const gui = new GUI();
+          this.gui = gui;
 
           gui.add(size, "value", 0, 1, 0.001).name("size");
 
@@ -108,6 +109,8 @@
           if (mesh) {
             mesh.material.dispose();
             mesh.geometry.dispose();
+            this.el.removeObject3D("mesh");
+            this.gui.destroy();
           }
         },
       });