Initial three.js benchmark

Author: iainireland

JetStreamDriver.js

@@ -2011,6 +2011,15 @@ let BENCHMARKS = [
         ],
         tags: ["Generators"]
     }),
+    new DefaultBenchmark({
+        name: "threejs",
+        files: [
+            "./threejs/three.js",
+            "./threejs/benchmark.js",
+        ],
+        deterministicRandom: true,
+        tags: ["ThreeJs"],
+    }),
     // Wasm
     new WasmEMCCBenchmark({
         name: "HashSet-wasm",

threejs/benchmark.js

@@ -0,0 +1,186 @@
+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 = {}
+canvas.addEventListener = function() { }
+canvas.style = {}
+canvas.getContext = function(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() { },
+    texParameteri() { },
+    uniform1i() { },
+    uniform1f() { },
+    uniform2f() { },
+    uniform3f() { },
+    uniform4f() { },
+    clearColor() { },
+    clear() { },
+    clearDepth() { },
+    clearStencil() { },
+    enable() { },
+    disable() { },
+    depthFunc() { },
+    depthMask() { },
+    frontFace() { },
+    cullFace() { },
+    getContextAttributes() { },
+    createBuffer() { },
+    bindBuffer() { },
+    bufferData() { },
+    createProgram() { },
+    attachShader() { },
+    linkProgram() { },
+    useProgram() { },
+    getAttribLocation() { },
+    getUniformLocation() { },
+    createShader() { },
+    shaderSource() { },
+    compileShader() { },
+    getShaderParameter() { },
+    getProgramInfoLog() { return "" },
+    getShaderInfoLog() { return "" },
+    getProgramParameter() { },
+    deleteShader() { },
+    colorMask() { },
+    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
+const particles = [];
+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);
+}
+
+// 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() {
+    animate();
+  }
+}