@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4
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/README.md +220 -23
- package/bin/cli.js +106 -14
- package/dist-lib/app/App.d.ts +143 -15
- package/dist-lib/app/App.d.ts.map +1 -1
- package/dist-lib/app/App.js +1343 -108
- package/dist-lib/app/app.css +349 -24
- package/dist-lib/app/types.d.ts +48 -5
- package/dist-lib/app/types.d.ts.map +1 -1
- package/dist-lib/editor/EditorPanel.d.ts +2 -2
- package/dist-lib/editor/EditorPanel.d.ts.map +1 -1
- package/dist-lib/editor/EditorPanel.js +1 -1
- package/dist-lib/editor/editor-panel.css +55 -32
- package/dist-lib/editor/prism-editor.css +16 -16
- package/dist-lib/embed.js +1 -1
- package/dist-lib/engine/{ShadertoyEngine.d.ts → ShaderEngine.d.ts} +134 -10
- package/dist-lib/engine/ShaderEngine.d.ts.map +1 -0
- package/dist-lib/engine/ShaderEngine.js +1523 -0
- package/dist-lib/engine/glHelpers.d.ts +24 -0
- package/dist-lib/engine/glHelpers.d.ts.map +1 -1
- package/dist-lib/engine/glHelpers.js +88 -0
- package/dist-lib/engine/std140.d.ts +47 -0
- package/dist-lib/engine/std140.d.ts.map +1 -0
- package/dist-lib/engine/std140.js +119 -0
- package/dist-lib/engine/types.d.ts +55 -5
- package/dist-lib/engine/types.d.ts.map +1 -1
- package/dist-lib/engine/types.js +1 -1
- package/dist-lib/index.d.ts +4 -3
- package/dist-lib/index.d.ts.map +1 -1
- package/dist-lib/index.js +2 -1
- package/dist-lib/layouts/SplitLayout.d.ts +2 -1
- package/dist-lib/layouts/SplitLayout.d.ts.map +1 -1
- package/dist-lib/layouts/SplitLayout.js +3 -0
- package/dist-lib/layouts/TabbedLayout.d.ts.map +1 -1
- package/dist-lib/layouts/UILayout.d.ts +55 -0
- package/dist-lib/layouts/UILayout.d.ts.map +1 -0
- package/dist-lib/layouts/UILayout.js +147 -0
- package/dist-lib/layouts/default.css +2 -2
- package/dist-lib/layouts/index.d.ts +11 -1
- package/dist-lib/layouts/index.d.ts.map +1 -1
- package/dist-lib/layouts/index.js +17 -1
- package/dist-lib/layouts/split.css +33 -31
- package/dist-lib/layouts/tabbed.css +127 -74
- package/dist-lib/layouts/types.d.ts +14 -3
- package/dist-lib/layouts/types.d.ts.map +1 -1
- package/dist-lib/main.js +33 -0
- package/dist-lib/project/configHelpers.d.ts +45 -0
- package/dist-lib/project/configHelpers.d.ts.map +1 -0
- package/dist-lib/project/configHelpers.js +196 -0
- package/dist-lib/project/generatedLoader.d.ts +2 -2
- package/dist-lib/project/generatedLoader.d.ts.map +1 -1
- package/dist-lib/project/generatedLoader.js +23 -5
- package/dist-lib/project/loadProject.d.ts +6 -6
- package/dist-lib/project/loadProject.d.ts.map +1 -1
- package/dist-lib/project/loadProject.js +396 -144
- package/dist-lib/project/loaderHelper.d.ts +4 -4
- package/dist-lib/project/loaderHelper.d.ts.map +1 -1
- package/dist-lib/project/loaderHelper.js +278 -116
- package/dist-lib/project/types.d.ts +292 -13
- package/dist-lib/project/types.d.ts.map +1 -1
- package/dist-lib/project/types.js +13 -1
- package/dist-lib/styles/base.css +5 -1
- package/dist-lib/uniforms/UniformControls.d.ts +60 -0
- package/dist-lib/uniforms/UniformControls.d.ts.map +1 -0
- package/dist-lib/uniforms/UniformControls.js +518 -0
- package/dist-lib/uniforms/UniformStore.d.ts +74 -0
- package/dist-lib/uniforms/UniformStore.d.ts.map +1 -0
- package/dist-lib/uniforms/UniformStore.js +145 -0
- package/dist-lib/uniforms/UniformsPanel.d.ts +53 -0
- package/dist-lib/uniforms/UniformsPanel.d.ts.map +1 -0
- package/dist-lib/uniforms/UniformsPanel.js +124 -0
- package/dist-lib/uniforms/index.d.ts +11 -0
- package/dist-lib/uniforms/index.d.ts.map +1 -0
- package/dist-lib/uniforms/index.js +8 -0
- package/package.json +1 -1
- package/src/app/App.ts +1469 -126
- package/src/app/app.css +349 -24
- package/src/app/types.ts +53 -5
- package/src/editor/EditorPanel.ts +5 -5
- package/src/editor/editor-panel.css +55 -32
- package/src/editor/prism-editor.css +16 -16
- package/src/embed.ts +1 -1
- package/src/engine/ShaderEngine.ts +1934 -0
- package/src/engine/glHelpers.ts +117 -0
- package/src/engine/std140.ts +136 -0
- package/src/engine/types.ts +69 -5
- package/src/index.ts +4 -3
- package/src/layouts/SplitLayout.ts +8 -3
- package/src/layouts/TabbedLayout.ts +3 -3
- package/src/layouts/UILayout.ts +185 -0
- package/src/layouts/default.css +2 -2
- package/src/layouts/index.ts +20 -1
- package/src/layouts/split.css +33 -31
- package/src/layouts/tabbed.css +127 -74
- package/src/layouts/types.ts +19 -3
- package/src/layouts/ui.css +289 -0
- package/src/main.ts +39 -1
- package/src/project/configHelpers.ts +225 -0
- package/src/project/generatedLoader.ts +27 -6
- package/src/project/loadProject.ts +459 -173
- package/src/project/loaderHelper.ts +377 -130
- package/src/project/types.ts +360 -14
- package/src/styles/base.css +5 -1
- package/src/styles/theme.css +292 -0
- package/src/uniforms/UniformControls.ts +660 -0
- package/src/uniforms/UniformStore.ts +166 -0
- package/src/uniforms/UniformsPanel.ts +163 -0
- package/src/uniforms/index.ts +13 -0
- package/src/uniforms/uniform-controls.css +342 -0
- package/src/uniforms/uniforms-panel.css +277 -0
- package/templates/shaders/example-buffer/config.json +1 -0
- package/dist-lib/engine/ShadertoyEngine.d.ts.map +0 -1
- package/dist-lib/engine/ShadertoyEngine.js +0 -704
- package/src/engine/ShadertoyEngine.ts +0 -929
|
@@ -76,4 +76,28 @@ export declare function updateKeyboardTexture(gl: WebGL2RenderingContext, textur
|
|
|
76
76
|
* already-loaded image object.
|
|
77
77
|
*/
|
|
78
78
|
export declare function createTextureFromImage(gl: WebGL2RenderingContext, image: HTMLImageElement | ImageBitmap, filter: 'nearest' | 'linear', wrap: 'clamp' | 'repeat'): WebGLTexture;
|
|
79
|
+
/**
|
|
80
|
+
* Create a 512x2 audio texture (Shadertoy-compatible).
|
|
81
|
+
* Row 0: frequency spectrum (FFT), Row 1: waveform.
|
|
82
|
+
* Uses R8 format — data is in the red channel, sampled with texture().x
|
|
83
|
+
*/
|
|
84
|
+
export declare function createAudioTexture(gl: WebGL2RenderingContext): WebGLTexture;
|
|
85
|
+
/**
|
|
86
|
+
* Update audio texture with frequency and waveform data.
|
|
87
|
+
*/
|
|
88
|
+
export declare function updateAudioTextureData(gl: WebGL2RenderingContext, texture: WebGLTexture, frequencyData: Uint8Array, waveformData: Uint8Array): void;
|
|
89
|
+
/**
|
|
90
|
+
* Create a placeholder texture for video/webcam (1x1 black, RGBA).
|
|
91
|
+
* Updated each frame with actual video data once ready.
|
|
92
|
+
*/
|
|
93
|
+
export declare function createVideoPlaceholderTexture(gl: WebGL2RenderingContext): WebGLTexture;
|
|
94
|
+
/**
|
|
95
|
+
* Upload a video frame to a texture.
|
|
96
|
+
*/
|
|
97
|
+
export declare function updateVideoTexture(gl: WebGL2RenderingContext, texture: WebGLTexture, video: HTMLVideoElement): void;
|
|
98
|
+
/**
|
|
99
|
+
* Create or update a script-uploaded texture.
|
|
100
|
+
* Detects data type: Uint8Array → RGBA8, Float32Array → RGBA32F.
|
|
101
|
+
*/
|
|
102
|
+
export declare function createOrUpdateScriptTexture(gl: WebGL2RenderingContext, existing: WebGLTexture | null, width: number, height: number, data: Uint8Array | Float32Array): WebGLTexture;
|
|
79
103
|
//# sourceMappingURL=glHelpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glHelpers.d.ts","sourceRoot":"","sources":["../../src/engine/glHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,wBAAgB,YAAY,CAC1B,EAAE,EAAE,sBAAsB,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GACb,WAAW,CAiBb;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,EAAE,EAAE,sBAAsB,EAC1B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACrB,YAAY,CA6Bd;AAMD;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAAE,EAAE,sBAAsB,GAAG,sBAAsB,CAuC9F;AAMD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,YAAY,CAiCd;AAED;;;GAGG;AACH,wBAAgB,oCAAoC,CAClD,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,GACpB,gBAAgB,CA2BlB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAkC3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAoC9E;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,IAAI,CAsCN;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,gBAAgB,GAAG,WAAW,EACrC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GACvB,YAAY,CA+Bd"}
|
|
1
|
+
{"version":3,"file":"glHelpers.d.ts","sourceRoot":"","sources":["../../src/engine/glHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,wBAAgB,YAAY,CAC1B,EAAE,EAAE,sBAAsB,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GACb,WAAW,CAiBb;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,EAAE,EAAE,sBAAsB,EAC1B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACrB,YAAY,CA6Bd;AAMD;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAAE,EAAE,sBAAsB,GAAG,sBAAsB,CAuC9F;AAMD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,YAAY,CAiCd;AAED;;;GAGG;AACH,wBAAgB,oCAAoC,CAClD,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,GACpB,gBAAgB,CA2BlB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAkC3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAoC9E;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,IAAI,CAsCN;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,gBAAgB,GAAG,WAAW,EACrC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GACvB,YAAY,CA+Bd;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAkB3E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,UAAU,GACvB,IAAI,CAON;AAMD;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAatF;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,gBAAgB,GACtB,IAAI,CAIN;AAMD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,EAAE,EAAE,sBAAsB,EAC1B,QAAQ,EAAE,YAAY,GAAG,IAAI,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,UAAU,GAAG,YAAY,GAC9B,YAAY,CAmBd"}
|
|
@@ -275,6 +275,94 @@ export function createTextureFromImage(gl, image, filter, wrap) {
|
|
|
275
275
|
return tex;
|
|
276
276
|
}
|
|
277
277
|
// =============================================================================
|
|
278
|
+
// Audio Texture
|
|
279
|
+
// =============================================================================
|
|
280
|
+
/**
|
|
281
|
+
* Create a 512x2 audio texture (Shadertoy-compatible).
|
|
282
|
+
* Row 0: frequency spectrum (FFT), Row 1: waveform.
|
|
283
|
+
* Uses R8 format — data is in the red channel, sampled with texture().x
|
|
284
|
+
*/
|
|
285
|
+
export function createAudioTexture(gl) {
|
|
286
|
+
const tex = gl.createTexture();
|
|
287
|
+
if (!tex)
|
|
288
|
+
throw new Error('Failed to create audio texture');
|
|
289
|
+
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
290
|
+
const width = 512;
|
|
291
|
+
const height = 2;
|
|
292
|
+
const data = new Uint8Array(width * height); // R8, all zeros
|
|
293
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, width, height, 0, gl.RED, gl.UNSIGNED_BYTE, data);
|
|
294
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
295
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
296
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
297
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
298
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
299
|
+
return tex;
|
|
300
|
+
}
|
|
301
|
+
/**
|
|
302
|
+
* Update audio texture with frequency and waveform data.
|
|
303
|
+
*/
|
|
304
|
+
export function updateAudioTextureData(gl, texture, frequencyData, waveformData) {
|
|
305
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
306
|
+
// Row 0: frequency
|
|
307
|
+
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 512, 1, gl.RED, gl.UNSIGNED_BYTE, frequencyData);
|
|
308
|
+
// Row 1: waveform
|
|
309
|
+
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 1, 512, 1, gl.RED, gl.UNSIGNED_BYTE, waveformData);
|
|
310
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
311
|
+
}
|
|
312
|
+
// =============================================================================
|
|
313
|
+
// Video/Webcam Texture
|
|
314
|
+
// =============================================================================
|
|
315
|
+
/**
|
|
316
|
+
* Create a placeholder texture for video/webcam (1x1 black, RGBA).
|
|
317
|
+
* Updated each frame with actual video data once ready.
|
|
318
|
+
*/
|
|
319
|
+
export function createVideoPlaceholderTexture(gl) {
|
|
320
|
+
const tex = gl.createTexture();
|
|
321
|
+
if (!tex)
|
|
322
|
+
throw new Error('Failed to create video texture');
|
|
323
|
+
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
324
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
|
|
325
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
326
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
327
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
328
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
329
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
330
|
+
return tex;
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* Upload a video frame to a texture.
|
|
334
|
+
*/
|
|
335
|
+
export function updateVideoTexture(gl, texture, video) {
|
|
336
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
337
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
|
|
338
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
339
|
+
}
|
|
340
|
+
// =============================================================================
|
|
341
|
+
// Script-Uploaded Texture
|
|
342
|
+
// =============================================================================
|
|
343
|
+
/**
|
|
344
|
+
* Create or update a script-uploaded texture.
|
|
345
|
+
* Detects data type: Uint8Array → RGBA8, Float32Array → RGBA32F.
|
|
346
|
+
*/
|
|
347
|
+
export function createOrUpdateScriptTexture(gl, existing, width, height, data) {
|
|
348
|
+
const tex = existing ?? gl.createTexture();
|
|
349
|
+
if (!tex)
|
|
350
|
+
throw new Error('Failed to create script texture');
|
|
351
|
+
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
352
|
+
if (data instanceof Float32Array) {
|
|
353
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, data);
|
|
354
|
+
}
|
|
355
|
+
else {
|
|
356
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
|
|
357
|
+
}
|
|
358
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
|
359
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
|
360
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
361
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
362
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
363
|
+
return tex;
|
|
364
|
+
}
|
|
365
|
+
// =============================================================================
|
|
278
366
|
// Helper Utilities
|
|
279
367
|
// =============================================================================
|
|
280
368
|
/**
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* std140 Layout Packing Utilities
|
|
3
|
+
*
|
|
4
|
+
* Handles conversion from tightly-packed user data to std140 layout
|
|
5
|
+
* required by WebGL2 Uniform Buffer Objects.
|
|
6
|
+
*
|
|
7
|
+
* std140 array element rules:
|
|
8
|
+
* - Every array element is rounded up to a vec4 (16 bytes) stride
|
|
9
|
+
* - float[N]: 4 bytes data + 12 bytes padding per element
|
|
10
|
+
* - vec2[N]: 8 bytes data + 8 bytes padding per element
|
|
11
|
+
* - vec3[N]: 12 bytes data + 4 bytes padding per element
|
|
12
|
+
* - vec4[N]: 16 bytes, no padding
|
|
13
|
+
* - mat3[N]: 3 columns of vec4 (padded) = 48 bytes per element
|
|
14
|
+
* - mat4[N]: 4 columns of vec4 = 64 bytes, no padding needed
|
|
15
|
+
*/
|
|
16
|
+
import { ArrayUniformType } from '../project/types';
|
|
17
|
+
/**
|
|
18
|
+
* Number of tightly-packed floats for a given type and count.
|
|
19
|
+
*/
|
|
20
|
+
export declare function tightFloatCount(type: ArrayUniformType, count: number): number;
|
|
21
|
+
/**
|
|
22
|
+
* Compute the total byte size of a std140 uniform block for an array.
|
|
23
|
+
*/
|
|
24
|
+
export declare function std140ByteSize(type: ArrayUniformType, count: number): number;
|
|
25
|
+
/**
|
|
26
|
+
* Compute the total number of floats in std140 layout for a given type and count.
|
|
27
|
+
*/
|
|
28
|
+
export declare function std140FloatCount(type: ArrayUniformType, count: number): number;
|
|
29
|
+
/**
|
|
30
|
+
* Pack tightly-packed user data into std140 layout.
|
|
31
|
+
*
|
|
32
|
+
* For mat4 and vec4, the tight layout is already std140-compatible,
|
|
33
|
+
* so this returns the input directly (no copy).
|
|
34
|
+
*
|
|
35
|
+
* For other types, allocates a new Float32Array with proper padding.
|
|
36
|
+
*
|
|
37
|
+
* @param type - The GLSL type of each array element
|
|
38
|
+
* @param count - Number of elements
|
|
39
|
+
* @param tightData - User-provided tightly-packed data
|
|
40
|
+
* @param out - Optional pre-allocated output buffer (reused across frames)
|
|
41
|
+
*/
|
|
42
|
+
export declare function packStd140(type: ArrayUniformType, count: number, tightData: Float32Array, out?: Float32Array): Float32Array;
|
|
43
|
+
/**
|
|
44
|
+
* Get the GLSL type string for use in uniform block declarations.
|
|
45
|
+
*/
|
|
46
|
+
export declare function glslTypeName(type: ArrayUniformType): string;
|
|
47
|
+
//# sourceMappingURL=std140.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"std140.d.ts","sourceRoot":"","sources":["../../src/engine/std140.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAsBpD;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,YAAY,EACvB,GAAG,CAAC,EAAE,YAAY,GACjB,YAAY,CAmDd;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAE3D"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* std140 Layout Packing Utilities
|
|
3
|
+
*
|
|
4
|
+
* Handles conversion from tightly-packed user data to std140 layout
|
|
5
|
+
* required by WebGL2 Uniform Buffer Objects.
|
|
6
|
+
*
|
|
7
|
+
* std140 array element rules:
|
|
8
|
+
* - Every array element is rounded up to a vec4 (16 bytes) stride
|
|
9
|
+
* - float[N]: 4 bytes data + 12 bytes padding per element
|
|
10
|
+
* - vec2[N]: 8 bytes data + 8 bytes padding per element
|
|
11
|
+
* - vec3[N]: 12 bytes data + 4 bytes padding per element
|
|
12
|
+
* - vec4[N]: 16 bytes, no padding
|
|
13
|
+
* - mat3[N]: 3 columns of vec4 (padded) = 48 bytes per element
|
|
14
|
+
* - mat4[N]: 4 columns of vec4 = 64 bytes, no padding needed
|
|
15
|
+
*/
|
|
16
|
+
/** Number of floats per element in tightly-packed user data */
|
|
17
|
+
const TIGHT_FLOATS = {
|
|
18
|
+
float: 1,
|
|
19
|
+
vec2: 2,
|
|
20
|
+
vec3: 3,
|
|
21
|
+
vec4: 4,
|
|
22
|
+
mat3: 9,
|
|
23
|
+
mat4: 16,
|
|
24
|
+
};
|
|
25
|
+
/** Number of floats per array element in std140 layout */
|
|
26
|
+
const STD140_STRIDE_FLOATS = {
|
|
27
|
+
float: 4, // 1 float + 3 padding
|
|
28
|
+
vec2: 4, // 2 floats + 2 padding
|
|
29
|
+
vec3: 4, // 3 floats + 1 padding
|
|
30
|
+
vec4: 4, // 4 floats, naturally aligned
|
|
31
|
+
mat3: 12, // 3 columns × 4 floats (vec3 padded to vec4)
|
|
32
|
+
mat4: 16, // 4 columns × 4 floats, no padding
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Number of tightly-packed floats for a given type and count.
|
|
36
|
+
*/
|
|
37
|
+
export function tightFloatCount(type, count) {
|
|
38
|
+
return TIGHT_FLOATS[type] * count;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Compute the total byte size of a std140 uniform block for an array.
|
|
42
|
+
*/
|
|
43
|
+
export function std140ByteSize(type, count) {
|
|
44
|
+
return STD140_STRIDE_FLOATS[type] * count * 4; // 4 bytes per float
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Compute the total number of floats in std140 layout for a given type and count.
|
|
48
|
+
*/
|
|
49
|
+
export function std140FloatCount(type, count) {
|
|
50
|
+
return STD140_STRIDE_FLOATS[type] * count;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Pack tightly-packed user data into std140 layout.
|
|
54
|
+
*
|
|
55
|
+
* For mat4 and vec4, the tight layout is already std140-compatible,
|
|
56
|
+
* so this returns the input directly (no copy).
|
|
57
|
+
*
|
|
58
|
+
* For other types, allocates a new Float32Array with proper padding.
|
|
59
|
+
*
|
|
60
|
+
* @param type - The GLSL type of each array element
|
|
61
|
+
* @param count - Number of elements
|
|
62
|
+
* @param tightData - User-provided tightly-packed data
|
|
63
|
+
* @param out - Optional pre-allocated output buffer (reused across frames)
|
|
64
|
+
*/
|
|
65
|
+
export function packStd140(type, count, tightData, out) {
|
|
66
|
+
const tightPerElement = TIGHT_FLOATS[type];
|
|
67
|
+
const strideFloats = STD140_STRIDE_FLOATS[type];
|
|
68
|
+
// Fast path: mat4 and vec4 are already std140-compatible
|
|
69
|
+
if (tightPerElement === strideFloats) {
|
|
70
|
+
return tightData;
|
|
71
|
+
}
|
|
72
|
+
const totalFloats = strideFloats * count;
|
|
73
|
+
const result = out && out.length >= totalFloats ? out : new Float32Array(totalFloats);
|
|
74
|
+
if (type === 'mat3') {
|
|
75
|
+
// mat3: 9 tight floats → 3 columns of vec4 (12 floats)
|
|
76
|
+
// Column-major: tight = [c0r0, c0r1, c0r2, c1r0, c1r1, c1r2, c2r0, c2r1, c2r2]
|
|
77
|
+
// std140: [c0r0, c0r1, c0r2, 0, c1r0, c1r1, c1r2, 0, c2r0, c2r1, c2r2, 0]
|
|
78
|
+
for (let i = 0; i < count; i++) {
|
|
79
|
+
const srcOff = i * 9;
|
|
80
|
+
const dstOff = i * 12;
|
|
81
|
+
// Column 0
|
|
82
|
+
result[dstOff + 0] = tightData[srcOff + 0];
|
|
83
|
+
result[dstOff + 1] = tightData[srcOff + 1];
|
|
84
|
+
result[dstOff + 2] = tightData[srcOff + 2];
|
|
85
|
+
result[dstOff + 3] = 0;
|
|
86
|
+
// Column 1
|
|
87
|
+
result[dstOff + 4] = tightData[srcOff + 3];
|
|
88
|
+
result[dstOff + 5] = tightData[srcOff + 4];
|
|
89
|
+
result[dstOff + 6] = tightData[srcOff + 5];
|
|
90
|
+
result[dstOff + 7] = 0;
|
|
91
|
+
// Column 2
|
|
92
|
+
result[dstOff + 8] = tightData[srcOff + 6];
|
|
93
|
+
result[dstOff + 9] = tightData[srcOff + 7];
|
|
94
|
+
result[dstOff + 10] = tightData[srcOff + 8];
|
|
95
|
+
result[dstOff + 11] = 0;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
// float, vec2, vec3: pad each element to 4 floats
|
|
100
|
+
for (let i = 0; i < count; i++) {
|
|
101
|
+
const srcOff = i * tightPerElement;
|
|
102
|
+
const dstOff = i * 4;
|
|
103
|
+
for (let j = 0; j < tightPerElement; j++) {
|
|
104
|
+
result[dstOff + j] = tightData[srcOff + j];
|
|
105
|
+
}
|
|
106
|
+
// Remaining floats stay 0 (from Float32Array initialization or previous clear)
|
|
107
|
+
for (let j = tightPerElement; j < 4; j++) {
|
|
108
|
+
result[dstOff + j] = 0;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
return result;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Get the GLSL type string for use in uniform block declarations.
|
|
116
|
+
*/
|
|
117
|
+
export function glslTypeName(type) {
|
|
118
|
+
return type; // float, vec2, vec3, vec4, mat3, mat4 are already valid GLSL
|
|
119
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Engine Layer - Type Definitions
|
|
3
3
|
*
|
|
4
|
-
* Internal types used by
|
|
4
|
+
* Internal types used by ShaderEngine for managing WebGL resources.
|
|
5
5
|
* Based on docs/engine-spec.md
|
|
6
6
|
*/
|
|
7
|
-
import type {
|
|
7
|
+
import type { ShaderProject, PassName, Channels, ChannelSource } from '../project/types';
|
|
8
8
|
/**
|
|
9
|
-
* Options for constructing a
|
|
9
|
+
* Options for constructing a ShaderEngine.
|
|
10
10
|
*
|
|
11
11
|
* The App is responsible for creating the WebGL2RenderingContext
|
|
12
12
|
* and passing it in.
|
|
13
13
|
*/
|
|
14
14
|
export interface EngineOptions {
|
|
15
15
|
gl: WebGL2RenderingContext;
|
|
16
|
-
project:
|
|
16
|
+
project: ShaderProject;
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* Per-pass uniform locations and metadata.
|
|
@@ -28,7 +28,19 @@ export interface PassUniformLocations {
|
|
|
28
28
|
iTimeDelta: WebGLUniformLocation | null;
|
|
29
29
|
iFrame: WebGLUniformLocation | null;
|
|
30
30
|
iMouse: WebGLUniformLocation | null;
|
|
31
|
+
iMousePressed: WebGLUniformLocation | null;
|
|
32
|
+
iDate: WebGLUniformLocation | null;
|
|
33
|
+
iFrameRate: WebGLUniformLocation | null;
|
|
31
34
|
iChannel: (WebGLUniformLocation | null)[];
|
|
35
|
+
iChannelResolution: (WebGLUniformLocation | null)[];
|
|
36
|
+
iTouchCount: WebGLUniformLocation | null;
|
|
37
|
+
iTouch: (WebGLUniformLocation | null)[];
|
|
38
|
+
iPinch: WebGLUniformLocation | null;
|
|
39
|
+
iPinchDelta: WebGLUniformLocation | null;
|
|
40
|
+
iPinchCenter: WebGLUniformLocation | null;
|
|
41
|
+
custom: Map<string, WebGLUniformLocation | null>;
|
|
42
|
+
namedSamplers: Map<string, WebGLUniformLocation | null>;
|
|
43
|
+
namedSamplerResolutions: Map<string, WebGLUniformLocation | null>;
|
|
32
44
|
}
|
|
33
45
|
/**
|
|
34
46
|
* A runtime representation of a pass:
|
|
@@ -44,10 +56,11 @@ export interface RuntimePass {
|
|
|
44
56
|
framebuffer: WebGLFramebuffer;
|
|
45
57
|
currentTexture: WebGLTexture;
|
|
46
58
|
previousTexture: WebGLTexture;
|
|
59
|
+
namedSamplers?: Map<string, ChannelSource>;
|
|
47
60
|
}
|
|
48
61
|
/**
|
|
49
62
|
* Runtime representation of an external 2D texture.
|
|
50
|
-
* This corresponds 1:1 to
|
|
63
|
+
* This corresponds 1:1 to ShaderTexture2D from the project.
|
|
51
64
|
*/
|
|
52
65
|
export interface RuntimeTexture2D {
|
|
53
66
|
name: string;
|
|
@@ -64,6 +77,43 @@ export interface RuntimeKeyboardTexture {
|
|
|
64
77
|
width: number;
|
|
65
78
|
height: number;
|
|
66
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* Runtime audio texture (microphone FFT + waveform).
|
|
82
|
+
* 512x2, R8 format: row 0 = frequency, row 1 = waveform.
|
|
83
|
+
*/
|
|
84
|
+
export interface RuntimeAudioTexture {
|
|
85
|
+
texture: WebGLTexture;
|
|
86
|
+
audioContext: AudioContext | null;
|
|
87
|
+
analyser: AnalyserNode | null;
|
|
88
|
+
stream: MediaStream | null;
|
|
89
|
+
frequencyData: Uint8Array<ArrayBuffer>;
|
|
90
|
+
waveformData: Uint8Array<ArrayBuffer>;
|
|
91
|
+
width: number;
|
|
92
|
+
height: number;
|
|
93
|
+
initialized: boolean;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Runtime video texture (webcam or video file).
|
|
97
|
+
*/
|
|
98
|
+
export interface RuntimeVideoTexture {
|
|
99
|
+
texture: WebGLTexture;
|
|
100
|
+
video: HTMLVideoElement | null;
|
|
101
|
+
stream: MediaStream | null;
|
|
102
|
+
width: number;
|
|
103
|
+
height: number;
|
|
104
|
+
ready: boolean;
|
|
105
|
+
kind: 'webcam' | 'video';
|
|
106
|
+
src?: string;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Runtime script-uploaded texture.
|
|
110
|
+
*/
|
|
111
|
+
export interface RuntimeScriptTexture {
|
|
112
|
+
texture: WebGLTexture;
|
|
113
|
+
width: number;
|
|
114
|
+
height: number;
|
|
115
|
+
isFloat: boolean;
|
|
116
|
+
}
|
|
67
117
|
/**
|
|
68
118
|
* Engine stats (for optional overlay / debugging).
|
|
69
119
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/engine/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/engine/types.ts"],"names":[],"mappings":"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"}
|
package/dist-lib/engine/types.js
CHANGED
package/dist-lib/index.d.ts
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import './styles/base.css';
|
|
7
7
|
export { App } from './app/App';
|
|
8
|
-
export { createLayout } from './layouts';
|
|
8
|
+
export { createLayout, applyTheme } from './layouts';
|
|
9
9
|
export { loadDemo } from './project/loaderHelper';
|
|
10
|
-
export type {
|
|
11
|
-
export
|
|
10
|
+
export type { ShaderProject, ProjectConfig, PassName, ThemeMode, DemoScriptHooks, ScriptEngineAPI, ArrayUniformDefinition } from './project/types';
|
|
11
|
+
export { isArrayUniform } from './project/types';
|
|
12
|
+
export type { RecompileResult, BaseLayout, LayoutMode, LayoutOptions, RecompileHandler, UniformChangeHandler } from './layouts/types';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
package/dist-lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist-lib/index.js
CHANGED
|
@@ -5,5 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import './styles/base.css';
|
|
7
7
|
export { App } from './app/App';
|
|
8
|
-
export { createLayout } from './layouts';
|
|
8
|
+
export { createLayout, applyTheme } from './layouts';
|
|
9
9
|
export { loadDemo } from './project/loaderHelper';
|
|
10
|
+
export { isArrayUniform } from './project/types';
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Ideal for teaching and presentations where viewers can tweak the code.
|
|
6
6
|
*/
|
|
7
7
|
import './split.css';
|
|
8
|
-
import { BaseLayout, LayoutOptions, RecompileHandler } from './types';
|
|
8
|
+
import { BaseLayout, LayoutOptions, RecompileHandler, UniformChangeHandler } from './types';
|
|
9
9
|
export declare class SplitLayout implements BaseLayout {
|
|
10
10
|
private container;
|
|
11
11
|
private project;
|
|
@@ -17,6 +17,7 @@ export declare class SplitLayout implements BaseLayout {
|
|
|
17
17
|
constructor(opts: LayoutOptions);
|
|
18
18
|
getCanvasContainer(): HTMLElement;
|
|
19
19
|
setRecompileHandler(handler: RecompileHandler): void;
|
|
20
|
+
setUniformHandler(_handler: UniformChangeHandler): void;
|
|
20
21
|
dispose(): void;
|
|
21
22
|
/**
|
|
22
23
|
* Build editor panel (dynamically loaded).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/SplitLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/SplitLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAG5F,qBAAa,WAAY,YAAW,UAAU;IAC5C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,SAAS,CAAc;IAE/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAiC;gBAG7C,IAAI,EAAE,aAAa;IAyB/B,kBAAkB,IAAI,WAAW;IAIjC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOpD,iBAAiB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,IAAI;IAIvD,OAAO,IAAI,IAAI;IAQf;;OAEG;YACW,gBAAgB;CAW/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabbedLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TabbedLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQtE,qBAAa,YAAa,YAAW,UAAU;IAC7C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"TabbedLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TabbedLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQtE,qBAAa,YAAa,YAAW,UAAU;IAC7C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,WAAW,CAAc;IAEjC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,cAAc,CAAa;gBAEvB,IAAI,EAAE,aAAa;IAoF/B,kBAAkB,IAAI,WAAW;IAIjC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS;YAMH,eAAe;IA4B7B,OAAO,CAAC,WAAW;CAqJpB"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UI Layout
|
|
3
|
+
*
|
|
4
|
+
* Shader on left, uniform controls panel on right (~200px wide).
|
|
5
|
+
* Playback controls (play/pause, reset, screenshot) at bottom of UI panel.
|
|
6
|
+
* Responsive: stacks vertically on small screens (<600px).
|
|
7
|
+
*/
|
|
8
|
+
import './ui.css';
|
|
9
|
+
import { BaseLayout, LayoutOptions } from './types';
|
|
10
|
+
import { UniformValue } from '../project/types';
|
|
11
|
+
export declare class UILayout implements BaseLayout {
|
|
12
|
+
private container;
|
|
13
|
+
private project;
|
|
14
|
+
private root;
|
|
15
|
+
private canvasContainer;
|
|
16
|
+
private uiPanel;
|
|
17
|
+
private uniformsContainer;
|
|
18
|
+
private uniformControls;
|
|
19
|
+
private playbackContainer;
|
|
20
|
+
private playPauseButton;
|
|
21
|
+
private onPlayPause;
|
|
22
|
+
private onReset;
|
|
23
|
+
private onScreenshot;
|
|
24
|
+
private onUniformChange;
|
|
25
|
+
constructor(opts: LayoutOptions);
|
|
26
|
+
getCanvasContainer(): HTMLElement;
|
|
27
|
+
/**
|
|
28
|
+
* Set callbacks for playback controls.
|
|
29
|
+
* Called by App after initialization.
|
|
30
|
+
*/
|
|
31
|
+
setPlaybackCallbacks(callbacks: {
|
|
32
|
+
onPlayPause: () => void;
|
|
33
|
+
onReset: () => void;
|
|
34
|
+
onScreenshot: () => void;
|
|
35
|
+
}): void;
|
|
36
|
+
/**
|
|
37
|
+
* Set callback for uniform changes.
|
|
38
|
+
* Called by App after initialization.
|
|
39
|
+
*/
|
|
40
|
+
setUniformCallback(callback: (name: string, value: UniformValue) => void): void;
|
|
41
|
+
/**
|
|
42
|
+
* Update play/pause button state.
|
|
43
|
+
*/
|
|
44
|
+
setPaused(paused: boolean): void;
|
|
45
|
+
dispose(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Build playback control buttons.
|
|
48
|
+
*/
|
|
49
|
+
private buildPlaybackControls;
|
|
50
|
+
/**
|
|
51
|
+
* Load uniform controls dynamically.
|
|
52
|
+
*/
|
|
53
|
+
private loadUniformControls;
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=UILayout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UILayout.d.ts","sourceRoot":"","sources":["../../src/layouts/UILayout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,UAAU,CAAC;AAElB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAiB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG/D,qBAAa,QAAS,YAAW,UAAU;IACzC,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,OAAO,CAAc;IAG7B,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,eAAe,CAAoC;IAG3D,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,eAAe,CAA8D;gBAEzE,IAAI,EAAE,aAAa;IAoC/B,kBAAkB,IAAI,WAAW;IAIjC;;;OAGG;IACH,oBAAoB,CAAC,SAAS,EAAE;QAC9B,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,GAAG,IAAI;IAMR;;;OAGG;IACH,kBAAkB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,IAAI;IAI/E;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAShC,OAAO,IAAI,IAAI;IAQf;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAiC7B;;OAEG;YACW,mBAAmB;CA4BlC"}
|