@vgai/editor 0.2.0

package/src/ingest/games/iframe-reachable/game-source.js

@@ -0,0 +1,58 @@
+// A PREBUILT-bundle three.js game, shipped as opaque module source text (it could
+// equally be a minified vendor bundle string). The host runs it inside an iframe
+// document; the iframe's importmap resolves its `import 'three'` to the HOST three
+// (re-exported via a blob module), so the editor can capture + edit its live scene
+// in-realm. The source itself is byte-for-byte unmodified — it does a stock
+// `import * as THREE from 'three'`, builds its own scene/camera/renderer, creates
+// and passes its OWN canvas, and drives its own `setAnimationLoop` loop.
+//
+// This file is the ingest-three world's `entryHtml` (T3.3 slice 3,
+// docs/CLI-ON-FOLDER-DESIGN.md §1E): read as RAW TEXT (never imported/executed by
+// the host — it only ever runs inside the child iframe's own `<script
+// type="module">`), so it stays a plain, no-export module.
+
+import * as THREE from 'three';
+
+const scene = new THREE.Scene();
+scene.name = 'BundleScene';
+scene.background = new THREE.Color(0x10141c);
+
+const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
+camera.position.set(0, 1.6, 5);
+
+const canvas = document.createElement('canvas');
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setSize(innerWidth, innerHeight, false);
+document.body.appendChild(canvas);
+
+const cube = new THREE.Mesh(
+  new THREE.BoxGeometry(1, 1, 1),
+  new THREE.MeshStandardMaterial({ color: 0xff5533 }),
+);
+cube.name = 'HeroCube';
+scene.add(cube);
+
+const orb = new THREE.Mesh(
+  new THREE.SphereGeometry(0.6, 24, 16),
+  new THREE.MeshStandardMaterial({ color: 0x3388ff }),
+);
+orb.name = 'Orb';
+orb.position.set(2.2, 0, 0);
+scene.add(orb);
+
+const sun = new THREE.DirectionalLight(0xffffff, 2.2);
+sun.position.set(3, 5, 2);
+sun.name = 'Sun';
+scene.add(sun);
+scene.add(new THREE.AmbientLight(0x404050, 1));
+
+renderer.setAnimationLoop((t) => {
+  cube.rotation.y = t * 0.001;
+  renderer.render(scene, camera);
+});
+
+addEventListener('resize', () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight, false);
+});

package/src/ingest/games/iframe-reachable/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "Prebuilt bundle in iframe (reachable three)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "iframe-reachable",
+      "kind": "threejs",
+      "description": "A prebuilt bundle hosted in its OWN iframe document, but whose three is REACHABLE: the iframe importmap resolves `three` to the host instance (blob re-export), so its scene is captured in-realm and edited live in the editor (cov-iframe-reachable, tier 2–3). The middle tier between shared-ESM and opaque embed.",
+      "adapter": {
+        "ingest": {
+          "strategy": "iframe-reachable",
+          "entryHtml": "game-source.js"
+        }
+      }
+    }
+  ]
+}

package/src/ingest/games/interactive-cubes/game.js

@@ -0,0 +1,139 @@
+// UNMODIFIED three.js game — `webgl_interactive_cubes` from mrdoob/three.js (r170), MIT.
+// Script body byte-for-byte upstream; only HTML/importmap packaging dropped so
+// the host bundler supplies the shared three.
+// Provenance: https://github.com/mrdoob/three.js/blob/r170/examples/webgl_interactive_cubes.html
+
+
+			import * as THREE from 'three';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			let stats;
+			let camera, scene, raycaster, renderer;
+
+			let INTERSECTED;
+			let theta = 0;
+
+			const pointer = new THREE.Vector2();
+			const radius = 5;
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 1, 1, 1 ).normalize();
+				scene.add( light );
+
+				const geometry = new THREE.BoxGeometry();
+
+				for ( let i = 0; i < 2000; i ++ ) {
+
+					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+
+					object.position.x = Math.random() * 40 - 20;
+					object.position.y = Math.random() * 40 - 20;
+					object.position.z = Math.random() * 40 - 20;
+
+					object.rotation.x = Math.random() * 2 * Math.PI;
+					object.rotation.y = Math.random() * 2 * Math.PI;
+					object.rotation.z = Math.random() * 2 * Math.PI;
+
+					object.scale.x = Math.random() + 0.5;
+					object.scale.y = Math.random() + 0.5;
+					object.scale.z = Math.random() + 0.5;
+
+					scene.add( object );
+
+				}
+
+				raycaster = new THREE.Raycaster();
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				document.addEventListener( 'mousemove', onPointerMove );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function onPointerMove( event ) {
+
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+			}
+
+			//
+
+			function animate() {
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				theta += 0.1;
+
+				camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
+				camera.lookAt( scene.position );
+
+				camera.updateMatrixWorld();
+
+				// find intersections
+
+				raycaster.setFromCamera( pointer, camera );
+
+				const intersects = raycaster.intersectObjects( scene.children, false );
+
+				if ( intersects.length > 0 ) {
+
+					if ( INTERSECTED != intersects[ 0 ].object ) {
+
+						if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
+
+						INTERSECTED = intersects[ 0 ].object;
+						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
+						INTERSECTED.material.emissive.setHex( 0xff0000 );
+
+					}
+
+				} else {
+
+					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
+
+					INTERSECTED = null;
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+

package/src/ingest/games/interactive-cubes/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "three.js — Interactive Cubes",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "interactive-cubes",
+      "kind": "threejs",
+      "description": "Upstream webgl_interactive_cubes: 2000 procedurally-placed cubes, orbiting camera, per-frame raycaster hover-highlight. Own scene/camera/renderer/rAF. No external assets.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared"
+        }
+      },
+      "entry": "game.js"
+    }
+  ]
+}

package/src/ingest/games/mismatched-three/fake-three.js

@@ -0,0 +1,38 @@
+// A SEPARATE, non-host `three` (stands in for a bundled / MISMATCHED three version).
+// The editor's scene-capture trap sits on the editor's own three.WebGLRenderer
+// prototype; this renderer is a different class the trap never sees → capture times
+// out → the editor degrades to embed-only. It renders a live canvas so the embed
+// floor has something real to host.
+export class WebGLRenderer {
+  constructor() {
+    this.domElement = document.createElement('canvas');
+    this._cb = null;
+  }
+  setSize(w, h) {
+    this.domElement.width = w;
+    this.domElement.height = h;
+  }
+  setAnimationLoop(cb) {
+    this._cb = cb;
+    const loop = () => {
+      if (this._cb) {
+        this._cb();
+        requestAnimationFrame(loop);
+      }
+    };
+    if (cb) requestAnimationFrame(loop);
+  }
+  render() {
+    const x = this.domElement.getContext('2d');
+    if (x) {
+      x.fillStyle = '#224466';
+      x.fillRect(0, 0, this.domElement.width, this.domElement.height);
+    }
+  }
+}
+export class Scene {
+  constructor() {
+    this.isScene = true;
+  }
+}
+export class PerspectiveCamera {}

package/src/ingest/games/mismatched-three/game.js

@@ -0,0 +1,10 @@
+// Mismatched-three demo: this game imports a SEPARATE (non-host) `three`. The host
+// capture trap (on the editor's three instance) can't instrument this renderer, so
+// capture times out and the editor degrades to embed-only — detected, not silent.
+import { PerspectiveCamera, Scene, WebGLRenderer } from './fake-three.js';
+const r = new WebGLRenderer();
+r.setSize(window.innerWidth, window.innerHeight);
+(document.getElementById('container') || document.body).appendChild(r.domElement);
+const s = new Scene();
+const c = new PerspectiveCamera();
+r.setAnimationLoop(() => r.render(s, c));

package/src/ingest/games/mismatched-three/vgai.game.json

@@ -0,0 +1,22 @@
+{
+  "manifestVersion": 1,
+  "name": "Mismatched/bundled three (graceful degrade)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "mismatched-three",
+      "kind": "threejs",
+      "description": "A game that uses a SEPARATE (non-host) three — stands in for a bundled/mismatched three version the capture trap cannot instrument. The editor detects the capture failure and degrades to embed-only (cov-mismatched-three) — never a silent failure.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared",
+          "captureTimeoutMs": 2500
+        }
+      },
+      "entry": "game.js"
+    }
+  ]
+}

package/src/ingest/games/own-three-bundled/game.js

@@ -0,0 +1,43 @@
+// A minimal, real three.js game that BUNDLES ITS OWN three — cov-bundled-dedupe (LIVE proof).
+// (Not a famous upstream title; a genuine, self-contained three.js program standing in for
+//  any source-available game that ships its own three — sanctioned in
+//  ADAPTER-MAXIMAL-SPEC.json coverage_standins.)
+//
+// This game ships its OWN nested `node_modules/three` (sibling to this file). Under
+// the editor's build-time dedupe (`vite.config.ts` resolve.dedupe:['three']) its bare
+// `import 'three'` COLLAPSES to the editor's single `three` instance, so the
+// scene-capture trap (on the host WebGLRenderer.prototype) sees this game's renderer
+// and ingestion works live. If dedupe did NOT redirect, the bare import would resolve
+// to the nested stub (no real WebGLRenderer) and capture would fail — so a passing
+// live ingest is itself proof the collapse happened. Byte-unmodified game code;
+// dedupe is build config we own (docs/ADAPTER-ARCHITECTURE.md §2.2).
+import * as THREE from 'three';
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+(document.getElementById('container') || document.body).appendChild(renderer.domElement);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x202028);
+
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
+camera.position.set(0, 1.5, 5);
+
+const light = new THREE.DirectionalLight(0xffffff, 1.2);
+light.position.set(2, 3, 4);
+light.name = 'KeyLight';
+scene.add(light);
+
+const cube = new THREE.Mesh(
+  new THREE.BoxGeometry(1, 1, 1),
+  new THREE.MeshStandardMaterial({ color: 0x3366cc }),
+);
+cube.name = 'OwnThreeCube';
+scene.add(cube);
+
+let t = 0;
+renderer.setAnimationLoop(() => {
+  t += 0.01;
+  cube.rotation.y = t;
+  renderer.render(scene, camera);
+});

package/src/ingest/games/own-three-bundled/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "Bundles-own-three (build-time dedupe)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "own-three-bundled",
+      "kind": "threejs",
+      "description": "A source-available game that ships its OWN nested node_modules/three. Build-time dedupe (resolve.dedupe:[three]) collapses it to the editor instance → LIVE capture + edit (cov-bundled-dedupe). A passing live ingest proves the collapse (else the bare import would hit the nested stub and capture would fail).",
+      "adapter": {
+        "ingest": {
+          "strategy": "deduped"
+        }
+      },
+      "entry": "game.js"
+    }
+  ]
+}

package/src/ingest/games/pointerlock-maze/game.js

@@ -0,0 +1,288 @@
+// UNMODIFIED three.js game — `misc_controls_pointerlock` from mrdoob/three.js (r170), MIT.
+// Script body byte-for-byte upstream; only HTML/importmap packaging dropped so
+// the host bundler supplies the shared three.
+// Needs #blocker/#instructions DOM — the ingest host provides stub elements
+// (domStubs in the registry), so the game code stays unmodified.
+// Provenance: https://github.com/mrdoob/three.js/blob/r170/examples/misc_controls_pointerlock.html
+
+
+			import * as THREE from 'three';
+
+			import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+
+			let camera, scene, renderer, controls;
+
+			const objects = [];
+
+			let raycaster;
+
+			let moveForward = false;
+			let moveBackward = false;
+			let moveLeft = false;
+			let moveRight = false;
+			let canJump = false;
+
+			let prevTime = performance.now();
+			const velocity = new THREE.Vector3();
+			const direction = new THREE.Vector3();
+			const vertex = new THREE.Vector3();
+			const color = new THREE.Color();
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.y = 10;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
+
+				const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 2.5 );
+				light.position.set( 0.5, 1, 0.75 );
+				scene.add( light );
+
+				controls = new PointerLockControls( camera, document.body );
+
+				const blocker = document.getElementById( 'blocker' );
+				const instructions = document.getElementById( 'instructions' );
+
+				instructions.addEventListener( 'click', function () {
+
+					controls.lock();
+
+				} );
+
+				controls.addEventListener( 'lock', function () {
+
+					instructions.style.display = 'none';
+					blocker.style.display = 'none';
+
+				} );
+
+				controls.addEventListener( 'unlock', function () {
+
+					blocker.style.display = 'block';
+					instructions.style.display = '';
+
+				} );
+
+				scene.add( controls.object );
+
+				const onKeyDown = function ( event ) {
+
+					switch ( event.code ) {
+
+						case 'ArrowUp':
+						case 'KeyW':
+							moveForward = true;
+							break;
+
+						case 'ArrowLeft':
+						case 'KeyA':
+							moveLeft = true;
+							break;
+
+						case 'ArrowDown':
+						case 'KeyS':
+							moveBackward = true;
+							break;
+
+						case 'ArrowRight':
+						case 'KeyD':
+							moveRight = true;
+							break;
+
+						case 'Space':
+							if ( canJump === true ) velocity.y += 350;
+							canJump = false;
+							break;
+
+					}
+
+				};
+
+				const onKeyUp = function ( event ) {
+
+					switch ( event.code ) {
+
+						case 'ArrowUp':
+						case 'KeyW':
+							moveForward = false;
+							break;
+
+						case 'ArrowLeft':
+						case 'KeyA':
+							moveLeft = false;
+							break;
+
+						case 'ArrowDown':
+						case 'KeyS':
+							moveBackward = false;
+							break;
+
+						case 'ArrowRight':
+						case 'KeyD':
+							moveRight = false;
+							break;
+
+					}
+
+				};
+
+				document.addEventListener( 'keydown', onKeyDown );
+				document.addEventListener( 'keyup', onKeyUp );
+
+				raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
+
+				// floor
+
+				let floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
+				floorGeometry.rotateX( - Math.PI / 2 );
+
+				// vertex displacement
+
+				let position = floorGeometry.attributes.position;
+
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
+
+					vertex.fromBufferAttribute( position, i );
+
+					vertex.x += Math.random() * 20 - 10;
+					vertex.y += Math.random() * 2;
+					vertex.z += Math.random() * 20 - 10;
+
+					position.setXYZ( i, vertex.x, vertex.y, vertex.z );
+
+				}
+
+				floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
+
+				position = floorGeometry.attributes.position;
+				const colorsFloor = [];
+
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
+
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
+					colorsFloor.push( color.r, color.g, color.b );
+
+				}
+
+				floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsFloor, 3 ) );
+
+				const floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );
+
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
+				scene.add( floor );
+
+				// objects
+
+				const boxGeometry = new THREE.BoxGeometry( 20, 20, 20 ).toNonIndexed();
+
+				position = boxGeometry.attributes.position;
+				const colorsBox = [];
+
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
+
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
+					colorsBox.push( color.r, color.g, color.b );
+
+				}
+
+				boxGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsBox, 3 ) );
+
+				for ( let i = 0; i < 500; i ++ ) {
+
+					const boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: true } );
+					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
+
+					const box = new THREE.Mesh( boxGeometry, boxMaterial );
+					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
+					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
+					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
+
+					scene.add( box );
+					objects.push( box );
+
+				}
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				const time = performance.now();
+
+				if ( controls.isLocked === true ) {
+
+					raycaster.ray.origin.copy( controls.object.position );
+					raycaster.ray.origin.y -= 10;
+
+					const intersections = raycaster.intersectObjects( objects, false );
+
+					const onObject = intersections.length > 0;
+
+					const delta = ( time - prevTime ) / 1000;
+
+					velocity.x -= velocity.x * 10.0 * delta;
+					velocity.z -= velocity.z * 10.0 * delta;
+
+					velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
+
+					direction.z = Number( moveForward ) - Number( moveBackward );
+					direction.x = Number( moveRight ) - Number( moveLeft );
+					direction.normalize(); // this ensures consistent movements in all directions
+
+					if ( moveForward || moveBackward ) velocity.z -= direction.z * 400.0 * delta;
+					if ( moveLeft || moveRight ) velocity.x -= direction.x * 400.0 * delta;
+
+					if ( onObject === true ) {
+
+						velocity.y = Math.max( 0, velocity.y );
+						canJump = true;
+
+					}
+
+					controls.moveRight( - velocity.x * delta );
+					controls.moveForward( - velocity.z * delta );
+
+					controls.object.position.y += ( velocity.y * delta ); // new behavior
+
+					if ( controls.object.position.y < 10 ) {
+
+						velocity.y = 0;
+						controls.object.position.y = 10;
+
+						canJump = true;
+
+					}
+
+				}
+
+				prevTime = time;
+
+				renderer.render( scene, camera );
+
+			}
+

package/src/ingest/games/pointerlock-maze/vgai.game.json

@@ -0,0 +1,22 @@
+{
+  "manifestVersion": 1,
+  "name": "three.js — Pointer-Lock Maze",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "pointerlock-maze",
+      "kind": "threejs",
+      "description": "Upstream misc_controls_pointerlock: WASD + pointer-lock first-person walk over a procedural box field. Own scene/camera/renderer/rAF/input. Needs #blocker/#instructions DOM.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared",
+          "domStubs": ["blocker", "instructions"]
+        }
+      },
+      "entry": "game.js"
+    }
+  ]
+}