create-three-blocks-starter 0.5.5 → 0.5.6
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.
- package/CHANGELOG.md +6 -0
- package/README.md +5 -1
- package/dist/artifacts.d.ts +1 -1
- package/dist/artifacts.js +1 -1
- package/dist/compose.js +2 -2
- package/dist/constants.js +1 -1
- package/package.json +1 -1
- package/template-assets/shaders/scene/meta.json +8 -8
- package/template-assets/shaders/scene/scene.webgl.ts +1 -1
- package/template-assets/shaders/scene/scene.webgpu.ts +1 -1
- package/template-assets/shaders/scene/timing.json +16 -16
- package/template-assets/shaders/text/meta.json +14 -14
- package/template-assets/shaders/text/text.webgl.ts +2 -4
- package/template-assets/shaders/text/text.webgpu.ts +35 -494
- package/template-assets/shaders/text/timing.json +17 -17
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -45,10 +45,14 @@ release scaffolds continue to emit the catalog's exact published version.
|
|
|
45
45
|
|
|
46
46
|
Every project begins with the same visible proof: rendered in a worker, shaders
|
|
47
47
|
precompiled, and `src/scene.ts` identified as the first edit. Its README lists
|
|
48
|
-
the live-development, capture, strict-build, text, status, and
|
|
48
|
+
the live-development, capture, strict-build, text, status, and smoke-check
|
|
49
49
|
commands, and the generated root includes `NOTICE` without inventing a second
|
|
50
50
|
license file.
|
|
51
51
|
|
|
52
|
+
Shader capture, parity, and the existing `browser:smoke` command run in Node.js
|
|
53
|
+
with native WebGL and WebGPU. The installed devtools package supplies the native
|
|
54
|
+
bindings; users do not need Playwright or a Chromium download.
|
|
55
|
+
|
|
52
56
|
## License
|
|
53
57
|
|
|
54
58
|
Personal and noncommercial projects are free. Pro grants each Project started
|
package/dist/artifacts.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ declare const SHADER_COMPATIBILITIES: {
|
|
|
8
8
|
declare const SHADER_ADDRESS_VERSION: 2;
|
|
9
9
|
declare const SHADER_RECIPE_VERSION: 1;
|
|
10
10
|
declare const SHADER_HYDRATION_VERSION: 2;
|
|
11
|
-
declare const SHADER_TRANSFORM_VERSION:
|
|
11
|
+
declare const SHADER_TRANSFORM_VERSION: 64;
|
|
12
12
|
interface ShaderCoverage {
|
|
13
13
|
readonly render: number;
|
|
14
14
|
readonly vertex: number;
|
package/dist/artifacts.js
CHANGED
|
@@ -25,7 +25,7 @@ const SHADER_COMPATIBILITIES = {
|
|
|
25
25
|
const SHADER_ADDRESS_VERSION = 2;
|
|
26
26
|
const SHADER_RECIPE_VERSION = 1;
|
|
27
27
|
const SHADER_HYDRATION_VERSION = 2;
|
|
28
|
-
const SHADER_TRANSFORM_VERSION =
|
|
28
|
+
const SHADER_TRANSFORM_VERSION = 64;
|
|
29
29
|
const SHA256 = /^[a-f0-9]{64}$/u;
|
|
30
30
|
const SAFE_VERSION = /^[0-9A-Za-z][0-9A-Za-z.+_-]{0,127}$/u;
|
|
31
31
|
const MAX_MANIFEST_BYTES = 32 * 1_024 * 1_024;
|
package/dist/compose.js
CHANGED
|
@@ -174,10 +174,10 @@ function createReadme(project, definitionLabel, packageManager) {
|
|
|
174
174
|
const textCommands = project.artifacts.text === undefined
|
|
175
175
|
? ""
|
|
176
176
|
: `| \`${runCommand(packageManager, "text:generate")}\` | Refresh MSDF atlases after changing glyph coverage. |\n| \`${runCommand(packageManager, "text:status")}\` | Verify text configuration and generated atlas readiness. |\n`;
|
|
177
|
-
return `# ${project.name}\n\n${definitionLabel} generated by ${GENERATOR_NAME}: rendered in a worker, with shaders precompiled.\n\n## Start here\n\n\`\`\`bash\n${packageManager} install\n${runCommand(packageManager, "dev")}\n\`\`\`\n\nEdit \`src/scene.ts\` first — it is your Three.js scene and hot-reloads without losing its declared \`hot\` state.\n\n## Project map\n\n| File | Purpose |\n|---|---|\n| \`src/scene.ts\` | Your \`Experience\` class: objects, materials, animation, and scene-local assets. |\n| \`src/render.worker.ts\` | Worker-owned renderer, camera, frame loop, and transactional HMR. |\n| \`src/main.ts\` | DOM input, Lenis, accessibility, and the worker host. |\n| \`src/assets.ts\` | Typed asset manifest. |\n| \`three-blocks.text.ts\` | Text fonts and atlas generation (text template only). |\n\n## Commands\n\n| Command | Purpose |\n|---|---|\n| \`${runCommand(packageManager, "dev")}\` | Start Vite with live worker, shader, text, and HMR status. |\n| \`${runCommand(packageManager, "lint")}\` | Check correctness and the shipped Three.js-style formatting. |\n| \`${runCommand(packageManager, "typecheck")}\` | Check strict TypeScript without emitting files. |\n| \`${runCommand(packageManager, "build")}\` | Build with graceful live shader fallback. |\n| \`${runCommand(packageManager, "build:strict")}\` | Require fresh precompiled shader receipts. |\n| \`${runCommand(packageManager, "shaders:capture")}\` | Refresh shader receipts after settling shader edits; also compresses \`public/\` GLB and HDR assets to meshopt + KTX2. |\n| \`${runCommand(packageManager, "assets:status")}\` | Re-verify the optimized-asset receipt. |\n${textCommands}| \`${runCommand(packageManager, "browser:smoke")}\` | Prove worker readiness, first frame, and the stats control in
|
|
177
|
+
return `# ${project.name}\n\n${definitionLabel} generated by ${GENERATOR_NAME}: rendered in a worker, with shaders precompiled.\n\n## Start here\n\n\`\`\`bash\n${packageManager} install\n${runCommand(packageManager, "dev")}\n\`\`\`\n\nEdit \`src/scene.ts\` first — it is your Three.js scene and hot-reloads without losing its declared \`hot\` state.\n\n## Project map\n\n| File | Purpose |\n|---|---|\n| \`src/scene.ts\` | Your \`Experience\` class: objects, materials, animation, and scene-local assets. |\n| \`src/render.worker.ts\` | Worker-owned renderer, camera, frame loop, and transactional HMR. |\n| \`src/main.ts\` | DOM input, Lenis, accessibility, and the worker host. |\n| \`src/assets.ts\` | Typed asset manifest. |\n| \`three-blocks.text.ts\` | Text fonts and atlas generation (text template only). |\n\n## Commands\n\n| Command | Purpose |\n|---|---|\n| \`${runCommand(packageManager, "dev")}\` | Start Vite with live worker, shader, text, and HMR status. |\n| \`${runCommand(packageManager, "lint")}\` | Check correctness and the shipped Three.js-style formatting. |\n| \`${runCommand(packageManager, "typecheck")}\` | Check strict TypeScript without emitting files. |\n| \`${runCommand(packageManager, "build")}\` | Build with graceful live shader fallback. |\n| \`${runCommand(packageManager, "build:strict")}\` | Require fresh precompiled shader receipts. |\n| \`${runCommand(packageManager, "shaders:capture")}\` | Refresh shader receipts after settling shader edits; also compresses \`public/\` GLB and HDR assets to meshopt + KTX2. |\n| \`${runCommand(packageManager, "assets:status")}\` | Re-verify the optimized-asset receipt. |\n${textCommands}| \`${runCommand(packageManager, "browser:smoke")}\` | Prove worker readiness, first frame, and the stats control in Node.js. |\n| \`${runCommand(packageManager, "status")}\` | Explain and recover worker, shader, asset, or text readiness. |\n\nPrecompiled shaders are an optimization cache, not an editing prerequisite. During development, changed TSL code hot-swaps and compiles live; the status reports \`shaders live\`. Capture once the shader is settled, then use the strict build as the release gate.\n\nDraco and KTX2 runtime files come from the installed Three.js package; this project commits no codec directory. See the [Three Blocks docs](https://threejs-blocks.com/docs) or the [LLM index](https://threejs-blocks.com/llms.txt).\n\nArtifact state:\n\n${pending}\n\n## License\n\nPersonal and noncommercial projects are free. Pro grants each Project started during an active period a lifetime commercial license for versions released during that period. After cancellation, you may maintain, update, and distribute the Project with those covered versions and keep using Pro Tool versions obtained while active for that Project locally and offline. Starting a new commercial Project, adopting a later version, or downloading or updating a Pro Tool requires an active seat. Covered versions have no runtime gate. See \`NOTICE\` and the [Commercial License Agreement](https://threejs-blocks.com/license).\n`;
|
|
178
178
|
}
|
|
179
179
|
function createAgents(packageManager) {
|
|
180
|
-
return `# AGENTS.md — Three Blocks project\n\nThis is a WebGPU Three.js app rendered in an OffscreenCanvas worker, with shaders precompiled for the first frame. Keep that boundary intact.\n\n## Commands\n\n- \`${runCommand(packageManager, "dev")}\` — Vite plus ambient worker/shader/text status.\n- \`${runCommand(packageManager, "lint")}\` — correctness and Three.js house style.\n- \`${runCommand(packageManager, "typecheck")}\` — strict TypeScript.\n- \`${runCommand(packageManager, "build")}\` — normal production build with live shader fallback.\n- \`${runCommand(packageManager, "build:strict")}\` — release gate requiring fresh shader receipts.\n- \`${runCommand(packageManager, "browser:smoke")}\` —
|
|
180
|
+
return `# AGENTS.md — Three Blocks project\n\nThis is a WebGPU Three.js app rendered in an OffscreenCanvas worker, with shaders precompiled for the first frame. Keep that boundary intact.\n\n## Commands\n\n- \`${runCommand(packageManager, "dev")}\` — Vite plus ambient worker/shader/text status.\n- \`${runCommand(packageManager, "lint")}\` — correctness and Three.js house style.\n- \`${runCommand(packageManager, "typecheck")}\` — strict TypeScript.\n- \`${runCommand(packageManager, "build")}\` — normal production build with live shader fallback.\n- \`${runCommand(packageManager, "build:strict")}\` — release gate requiring fresh shader receipts.\n- \`${runCommand(packageManager, "browser:smoke")}\` — Node.js check for worker readiness, first frame, and stats control.\n- \`${runCommand(packageManager, "status")}\` — first recovery command for anything not ready.\n- \`${runCommand(packageManager, "shaders:capture")}\` — refresh shader receipts after shader work settles; also optimizes \`public/\` GLB and HDR assets to meshopt + KTX2.\n- \`${runCommand(packageManager, "assets:status")}\` — re-verify the optimized-asset receipt.\n\n## Assets\n\n- Drop models and environments under \`public/\` in any source format; \`shaders:capture\` compresses GLB and \`.hdr\` files to meshopt + KTX2 (BC6H-ready HDR) automatically and records exact download and VRAM numbers in \`.three-blocks/assets/meta.json\`.\n- Prefer the optimized \`.ktx2\`/\`.tb.glb\` outputs in code; never hand-edit them — re-run capture when sources change.\n\n## Ownership\n\n- Edit \`src/scene.ts\` first for Three.js objects, materials, assets, and animation.\n- \`src/render.worker.ts\` owns the renderer, scene, camera, GPU work, and frame loop.\n- \`src/main.ts\` owns DOM input, Lenis, accessibility, and the worker host.\n- Never import Three.js, renderer code, or GPU resources into main-thread modules.\n- Values crossing the worker boundary must be structured-cloneable plain data.\n\n## Scene contract\n\n- Keep the exported \`sceneKey\`, \`loadShaderManifest\`, and \`createScene\` names; shader receipt discovery depends on them.\n- Keep shader-producing objects registered through literal \`context.shaders.material(...)\` or \`.container(...)\` calls.\n- \`Experience\` is a Three.js \`Group\`; add it directly to the scene and dispose owned GPU resources.\n- Put continuous HMR state in the declared \`readonly hot = { ... }\` object. Matching fields transfer automatically.\n- New code defines the hot-state shape; renamed, removed, or re-typed fields keep their new defaults.\n- The optional library \`captureHotState\` / \`restoreHotState\` methods are only for asynchronous or non-declarative restoration.\n\n## Shader editing\n\nEdit TSL normally during \`dev\`. A changed scene hot-swaps transactionally, compiles before commit, and falls back to live TSL when receipts are stale. The overlay/terminal will say \`shaders live\`; this is expected while iterating. Run \`${runCommand(packageManager, "shaders:capture")}\` when the shader is settled, then \`${runCommand(packageManager, "build:strict")}\` before release. If state is unclear, run \`${runCommand(packageManager, "status")}\`.\n\n## Text template\n\nThe DOM remains the semantic and layout source of truth. Keep \`data-canvas-text\` copy in \`index.html\`, declare fonts in \`three-blocks.text.ts\`, and run \`${runCommand(packageManager, "text:generate")}\` after changing glyph coverage.\n`;
|
|
181
181
|
}
|
|
182
182
|
export function validateResolvedProject(project, source = defaultCatalog) {
|
|
183
183
|
const runtimeKeys = Object.keys(project.dependencies).sort();
|
package/dist/constants.js
CHANGED
|
@@ -9,7 +9,7 @@ export const GENERATOR_VERSION = (() => {
|
|
|
9
9
|
export const RESULT_PROTOCOL_VERSION = 1;
|
|
10
10
|
export const COMPATIBILITY_VERSIONS = Object.freeze({
|
|
11
11
|
three: '0.185.1',
|
|
12
|
-
threeBlocks: '0.12.
|
|
12
|
+
threeBlocks: '0.12.1',
|
|
13
13
|
lenis: '1.3.25',
|
|
14
14
|
statsGl: '4.2.3',
|
|
15
15
|
});
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"runtime": {
|
|
3
3
|
"capture": {
|
|
4
|
-
"adapter": "
|
|
4
|
+
"adapter": "Metal driver on macOS Version 26.3 (Build 25D2125) · apple-m5-max · metal-3 · apple",
|
|
5
5
|
"features": [],
|
|
6
|
-
"userAgent": "
|
|
6
|
+
"userAgent": "Node.js/25.8.1 ANGLE/Dawn"
|
|
7
7
|
},
|
|
8
8
|
"three": "0.185.1",
|
|
9
|
-
"threeBlocks": "0.
|
|
9
|
+
"threeBlocks": "0.12.0",
|
|
10
10
|
"threeBlocksShaderClosure": "92ccbbc1a03eaac46130ccc2b3dc72d6c47fbf8b6f47b226cfd4104ef927d17a"
|
|
11
11
|
},
|
|
12
12
|
"scenes": {
|
|
13
13
|
"scene": {
|
|
14
14
|
"artifact": "scene.webgpu.ts",
|
|
15
|
-
"artifactHash": "
|
|
15
|
+
"artifactHash": "ede96aec3cc9f4016477be7c0d3c032068dc1b2f71d887c9e2c483cca5a9a42a",
|
|
16
16
|
"asset": "three-blocks/shaders/scene.webgpu.json",
|
|
17
|
-
"assetHash": "
|
|
17
|
+
"assetHash": "a8bad57d6e8fbd861cf232d18caf9fe95a47bc3d46c0ee2b8250847542b96352",
|
|
18
18
|
"backend": "webgpu",
|
|
19
19
|
"bytes": 118466,
|
|
20
20
|
"coverage": {
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
},
|
|
36
36
|
"scene.webgl": {
|
|
37
37
|
"artifact": "scene.webgl.ts",
|
|
38
|
-
"artifactHash": "
|
|
38
|
+
"artifactHash": "d18ea2e5d773f31d38575932b13e97fc4d933f930a87d94644c4585f7fef8d4c",
|
|
39
39
|
"asset": "three-blocks/shaders/scene.webgl.json",
|
|
40
|
-
"assetHash": "
|
|
40
|
+
"assetHash": "4730e05862b35cb04ec756138ecefaa62bbc4e9ee8a6ae0d6abb82934b8c77eb",
|
|
41
41
|
"backend": "webgl",
|
|
42
42
|
"bytes": 157804,
|
|
43
43
|
"coverage": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"hydration": 2,
|
|
69
69
|
"name": "@three-blocks/devtools",
|
|
70
70
|
"recipe": 1,
|
|
71
|
-
"transform":
|
|
71
|
+
"transform": 64,
|
|
72
72
|
"version": "0.1.0"
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"adapter": "
|
|
3
|
-
"measuredAt": "2026-
|
|
4
|
-
"platform": "darwin
|
|
5
|
-
"receiptHash": "
|
|
2
|
+
"adapter": "ANGLE (Apple, ANGLE Metal Renderer: Apple M5 Max, Unspecified Version)",
|
|
3
|
+
"measuredAt": "2026-09-18T10:59:37.301Z",
|
|
4
|
+
"platform": "darwin",
|
|
5
|
+
"receiptHash": "553fa94e8e9ee321712e5f3134843ee253b60d060904ad6e6ffcaddaa82c9896",
|
|
6
6
|
"scenes": {
|
|
7
7
|
"scene": {
|
|
8
|
-
"avoidedBuildMs":
|
|
8
|
+
"avoidedBuildMs": 63.40895899999987,
|
|
9
9
|
"builds": 9,
|
|
10
|
-
"liveBuildMs":
|
|
11
|
-
"precompiledBuildMs":
|
|
12
|
-
"runs":
|
|
13
|
-
"setupMeasured":
|
|
14
|
-
"spreadMs":
|
|
10
|
+
"liveBuildMs": 68.97562400000015,
|
|
11
|
+
"precompiledBuildMs": 5.566665000000285,
|
|
12
|
+
"runs": 5,
|
|
13
|
+
"setupMeasured": true,
|
|
14
|
+
"spreadMs": 4.184081000000333
|
|
15
15
|
},
|
|
16
16
|
"scene.webgl": {
|
|
17
|
-
"avoidedBuildMs":
|
|
17
|
+
"avoidedBuildMs": 74.72341699999993,
|
|
18
18
|
"builds": 9,
|
|
19
|
-
"liveBuildMs":
|
|
20
|
-
"precompiledBuildMs":
|
|
21
|
-
"runs":
|
|
22
|
-
"setupMeasured":
|
|
23
|
-
"spreadMs":
|
|
19
|
+
"liveBuildMs": 80.05099900000005,
|
|
20
|
+
"precompiledBuildMs": 5.32758200000012,
|
|
21
|
+
"runs": 5,
|
|
22
|
+
"setupMeasured": true,
|
|
23
|
+
"spreadMs": 9.392291000000114
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"schemaVersion": 3,
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"runtime": {
|
|
3
3
|
"capture": {
|
|
4
|
-
"adapter": "
|
|
4
|
+
"adapter": "Metal driver on macOS Version 26.3 (Build 25D2125) · apple-m5-max · metal-3 · apple",
|
|
5
5
|
"features": [],
|
|
6
|
-
"userAgent": "
|
|
6
|
+
"userAgent": "Node.js/25.8.1 ANGLE/Dawn"
|
|
7
7
|
},
|
|
8
8
|
"three": "0.185.1",
|
|
9
|
-
"threeBlocks": "0.
|
|
9
|
+
"threeBlocks": "0.12.0",
|
|
10
10
|
"threeBlocksShaderClosure": "92ccbbc1a03eaac46130ccc2b3dc72d6c47fbf8b6f47b226cfd4104ef927d17a"
|
|
11
11
|
},
|
|
12
12
|
"scenes": {
|
|
13
13
|
"text": {
|
|
14
14
|
"artifact": "text.webgpu.ts",
|
|
15
|
-
"artifactHash": "
|
|
15
|
+
"artifactHash": "5c7a18cc7427e5cd3cd18008d43b5f4b990ec73364c208546579a2bd32118b2f",
|
|
16
16
|
"asset": "three-blocks/shaders/text.webgpu.json",
|
|
17
|
-
"assetHash": "
|
|
17
|
+
"assetHash": "a2e79b026c9bd10df36f2ed74bc7bda2690dd0b27acbf50d11e7b3e1bae4016b",
|
|
18
18
|
"backend": "webgpu",
|
|
19
|
-
"bytes":
|
|
19
|
+
"bytes": 194262,
|
|
20
20
|
"coverage": {
|
|
21
21
|
"compute": 0,
|
|
22
|
-
"fragment":
|
|
23
|
-
"render":
|
|
24
|
-
"vertex":
|
|
22
|
+
"fragment": 17,
|
|
23
|
+
"render": 17,
|
|
24
|
+
"vertex": 17
|
|
25
25
|
},
|
|
26
26
|
"inputs": {
|
|
27
27
|
"src/assets.ts": "39b22a5e9886528d5d55887d76dcdd4a7a9adf73a61e8f5f45ebd85ced972c31",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
},
|
|
36
36
|
"text.webgl": {
|
|
37
37
|
"artifact": "text.webgl.ts",
|
|
38
|
-
"artifactHash": "
|
|
38
|
+
"artifactHash": "56b968c3ad4ac5f15aef91806299925c115bfbf74a0bafcc5da7a43c716040cb",
|
|
39
39
|
"asset": "three-blocks/shaders/text.webgl.json",
|
|
40
|
-
"assetHash": "
|
|
40
|
+
"assetHash": "d3a949e181d8d7d24c728abab7d702c6392d487a171f00ee3d6d2bd007011fe1",
|
|
41
41
|
"backend": "webgl",
|
|
42
|
-
"bytes":
|
|
42
|
+
"bytes": 229178,
|
|
43
43
|
"coverage": {
|
|
44
44
|
"compute": 0,
|
|
45
45
|
"fragment": 15,
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
"skipped": {
|
|
55
55
|
"compute": 0,
|
|
56
|
-
"render":
|
|
56
|
+
"render": 2
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
},
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"hydration": 2,
|
|
69
69
|
"name": "@three-blocks/devtools",
|
|
70
70
|
"recipe": 1,
|
|
71
|
-
"transform":
|
|
71
|
+
"transform": 64,
|
|
72
72
|
"version": "0.1.0"
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -75,9 +75,7 @@ export default {
|
|
|
75
75
|
},
|
|
76
76
|
"fallbacks": {
|
|
77
77
|
"text/dom-geist|z:0|w:400": "WebGL shader precompilation does not support PBO-backed storage reads.",
|
|
78
|
-
"text/dom-
|
|
79
|
-
"text/dom-noto|z:0|w:400": "WebGL shader precompilation does not support PBO-backed storage reads.",
|
|
80
|
-
"text/dom-noto|z:0|w:700": "WebGL shader precompilation does not support PBO-backed storage reads."
|
|
78
|
+
"text/dom-noto|z:0|w:400": "WebGL shader precompilation does not support PBO-backed storage reads."
|
|
81
79
|
},
|
|
82
80
|
"layouts": [
|
|
83
81
|
[
|
|
@@ -3628,7 +3626,7 @@ export default {
|
|
|
3628
3626
|
}
|
|
3629
3627
|
],
|
|
3630
3628
|
"three": "0.185.1",
|
|
3631
|
-
"threeBlocks": "0.
|
|
3629
|
+
"threeBlocks": "0.12.0",
|
|
3632
3630
|
"updatePlans": [
|
|
3633
3631
|
[2,5,3,6,7,0],
|
|
3634
3632
|
[],
|