npm - create-aura3d - Versions diffs - 1.3.2 → 1.4.0 - Mend

create-aura3d 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/templates/three-compat-asset-inspector/tests/screenshot.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-asset-inspector/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-character-viewer/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Character Viewer</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-character-viewer/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-character-viewer",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-character-viewer/playwright.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4193"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4193 --strictPort",
+    url: "http://127.0.0.1:4193",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});

package/templates/three-compat-character-viewer/src/main.ts ADDED Viewed

@@ -0,0 +1,17 @@
+// Three-compat character viewer: a capsule stand-in character on a pedestal,
+// authored through the public @aura3d/engine API. Replace the capsule with
+// `model(assets.character)` once you add a typed character asset.
+import { camera, createAuraApp, lights, material, primitives, scene } from "@aura3d/engine";
+createAuraApp("#app", {
+  scene: scene()
+    .background("#0d1119")
+    .camera(camera.orbit({ target: [0, 1.2, 0], distance: 4.6 }))
+    .add(primitives.box({ name: "viewer floor", size: [5, 0.1, 5], position: [0, -0.05, 0], material: material.pbr({ color: "#161d2a", roughness: 0.92 }), receiveShadow: true }))
+    .add(primitives.cylinder({ name: "character pedestal", size: [1.4, 0.3, 1.4], position: [0, 0.15, 0], material: material.pbr({ color: "#2b3548", roughness: 0.55, metalness: 0.2 }), receiveShadow: true, castShadow: true }))
+    .add(primitives.capsule({ name: "stand-in character", size: [0.7, 1.7, 0.7], position: [0, 1.25, 0], material: material.pbr({ color: "#7fa6d9", roughness: 0.45 }), castShadow: true }))
+    .add(primitives.sphere({ name: "stand-in head marker", size: 0.3, position: [0, 2.25, 0], material: material.pbr({ color: "#d9c79f", roughness: 0.5 }), castShadow: true }))
+    .add(lights.ambient({ intensity: 0.32 }))
+    .add(lights.directional({ name: "key light", position: [3, 4.5, 3], intensity: 1.5 }))
+    .add(lights.point({ name: "rim light", position: [-2.4, 2.6, -2.2], intensity: 1.5, color: "#8fb8ff" }))
+});

package/templates/three-compat-character-viewer/tests/route-health.spec.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-character-viewer/tests/screenshot.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-character-viewer/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-custom-threejs-migration/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Custom Three.js Migration</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-custom-threejs-migration/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-custom-threejs-migration",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-custom-threejs-migration/playwright.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4194"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4194 --strictPort",
+    url: "http://127.0.0.1:4194",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});

package/templates/three-compat-custom-threejs-migration/src/main.ts ADDED Viewed

@@ -0,0 +1,16 @@
+// Three-compat migration example: the classic hand-rolled three.js starter
+// (ground plane + a few lit primitives) rebuilt with the public
+// @aura3d/engine API — no manual renderer, scene graph, or render loop.
+import { camera, createAuraApp, lights, material, primitives, scene } from "@aura3d/engine";
+createAuraApp("#app", {
+  scene: scene()
+    .background("#101521")
+    .camera(camera.orbit({ target: [0, 0.7, 0], distance: 6 }))
+    .add(primitives.plane({ name: "ground", size: [10, 1, 10], material: material.pbr({ color: "#1b2334", roughness: 0.9 }), receiveShadow: true }))
+    .add(primitives.box({ name: "migrated box mesh", size: 1, position: [-1.6, 0.5, 0], rotation: [0, 0.6, 0], material: material.pbr({ color: "#e2674a", roughness: 0.5 }), castShadow: true }))
+    .add(primitives.sphere({ name: "migrated sphere mesh", size: 1.1, position: [0.2, 0.55, -0.4], material: material.metal({ color: "#bcd0e6", roughness: 0.18 }), castShadow: true }))
+    .add(primitives.torus({ name: "migrated torus mesh", size: 0.9, position: [1.9, 0.75, 0.6], rotation: [0.9, 0, 0.4], material: material.pbr({ color: "#5dbb8d", roughness: 0.4 }), castShadow: true }))
+    .add(lights.ambient({ intensity: 0.3 }))
+    .add(lights.directional({ name: "sun", position: [4, 6, 3], intensity: 1.5 }))
+});

package/templates/three-compat-custom-threejs-migration/tests/route-health.spec.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-custom-threejs-migration/tests/screenshot.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-custom-threejs-migration/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-large-scene/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Large Scene</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-large-scene/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-large-scene",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-large-scene/playwright.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4195"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4195 --strictPort",
+    url: "http://127.0.0.1:4195",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});

package/templates/three-compat-large-scene/src/main.ts ADDED Viewed

@@ -0,0 +1,31 @@
+// Three-compat large scene: a deterministic grid of many boxes (a city-block
+// style stress layout) authored through the public @aura3d/engine API.
+import { camera, createAuraApp, lights, material, primitives, scene } from "@aura3d/engine";
+const palette = ["#39465e", "#46587a", "#54688f", "#62799f", "#4d5a74"] as const;
+const grid = scene()
+  .background("#0a0e15")
+  .camera(camera.orbit({ target: [0, 1, 0], distance: 16 }))
+  .add(primitives.box({ name: "large scene ground", size: [22, 0.1, 22], position: [0, -0.05, 0], material: material.pbr({ color: "#141b28", roughness: 0.95 }), receiveShadow: true }));
+const span = 9; // 9 x 9 = 81 boxes
+for (let row = 0; row < span; row += 1) {
+  for (let col = 0; col < span; col += 1) {
+    const index = row * span + col;
+    const height = 0.5 + ((index * 37) % 23) / 23 * 2.6;
+    grid.add(primitives.box({
+      name: `block r${row} c${col}`,
+      size: [1.1, height, 1.1],
+      position: [(col - (span - 1) / 2) * 2.2, height / 2, (row - (span - 1) / 2) * 2.2],
+      material: material.pbr({ color: palette[index % palette.length], roughness: 0.62 }),
+      castShadow: true,
+      receiveShadow: true
+    }));
+  }
+}
+grid
+  .add(lights.ambient({ intensity: 0.3 }))
+  .add(lights.directional({ name: "low sun", position: [8, 10, 6], intensity: 1.4, color: "#ffe7c8" }));
+createAuraApp("#app", { scene: grid });

package/templates/three-compat-large-scene/tests/route-health.spec.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-large-scene/tests/screenshot.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-large-scene/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-material-authoring/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Material Authoring</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-material-authoring/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-material-authoring",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-material-authoring/playwright.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4196"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4196 --strictPort",
+    url: "http://127.0.0.1:4196",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});

package/templates/three-compat-material-authoring/src/main.ts ADDED Viewed

@@ -0,0 +1,33 @@
+// Three-compat material authoring: a row of spheres showcasing the public
+// @aura3d/engine material presets (pbr, metal, rubber, glass, emissive).
+import { camera, createAuraApp, lights, material, primitives, scene } from "@aura3d/engine";
+const swatches = [
+  { name: "pbr swatch", material: material.pbr({ color: "#c66f53", roughness: 0.55 }) },
+  { name: "metal swatch", material: material.metal({ color: "#d7e1ec", roughness: 0.12 }) },
+  { name: "rubber swatch", material: material.rubber({ color: "#22262e" }) },
+  { name: "glass swatch", material: material.glass({ color: "#bfe6ff" }) },
+  { name: "emissive swatch", material: material.emissive({ color: "#13202c", emissive: "#38d6ff", emissiveIntensity: 1.2 }) }
+] as const;
+const lab = scene()
+  .background("#0c1018")
+  .camera(camera.orbit({ target: [0, 0.7, 0], distance: 6.4 }))
+  .add(primitives.box({ name: "swatch bench", size: [7, 0.12, 2.4], position: [0, -0.06, 0], material: material.pbr({ color: "#1c2433", roughness: 0.88 }), receiveShadow: true }));
+swatches.forEach((swatch, index) => {
+  lab.add(primitives.sphere({
+    name: swatch.name,
+    size: 0.9,
+    position: [(index - (swatches.length - 1) / 2) * 1.35, 0.65, 0],
+    material: swatch.material,
+    castShadow: true
+  }));
+});
+lab
+  .add(lights.ambient({ intensity: 0.3 }))
+  .add(lights.directional({ name: "key", position: [3, 4.5, 3.5], intensity: 1.5 }))
+  .add(lights.point({ name: "cool rim", position: [-3, 2.4, -2.4], intensity: 1.3, color: "#9fc4ff" }));
+createAuraApp("#app", { scene: lab });

package/templates/three-compat-material-authoring/tests/route-health.spec.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-material-authoring/tests/screenshot.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+test.setTimeout(60_000);
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-material-authoring/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-postprocess-scene/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Postprocess Scene</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-postprocess-scene/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-postprocess-scene",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-postprocess-scene/playwright.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4197"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4197 --strictPort",
+    url: "http://127.0.0.1:4197",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});