chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,16 @@
+{
+  "name": "Distributed: Three.js WebGL boundary",
+  "description": "2s composition (20 frames @ 10fps) with a Three.js purple cube on a dark background. Validates that the GSAP batching proxy correctly handles onUpdate callbacks in to() vars and that CDP screenshot capture composites WebGL canvas layers.",
+  "tags": ["distributed", "threejs", "webgl"],
+
+  "minPsnr": 25,
+  "maxFrameFailures": 0,
+
+  "minAudioCorrelation": 0.9,
+  "maxAudioLagWindows": 120,
+
+  "renderConfig": {
+    "fps": 10,
+    "chunkSize": 10
+  }
+}
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc8c784064e83a62324b4968ef71d3f9c5e151ccf9f3e96a725660bb6c9bb3b9
+size 22114
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>chunk-boundary: Three.js</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 320px;
+        height: 180px;
+        background: #0f172a;
+        overflow: hidden;
+      }
+      #main-comp {
+        position: relative;
+        width: 320px;
+        height: 180px;
+      }
+      canvas {
+        display: block;
+        width: 320px;
+        height: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main-comp"
+      data-composition-id="main-comp"
+      data-width="320"
+      data-height="180"
+      data-start="0"
+      data-duration="2"
+    ></div>
+
+    <script>
+      // Minimal Three.js scene driven by window.__hfThreeTime. The runtime
+      // sets this per frame; the render loop reads it and derives all
+      // rotation/position from time-in-seconds so output is fully
+      // determined by the seek position.
+      const canvas = document.createElement("canvas");
+      canvas.width = 320;
+      canvas.height = 180;
+      document.getElementById("main-comp").appendChild(canvas);
+
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x0f172a);
+      const camera = new THREE.PerspectiveCamera(45, 320 / 180, 0.1, 50);
+      camera.position.set(0, 0, 4);
+      const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+      renderer.setSize(320, 180, false);
+
+      const geo = new THREE.BoxGeometry(1, 1, 1);
+      const mat = new THREE.MeshStandardMaterial({ color: 0xa855f7 });
+      const cube = new THREE.Mesh(geo, mat);
+      scene.add(cube);
+
+      scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+      const light = new THREE.DirectionalLight(0xffffff, 0.7);
+      light.position.set(2, 2, 3);
+      scene.add(light);
+
+      window.__hfThreeTime = 0;
+      function renderFrame() {
+        const t = window.__hfThreeTime || 0;
+        cube.rotation.x = t * Math.PI;
+        cube.rotation.y = t * Math.PI * 0.5;
+        renderer.render(scene, camera);
+      }
+      // Listen for the runtime's `hf-seek` event in case the engine pushes
+      // a seek before our render loop polls __hfThreeTime.
+      window.addEventListener("hf-seek", (e) => {
+        if (e && e.detail && typeof e.detail.time === "number") {
+          window.__hfThreeTime = e.detail.time;
+        }
+        renderFrame();
+      });
+      renderFrame();
+
+      const dur = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main-comp"] = dur;
+      dur.to({}, { duration: 2, onUpdate: renderFrame }, 0);
+    </script>
+  </body>
+</html>