Add three.js benchmark (#75)

Author: iainireland

JetStreamDriver.js

@@ -969,7 +969,7 @@ class Benchmark {
         this.preloads = Object.entries(this.plan.preload ?? {});
     }
 
-    scoreIdentifiers() { 
+    scoreIdentifiers() {
         const ids = Object.keys(this.allScores()).map(name => this.scoreIdentifier(name));
         return ids;
     }
@@ -1913,6 +1913,15 @@ let BENCHMARKS = [
         ],
         tags: ["Default", "Generators"],
     }),
+    new DefaultBenchmark({
+        name: "threejs",
+        files: [
+            "./threejs/three.js",
+            "./threejs/benchmark.js",
+        ],
+        deterministicRandom: true,
+        tags: ["Default", "ThreeJs"],
+    }),
     // Wasm
     new WasmEMCCBenchmark({
         name: "HashSet-wasm",
@@ -2253,7 +2262,7 @@ let BENCHMARKS = [
             "./WSL/WTrapError.js",
             "./WSL/WTypeError.js",
             "./WSL/WhileLoop.js",
-            "./WSL/WrapChecker.js", 
+            "./WSL/WrapChecker.js",
             "./WSL/Test.js",
         ],
         tags: ["Default", "WSL"],
@@ -2374,7 +2383,7 @@ for (const benchmark of BENCHMARKS) {
         throw new Error(`Duplicate benchmark with name "${name}}"`);
     else
         benchmarksByName.set(name, benchmark);
-    
+
     for (const tag of benchmark.tags) {
         if (benchmarksByTag.has(tag))
             benchmarksByTag.get(tag).push(benchmark);

threejs/benchmark.js

@@ -0,0 +1,224 @@
+/*
+ * Copyright (C) 2025 Mozilla. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+
+const NUM_PARTICLES = 8000;
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x111111);
+
+const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+const innerHeight = 1080;
+const innerWidth = 1920;
+camera.position.z = 500;
+
+const canvas = {
+  addEventListener() {},
+  style: {},
+  getContext(kind) {
+    return {
+      getExtension(extension) {
+	if (extension == 'EXT_blend_minmax') {
+          return {MIN_EXT: 32775, MAX_EXT: 32776}
+	}
+	if (extension == 'OES_vertex_array_object') {
+          return {
+            createVertexArrayOES() { return 1 },
+            bindVertexArrayOES() {},
+            deleteVertexArrayOES() {},
+          }
+	}
+      },
+      createTexture() {},
+      bindTexture() {},
+      texImage2D() {},
+      texImage3D() {},
+      texParameteri() {},
+      uniform1i() {},
+      uniform1f() {},
+      uniform2f() {},
+      uniform3f() {},
+      uniform4f() {},
+      clearColor() {},
+      clear() {},
+      clearDepth() {},
+      clearStencil() {},
+      enable() {},
+      disable() {},
+      depthFunc() {},
+      depthMask() {},
+      frontFace() {},
+      cullFace() {},
+      getContextAttributes() {},
+      createBuffer() {},
+      createFramebuffer() {},
+      bindBuffer() {},
+      bufferData() {},
+      createProgram() {},
+      attachShader() {},
+      linkProgram() {},
+      useProgram() {},
+      getAttribLocation() {},
+      getUniformLocation() {},
+      createShader() {},
+      shaderSource() {},
+      compileShader() {},
+      getShaderParameter() {},
+      getProgramInfoLog() { return "" },
+      getShaderInfoLog() { return "" },
+      getProgramParameter() {},
+      deleteShader() {},
+      colorMask() {},
+      stencilMask() {},
+      createVertexArray() {},
+      bindVertexArray() {},
+      drawElements() {},
+      lineWidth() {},
+      drawArrays() {},
+      viewport() {},
+      getParameter(param) {
+	if (param == 34930) { return 16 }
+	if (param == 35660) { return 16 }
+	if (param == 3379) { return 8192 }
+	if (param == 36347) { return 1024 }
+	if (param == 36348) { return 32 }
+	if (param == 36349) { return 1024 }
+	if (param == 35661) { return 80 }
+	if (param == 7938) { return "WebGL 2.0" }
+	if (param == 3088) { return [0,0,1024,480] }
+	if (param == 2978) { return [0,0,1024,480] }
+      },
+      MAX_TEXTURE_IMAGE_UNITS: 34930,
+      MAX_VERTEX_TEXTURE_IMAGE_UNITS: 35660,
+      MAX_TEXTURE_SIZE: 3379,
+      MAX_VERTEX_UNIFORM_VECTORS: 36347,
+      MAX_VARYING_VECTORS: 36348,
+      MAX_FRAGMENT_UNIFORM_VECTORS: 36349,
+      MAX_COMBINED_TEXTURE_IMAGE_UNITS: 35661,
+      VERSION: 7938,
+      SCISSOR_BOX: 3088,
+      VIEWPORT: 2978
+    }
+  }
+}
+
+const renderer = new THREE.WebGLRenderer({
+  antialias: false,
+  canvas,
+  powerPreference: 'low-power',
+  precision: 'lowp'
+});
+renderer.setSize(innerWidth, innerHeight);
+
+const createGeometryParticle = (size) => {
+  const visibleHeight = 2 * Math.tan(75 * Math.PI/360) * 500;
+  const radius = (size / innerHeight) * visibleHeight / 2;
+
+  // Main circle
+  const geometry = new THREE.CircleGeometry(radius, 32);
+  const material = new THREE.MeshBasicMaterial({
+    color: 0xffffff,
+    depthTest: false
+  });
+  const circle = new THREE.Mesh(geometry, material);
+
+  const posArray = geometry.attributes.position.array;
+  const outlineVertices = [];
+  for (let i = 3; i < posArray.length; i += 3) {
+    outlineVertices.push(
+      new THREE.Vector3(
+        posArray[i],
+        posArray[i + 1],
+        posArray[i + 2]
+      )
+    );
+  }
+  const outlineGeometry = new THREE.BufferGeometry().setFromPoints(outlineVertices);
+  const outline = new THREE.LineLoop(
+    outlineGeometry,
+    new THREE.LineBasicMaterial({ color: 0x000000, depthTest: false })
+  );
+
+  const group = new THREE.Group();
+  group.add(circle);
+  group.add(outline);
+  return group;
+};
+
+// Initialize particles
+var initialized = false;
+const particles = [];
+
+function initialize() {
+  for(let i = 0; i < NUM_PARTICLES; i++) {
+    const size = 10 + Math.random() * 80;
+    const particle = createGeometryParticle(size);
+
+    // Random initial position
+    const visibleWidth = 2 * Math.tan(75 * Math.PI/360) * 500 * camera.aspect;
+    particle.position.set(
+      THREE.MathUtils.randFloatSpread(visibleWidth),
+      THREE.MathUtils.randFloatSpread(visibleWidth/camera.aspect),
+      0
+    );
+
+    // Velocity storage
+    particle.velocity = new THREE.Vector2(
+      (Math.random() - 0.5) * 8,
+      (Math.random() - 0.5) * 8
+    );
+
+    scene.add(particle);
+    particles.push(particle);
+  }
+  initialized = true;
+}
+
+// Metrics and animation
+const visibleWidth = 2 * Math.tan(75 * Math.PI/360) * 500 * camera.aspect;
+const visibleHeight = visibleWidth / camera.aspect;
+
+function animate() {
+  particles.forEach(particle => {
+    particle.position.x += particle.velocity.x;
+    particle.position.y += particle.velocity.y;
+
+    // Boundary checks
+    if(Math.abs(particle.position.x) > visibleWidth/2)
+      particle.velocity.x *= -1;
+    if(Math.abs(particle.position.y) > visibleHeight/2)
+      particle.velocity.y *= -1;
+  });
+
+  renderer.render(scene, camera);
+}
+
+class Benchmark {
+  runIteration() {
+    if (!initialized) {
+      initialize();
+    }
+    animate();
+  }
+}