shaders 2.5.101 → 2.5.102
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/dist/core/{FilmGrain-yBeLmqwl.js → FilmGrain-DSJiMtEp.js} +3 -3
- package/dist/core/VHS-CQJ1hV_D.js +123 -0
- package/dist/core/{VideoTexture-DJrkry82.js → VideoTexture-DnHIs4pp.js} +1 -1
- package/dist/core/{WebcamTexture-Cf8J7JB1.js → WebcamTexture-XBDo2kgN.js} +1 -1
- package/dist/core/index.js +12 -11
- package/dist/core/registry.js +12 -11
- package/dist/core/{shaderRegistry-X16MNgs8.js → shaderRegistry-B6D8HKv7.js} +19 -17
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/FilmGrain/index.d.ts.map +1 -1
- package/dist/core/shaders/FilmGrain/index.js +1 -1
- package/dist/core/shaders/VHS/index.d.ts +32 -0
- package/dist/core/shaders/VHS/index.d.ts.map +1 -0
- package/dist/core/shaders/VHS/index.js +3 -0
- package/dist/core/shaders/Vibrance/index.js +1 -1
- package/dist/core/shaders/VideoTexture/index.js +2 -2
- package/dist/core/shaders/Vignette/index.js +1 -1
- package/dist/core/shaders/Voronoi/index.js +1 -1
- package/dist/core/shaders/WaveDistortion/index.js +1 -1
- package/dist/core/shaders/Weave/index.js +1 -1
- package/dist/core/shaders/WebcamTexture/index.js +2 -2
- package/dist/core/shaders/ZoomBlur/index.js +1 -1
- package/dist/js/createShader.js +1 -1
- package/dist/js/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/js/utils/generatePresetCode.js +9 -0
- package/dist/react/Preview.js +1 -0
- package/dist/react/Shader.js +1 -1
- package/dist/react/VHS.js +223 -0
- package/dist/react/components/VHS.d.ts +35 -0
- package/dist/react/components/VHS.d.ts.map +1 -0
- package/dist/react/engine/Preview.d.ts.map +1 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +2 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +9 -0
- package/dist/registry.js +132 -0
- package/dist/solid/components/VHS.d.ts +32 -0
- package/dist/solid/components/VHS.d.ts.map +1 -0
- package/dist/solid/components/VHS.js +228 -0
- package/dist/solid/engine/Preview.d.ts.map +1 -1
- package/dist/solid/engine/Preview.js +190 -188
- package/dist/solid/engine/Shader.js +1 -1
- package/dist/solid/index.d.ts +1 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +24 -22
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +9 -0
- package/dist/svelte/components/VHS.svelte.d.ts +22 -0
- package/dist/svelte/{generatePresetCode-Cdho2JhN.js → generatePresetCode-BygAdFRo.js} +9 -0
- package/dist/svelte/index.d.ts +1 -0
- package/dist/svelte/index.js +631 -431
- package/dist/svelte/source/components/VHS.svelte +328 -0
- package/dist/svelte/source/engine/Preview.svelte +2 -0
- package/dist/svelte/source/index.js +1 -0
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js +2 -0
- package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/vue/VHS.js +3 -0
- package/dist/vue/VHS.vue_vue_type_script_setup_true_lang.js +216 -0
- package/dist/vue/components/VHS.vue.d.ts +57 -0
- package/dist/vue/components/VHS.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +2 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +9 -0
- package/package.json +9 -1
- /package/dist/core/{Vibrance-dqIV6GBe.js → Vibrance-CGvYDeds.js} +0 -0
- /package/dist/core/{Vignette-DB1wO1dm.js → Vignette-BJaonUVL.js} +0 -0
- /package/dist/core/{Voronoi-C3WIJFWc.js → Voronoi-DZemzWA4.js} +0 -0
- /package/dist/core/{WaveDistortion-BKma8-Ju.js → WaveDistortion--Y-m667K.js} +0 -0
- /package/dist/core/{Weave-xuu_vQ5e.js → Weave-CtyohvHz.js} +0 -0
- /package/dist/core/{ZoomBlur-UcS2iFT2.js → ZoomBlur-BwkhsFRE.js} +0 -0
- /package/dist/core/{browser-ClWxLlIB.js → browser-DTNngPey.js} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { clamp, dot, float,
|
|
1
|
+
import { clamp, dot, float, fract, pow, sin, uniform, vec2, vec3, vec4, viewportCoordinate } from "three/tsl";
|
|
2
2
|
const componentDefinition = {
|
|
3
3
|
name: "FilmGrain",
|
|
4
4
|
category: "Stylize",
|
|
@@ -49,8 +49,8 @@ const componentDefinition = {
|
|
|
49
49
|
onBeforeRender(({ deltaTime }) => {
|
|
50
50
|
animTime.value += deltaTime * animated.value * 10;
|
|
51
51
|
});
|
|
52
|
-
const grain = fract(sin(dot(
|
|
53
|
-
const brightness = clamp(dot(sourceColor.rgb, vec3(.
|
|
52
|
+
const grain = fract(sin(dot(viewportCoordinate, vec2(12.9898, 78.233)).add(animTime)).mul(float(43758.5453))).mul(float(2)).sub(float(1));
|
|
53
|
+
const brightness = clamp(dot(sourceColor.rgb, vec3(.2126, .7152, .0722)), 0, 1);
|
|
54
54
|
const darkFactor = pow(float(1).sub(brightness).add(float(1e-6)), bias);
|
|
55
55
|
const grainIntensity = grain.mul(darkFactor).mul(strength.mul(float(.1)));
|
|
56
56
|
return vec4(sourceColor.rgb.add(grainIntensity), sourceColor.a);
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
|
|
2
|
+
import { clamp, convertToTexture, cos, dot, float, floor, fract, mix, mod, screenUV, sin, smoothstep, time, vec2, vec3, vec4 } from "three/tsl";
|
|
3
|
+
var SMEAR_SAMPLES = 6;
|
|
4
|
+
var FIELD_LINES = 487;
|
|
5
|
+
const componentDefinition = {
|
|
6
|
+
name: "VHS",
|
|
7
|
+
category: "Stylize",
|
|
8
|
+
description: "Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",
|
|
9
|
+
requiresRTT: true,
|
|
10
|
+
requiresChild: true,
|
|
11
|
+
props: {
|
|
12
|
+
wobble: {
|
|
13
|
+
default: 1,
|
|
14
|
+
description: "Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time.",
|
|
15
|
+
ui: {
|
|
16
|
+
type: ["range", "map"],
|
|
17
|
+
min: 0,
|
|
18
|
+
max: 5,
|
|
19
|
+
step: .01,
|
|
20
|
+
label: "Wobble",
|
|
21
|
+
group: "Effect"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
scanlineNoise: {
|
|
25
|
+
default: .6,
|
|
26
|
+
description: "Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail.",
|
|
27
|
+
ui: {
|
|
28
|
+
type: ["range", "map"],
|
|
29
|
+
min: 0,
|
|
30
|
+
max: 1,
|
|
31
|
+
step: .01,
|
|
32
|
+
label: "Scanline Noise",
|
|
33
|
+
group: "Effect"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
smear: {
|
|
37
|
+
default: .2,
|
|
38
|
+
description: "Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left.",
|
|
39
|
+
ui: {
|
|
40
|
+
type: ["range", "map"],
|
|
41
|
+
min: -2,
|
|
42
|
+
max: 2,
|
|
43
|
+
step: .01,
|
|
44
|
+
label: "Smear",
|
|
45
|
+
group: "Effect"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
speed: {
|
|
49
|
+
default: 1,
|
|
50
|
+
description: "Animation speed of the tape effects.",
|
|
51
|
+
ui: {
|
|
52
|
+
type: "range",
|
|
53
|
+
min: .1,
|
|
54
|
+
max: 3,
|
|
55
|
+
step: .1,
|
|
56
|
+
label: "Speed",
|
|
57
|
+
group: "Effect"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
fragmentNode: ({ uniforms, childNode, onCleanup }) => {
|
|
62
|
+
if (!childNode) return vec4(0, 0, 0, 0);
|
|
63
|
+
const childTexture = convertToTexture(childNode);
|
|
64
|
+
onCleanup(() => {
|
|
65
|
+
if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
|
|
66
|
+
});
|
|
67
|
+
const wobble = uniforms.wobble.uniform;
|
|
68
|
+
const scanlineNoiseAmt = uniforms.scanlineNoise.uniform;
|
|
69
|
+
const smear = uniforms.smear.uniform;
|
|
70
|
+
const speed = uniforms.speed.uniform;
|
|
71
|
+
const t = time.mul(speed);
|
|
72
|
+
const hash2D = (p) => fract(sin(dot(p, vec2(12.9898, 78.233))).mul(43758.5453));
|
|
73
|
+
const smoothNoise2D = (p) => {
|
|
74
|
+
const i = floor(p);
|
|
75
|
+
const f = fract(p);
|
|
76
|
+
const u = f.mul(f).mul(f.mul(-2).add(3));
|
|
77
|
+
const a = hash2D(i);
|
|
78
|
+
const b = hash2D(i.add(vec2(1, 0)));
|
|
79
|
+
const c = hash2D(i.add(vec2(0, 1)));
|
|
80
|
+
const d = hash2D(i.add(vec2(1, 1)));
|
|
81
|
+
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
|
|
82
|
+
};
|
|
83
|
+
const burst = smoothstep(float(.45), float(.8), smoothNoise2D(vec2(t.mul(.4), float(0))));
|
|
84
|
+
const rowInt = floor(screenUV.y.mul(FIELD_LINES));
|
|
85
|
+
const scanlineHash = (seedOffset) => fract(sin(rowInt.mul(12.9898).add(t.add(seedOffset).mul(78.233))).mul(43758.5453)).sub(.5).mul(2);
|
|
86
|
+
const fineGate = float(.25).add(burst.mul(.75));
|
|
87
|
+
const chromaRowOffset = scanlineHash(0).mul(scanlineNoiseAmt).mul(.008).mul(fineGate);
|
|
88
|
+
const lumaRowOffset = scanlineHash(69.42).mul(scanlineNoiseAmt).mul(.004).mul(fineGate);
|
|
89
|
+
const wave1 = smoothNoise2D(vec2(screenUV.y.mul(3), t.mul(.8))).sub(.5);
|
|
90
|
+
const wave2 = smoothNoise2D(vec2(screenUV.y.mul(30), t.mul(6))).sub(.5);
|
|
91
|
+
const tapeWave = wave1.mul(.008).add(wave2.mul(.002)).mul(wobble);
|
|
92
|
+
const creasePhase = smoothstep(float(.92), float(.99), sin(screenUV.y.mul(8).sub(t.mul(3.77))));
|
|
93
|
+
const creaseNoise = smoothstep(float(.3), float(1), smoothNoise2D(vec2(screenUV.y.mul(4.77), t)));
|
|
94
|
+
const creaseShift = creasePhase.mul(creaseNoise).mul(wobble).mul(-.018);
|
|
95
|
+
const switchPhase = smoothstep(float(.06), float(0), screenUV.y);
|
|
96
|
+
const switchNoise = smoothNoise2D(vec2(screenUV.y.mul(60), t.mul(14))).sub(.5);
|
|
97
|
+
const switchX = switchPhase.mul(switchNoise).mul(wobble).mul(.09);
|
|
98
|
+
const switchY = switchPhase.mul(wobble).mul(burst).mul(.02);
|
|
99
|
+
const globalX = tapeWave.add(creaseShift).add(switchX);
|
|
100
|
+
const lumaUV = vec2(screenUV.x.add(globalX).add(lumaRowOffset), screenUV.y.add(switchY));
|
|
101
|
+
const chromaUV = vec2(screenUV.x.add(globalX).add(chromaRowOffset), screenUV.y.add(switchY));
|
|
102
|
+
const lumaSample = childTexture.sample(lumaUV);
|
|
103
|
+
const sharpY = lumaSample.rgb.dot(vec3(.299, .587, .114));
|
|
104
|
+
const smearScale = smear.mul(.0075);
|
|
105
|
+
let accumI = float(0);
|
|
106
|
+
let accumQ = float(0);
|
|
107
|
+
for (let i = 0; i < SMEAR_SAMPLES; i++) {
|
|
108
|
+
const offsetX = float(-i).mul(smearScale);
|
|
109
|
+
const sampled = childTexture.sample(vec2(chromaUV.x.add(offsetX), chromaUV.y));
|
|
110
|
+
const iComp = sampled.rgb.dot(vec3(.596, -.274, -.322));
|
|
111
|
+
const qComp = sampled.rgb.dot(vec3(.211, -.523, .312));
|
|
112
|
+
const w = i / (SMEAR_SAMPLES - 1) * (2 / SMEAR_SAMPLES);
|
|
113
|
+
accumI = accumI.add(iComp.mul(w));
|
|
114
|
+
accumQ = accumQ.add(qComp.mul(w));
|
|
115
|
+
}
|
|
116
|
+
const finalYiq = vec3(sharpY, accumI, accumQ);
|
|
117
|
+
const finalRgb = vec3(finalYiq.x.add(finalYiq.y.mul(.956)).add(finalYiq.z.mul(.621)), finalYiq.x.sub(finalYiq.y.mul(.272)).sub(finalYiq.z.mul(.647)), finalYiq.x.sub(finalYiq.y.mul(1.106)).add(finalYiq.z.mul(1.703)));
|
|
118
|
+
const acBeat = float(1).add(cos(mod(t, 6.2831853).mul(2).add(screenUV.y.mul(.5))).mul(.015).mul(wobble));
|
|
119
|
+
return unpremultiplyAlpha(vec4(clamp(finalRgb.mul(acBeat), vec3(0), vec3(1)), lumaSample.a));
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
var VHS_default = componentDefinition;
|
|
123
|
+
export { componentDefinition as n, VHS_default as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as needsVideoCanvasWorkaround } from "./browser-
|
|
1
|
+
import { t as needsVideoCanvasWorkaround } from "./browser-DTNngPey.js";
|
|
2
2
|
import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
|
|
3
3
|
import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
|
|
4
4
|
const componentDefinition = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as needsVideoCanvasWorkaround } from "./browser-
|
|
1
|
+
import { t as needsVideoCanvasWorkaround } from "./browser-DTNngPey.js";
|
|
2
2
|
import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
|
|
3
3
|
import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
|
|
4
4
|
const componentDefinition = {
|
package/dist/core/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import "./Duotone-Bl02WcA2.js";
|
|
|
37
37
|
import "./Ellipse-CXxGqTYI.js";
|
|
38
38
|
import "./Emboss-ClQV27Mt.js";
|
|
39
39
|
import "./FallingLines-CArEXajJ.js";
|
|
40
|
-
import "./FilmGrain-
|
|
40
|
+
import "./FilmGrain-DSJiMtEp.js";
|
|
41
41
|
import "./FloatingParticles-BtwGRl_d.js";
|
|
42
42
|
import "./Flower-MAwlZEv8.js";
|
|
43
43
|
import "./FlowField-RyqiRxyI.js";
|
|
@@ -100,16 +100,17 @@ import "./Tritone-BlJ7cchN.js";
|
|
|
100
100
|
import "./Truchet-Bnn0fwbF.js";
|
|
101
101
|
import "./Twirl-C5ijhqz1.js";
|
|
102
102
|
import "./Vesica-DU0f85NG.js";
|
|
103
|
-
import "./
|
|
104
|
-
import "./
|
|
105
|
-
import "./
|
|
106
|
-
import "./
|
|
107
|
-
import "./
|
|
108
|
-
import "./
|
|
109
|
-
import "./
|
|
110
|
-
import "./
|
|
111
|
-
import "./
|
|
112
|
-
import
|
|
103
|
+
import "./VHS-CQJ1hV_D.js";
|
|
104
|
+
import "./Vibrance-CGvYDeds.js";
|
|
105
|
+
import "./browser-DTNngPey.js";
|
|
106
|
+
import "./VideoTexture-DnHIs4pp.js";
|
|
107
|
+
import "./Vignette-BJaonUVL.js";
|
|
108
|
+
import "./Voronoi-DZemzWA4.js";
|
|
109
|
+
import "./WaveDistortion--Y-m667K.js";
|
|
110
|
+
import "./Weave-CtyohvHz.js";
|
|
111
|
+
import "./WebcamTexture-XBDo2kgN.js";
|
|
112
|
+
import "./ZoomBlur-BwkhsFRE.js";
|
|
113
|
+
import { t as getAllShaders } from "./shaderRegistry-B6D8HKv7.js";
|
|
113
114
|
import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
|
|
114
115
|
import { WebGLRenderer } from "three";
|
|
115
116
|
import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
|
package/dist/core/registry.js
CHANGED
|
@@ -37,7 +37,7 @@ import "./Duotone-Bl02WcA2.js";
|
|
|
37
37
|
import "./Ellipse-CXxGqTYI.js";
|
|
38
38
|
import "./Emboss-ClQV27Mt.js";
|
|
39
39
|
import "./FallingLines-CArEXajJ.js";
|
|
40
|
-
import "./FilmGrain-
|
|
40
|
+
import "./FilmGrain-DSJiMtEp.js";
|
|
41
41
|
import "./FloatingParticles-BtwGRl_d.js";
|
|
42
42
|
import "./Flower-MAwlZEv8.js";
|
|
43
43
|
import "./FlowField-RyqiRxyI.js";
|
|
@@ -100,14 +100,15 @@ import "./Tritone-BlJ7cchN.js";
|
|
|
100
100
|
import "./Truchet-Bnn0fwbF.js";
|
|
101
101
|
import "./Twirl-C5ijhqz1.js";
|
|
102
102
|
import "./Vesica-DU0f85NG.js";
|
|
103
|
-
import "./
|
|
104
|
-
import "./
|
|
105
|
-
import "./
|
|
106
|
-
import "./
|
|
107
|
-
import "./
|
|
108
|
-
import "./
|
|
109
|
-
import "./
|
|
110
|
-
import "./
|
|
111
|
-
import "./
|
|
112
|
-
import
|
|
103
|
+
import "./VHS-CQJ1hV_D.js";
|
|
104
|
+
import "./Vibrance-CGvYDeds.js";
|
|
105
|
+
import "./browser-DTNngPey.js";
|
|
106
|
+
import "./VideoTexture-DnHIs4pp.js";
|
|
107
|
+
import "./Vignette-BJaonUVL.js";
|
|
108
|
+
import "./Voronoi-DZemzWA4.js";
|
|
109
|
+
import "./WaveDistortion--Y-m667K.js";
|
|
110
|
+
import "./Weave-CtyohvHz.js";
|
|
111
|
+
import "./WebcamTexture-XBDo2kgN.js";
|
|
112
|
+
import "./ZoomBlur-BwkhsFRE.js";
|
|
113
|
+
import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-B6D8HKv7.js";
|
|
113
114
|
export { getAllShaders, getShaderByName, getShaderCategories, getShadersByCategory, shaderRegistry };
|
|
@@ -30,7 +30,7 @@ import { n as componentDefinition$28 } from "./Duotone-Bl02WcA2.js";
|
|
|
30
30
|
import { n as componentDefinition$29 } from "./Ellipse-CXxGqTYI.js";
|
|
31
31
|
import { n as componentDefinition$30 } from "./Emboss-ClQV27Mt.js";
|
|
32
32
|
import { n as componentDefinition$31 } from "./FallingLines-CArEXajJ.js";
|
|
33
|
-
import { n as componentDefinition$32 } from "./FilmGrain-
|
|
33
|
+
import { n as componentDefinition$32 } from "./FilmGrain-DSJiMtEp.js";
|
|
34
34
|
import { n as componentDefinition$33 } from "./FloatingParticles-BtwGRl_d.js";
|
|
35
35
|
import { n as componentDefinition$34 } from "./Flower-MAwlZEv8.js";
|
|
36
36
|
import { n as componentDefinition$35 } from "./FlowField-RyqiRxyI.js";
|
|
@@ -93,14 +93,15 @@ import { n as componentDefinition$91 } from "./Tritone-BlJ7cchN.js";
|
|
|
93
93
|
import { n as componentDefinition$92 } from "./Truchet-Bnn0fwbF.js";
|
|
94
94
|
import { n as componentDefinition$93 } from "./Twirl-C5ijhqz1.js";
|
|
95
95
|
import { n as componentDefinition$94 } from "./Vesica-DU0f85NG.js";
|
|
96
|
-
import { n as componentDefinition$95 } from "./
|
|
97
|
-
import { n as componentDefinition$96 } from "./
|
|
98
|
-
import { n as componentDefinition$97 } from "./
|
|
99
|
-
import { n as componentDefinition$98 } from "./
|
|
100
|
-
import { n as componentDefinition$99 } from "./
|
|
101
|
-
import { n as componentDefinition$100 } from "./
|
|
102
|
-
import { n as componentDefinition$101 } from "./
|
|
103
|
-
import { n as componentDefinition$102 } from "./
|
|
96
|
+
import { n as componentDefinition$95 } from "./VHS-CQJ1hV_D.js";
|
|
97
|
+
import { n as componentDefinition$96 } from "./Vibrance-CGvYDeds.js";
|
|
98
|
+
import { n as componentDefinition$97 } from "./VideoTexture-DnHIs4pp.js";
|
|
99
|
+
import { n as componentDefinition$98 } from "./Vignette-BJaonUVL.js";
|
|
100
|
+
import { n as componentDefinition$99 } from "./Voronoi-DZemzWA4.js";
|
|
101
|
+
import { n as componentDefinition$100 } from "./WaveDistortion--Y-m667K.js";
|
|
102
|
+
import { n as componentDefinition$101 } from "./Weave-CtyohvHz.js";
|
|
103
|
+
import { n as componentDefinition$102 } from "./WebcamTexture-XBDo2kgN.js";
|
|
104
|
+
import { n as componentDefinition$103 } from "./ZoomBlur-BwkhsFRE.js";
|
|
104
105
|
var createShaderRegistry = () => {
|
|
105
106
|
const registry = {};
|
|
106
107
|
const shaderDefinitions = {
|
|
@@ -199,14 +200,15 @@ var createShaderRegistry = () => {
|
|
|
199
200
|
Truchet: componentDefinition$92,
|
|
200
201
|
Twirl: componentDefinition$93,
|
|
201
202
|
Vesica: componentDefinition$94,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
203
|
+
VHS: componentDefinition$95,
|
|
204
|
+
Vibrance: componentDefinition$96,
|
|
205
|
+
VideoTexture: componentDefinition$97,
|
|
206
|
+
Vignette: componentDefinition$98,
|
|
207
|
+
Voronoi: componentDefinition$99,
|
|
208
|
+
WaveDistortion: componentDefinition$100,
|
|
209
|
+
Weave: componentDefinition$101,
|
|
210
|
+
WebcamTexture: componentDefinition$102,
|
|
211
|
+
ZoomBlur: componentDefinition$103
|
|
210
212
|
};
|
|
211
213
|
Object.entries(shaderDefinitions).forEach(([fileName, def]) => {
|
|
212
214
|
const propsMetadata = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shaderRegistry.d.ts","sourceRoot":"","sources":["../src/shaderRegistry.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"shaderRegistry.d.ts","sourceRoot":"","sources":["../src/shaderRegistry.ts"],"names":[],"mappings":"AA2GA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IACpC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE;QAC5B,EAAE,CAAC,EAAE,GAAG,CAAA;QACR,OAAO,CAAC,EAAE,GAAG,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAC,CAAA;CACH;AA4ID,eAAO,MAAM,cAAc,qCAAyB,CAAA;AAGpD,wBAAgB,aAAa,IAAI,mBAAmB,EAAE,CAErD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAE5E;AAED,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAG9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/FilmGrain/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/FilmGrain/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAgEnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as componentDefinition, t as FilmGrain_default } from "../../FilmGrain-
|
|
1
|
+
import { n as componentDefinition, t as FilmGrain_default } from "../../FilmGrain-DSJiMtEp.js";
|
|
2
2
|
export { componentDefinition, FilmGrain_default as default };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ComponentDefinition } from '../../types';
|
|
2
|
+
|
|
3
|
+
export interface ComponentProps {
|
|
4
|
+
/**
|
|
5
|
+
* Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time.
|
|
6
|
+
*
|
|
7
|
+
* @default 1
|
|
8
|
+
*/
|
|
9
|
+
wobble: number;
|
|
10
|
+
/**
|
|
11
|
+
* Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail.
|
|
12
|
+
*
|
|
13
|
+
* @default 0.6
|
|
14
|
+
*/
|
|
15
|
+
scanlineNoise: number;
|
|
16
|
+
/**
|
|
17
|
+
* Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left.
|
|
18
|
+
*
|
|
19
|
+
* @default 0.2
|
|
20
|
+
*/
|
|
21
|
+
smear: number;
|
|
22
|
+
/**
|
|
23
|
+
* Animation speed of the tape effects.
|
|
24
|
+
*
|
|
25
|
+
* Accepts a number between 0.1 and 3.
|
|
26
|
+
* @default 1
|
|
27
|
+
*/
|
|
28
|
+
speed: number;
|
|
29
|
+
}
|
|
30
|
+
export declare const componentDefinition: ComponentDefinition<ComponentProps>;
|
|
31
|
+
export default componentDefinition;
|
|
32
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/VHS/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAavE,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAkKnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as componentDefinition, t as Vibrance_default } from "../../Vibrance-
|
|
1
|
+
import { n as componentDefinition, t as Vibrance_default } from "../../Vibrance-CGvYDeds.js";
|
|
2
2
|
export { componentDefinition, Vibrance_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "../../browser-
|
|
2
|
-
import { n as componentDefinition, t as VideoTexture_default } from "../../VideoTexture-
|
|
1
|
+
import "../../browser-DTNngPey.js";
|
|
2
|
+
import { n as componentDefinition, t as VideoTexture_default } from "../../VideoTexture-DnHIs4pp.js";
|
|
3
3
|
export { componentDefinition, VideoTexture_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "../../transformations-B5lM6fYX.js";
|
|
2
|
-
import { n as componentDefinition, t as Vignette_default } from "../../Vignette-
|
|
2
|
+
import { n as componentDefinition, t as Vignette_default } from "../../Vignette-BJaonUVL.js";
|
|
3
3
|
export { componentDefinition, Vignette_default as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../../transformations-B5lM6fYX.js";
|
|
2
2
|
import "../../colorMixing-BPpDnR5I.js";
|
|
3
3
|
import "../../time-DUqSFWvT.js";
|
|
4
|
-
import { n as componentDefinition, t as Voronoi_default } from "../../Voronoi-
|
|
4
|
+
import { n as componentDefinition, t as Voronoi_default } from "../../Voronoi-DZemzWA4.js";
|
|
5
5
|
export { componentDefinition, Voronoi_default as default };
|
|
@@ -2,5 +2,5 @@ import "../../edges-CfGcQniB.js";
|
|
|
2
2
|
import "../../transformations-B5lM6fYX.js";
|
|
3
3
|
import "../../alpha-C4ptedXe.js";
|
|
4
4
|
import "../../time-DUqSFWvT.js";
|
|
5
|
-
import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion-
|
|
5
|
+
import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion--Y-m667K.js";
|
|
6
6
|
export { componentDefinition, WaveDistortion_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "../../transformations-B5lM6fYX.js";
|
|
2
|
-
import { n as componentDefinition, t as Weave_default } from "../../Weave-
|
|
2
|
+
import { n as componentDefinition, t as Weave_default } from "../../Weave-CtyohvHz.js";
|
|
3
3
|
export { componentDefinition, Weave_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "../../browser-
|
|
2
|
-
import { n as componentDefinition, t as WebcamTexture_default } from "../../WebcamTexture-
|
|
1
|
+
import "../../browser-DTNngPey.js";
|
|
2
|
+
import { n as componentDefinition, t as WebcamTexture_default } from "../../WebcamTexture-XBDo2kgN.js";
|
|
3
3
|
export { componentDefinition, WebcamTexture_default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "../../transformations-B5lM6fYX.js";
|
|
2
2
|
import "../../alpha-C4ptedXe.js";
|
|
3
|
-
import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-
|
|
3
|
+
import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-BwkhsFRE.js";
|
|
4
4
|
export { componentDefinition, ZoomBlur_default as default };
|
package/dist/js/createShader.js
CHANGED
|
@@ -46,7 +46,7 @@ async function createShader(canvas, preset, options) {
|
|
|
46
46
|
if (isExternalUser()) {
|
|
47
47
|
const checkRendering = () => {
|
|
48
48
|
if (renderer.getPerformanceStats().fps > 0) {
|
|
49
|
-
telemetryCollector = startTelemetry(renderer, "2.5.
|
|
49
|
+
telemetryCollector = startTelemetry(renderer, "2.5.102", options?.disableTelemetry || false, false);
|
|
50
50
|
if (telemetryCollector) telemetryCollector.start();
|
|
51
51
|
telemetryStartTimeout = null;
|
|
52
52
|
} else telemetryStartTimeout = setTimeout(checkRendering, 500);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAm4CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAoBlG;AAGD,eAAO,MAAM,mBAAmB,UA0G/B,CAAA"}
|
|
@@ -1177,6 +1177,14 @@ var shaderMetadata = {
|
|
|
1177
1177
|
"strokePosition": "center",
|
|
1178
1178
|
"colorSpace": "linear"
|
|
1179
1179
|
},
|
|
1180
|
+
"VHS": {
|
|
1181
|
+
"opacity": 1,
|
|
1182
|
+
"blendMode": "normal",
|
|
1183
|
+
"wobble": 1,
|
|
1184
|
+
"scanlineNoise": .6,
|
|
1185
|
+
"smear": .2,
|
|
1186
|
+
"speed": 1
|
|
1187
|
+
},
|
|
1180
1188
|
"Vibrance": {
|
|
1181
1189
|
"opacity": 1,
|
|
1182
1190
|
"blendMode": "normal",
|
|
@@ -1424,6 +1432,7 @@ const availableComponents = [
|
|
|
1424
1432
|
"Tritone",
|
|
1425
1433
|
"Truchet",
|
|
1426
1434
|
"Twirl",
|
|
1435
|
+
"VHS",
|
|
1427
1436
|
"Vesica",
|
|
1428
1437
|
"Vibrance",
|
|
1429
1438
|
"VideoTexture",
|
package/dist/react/Preview.js
CHANGED
|
@@ -114,6 +114,7 @@ var componentMap = {
|
|
|
114
114
|
Tritone: lazy(() => import("./Tritone.js")),
|
|
115
115
|
Truchet: lazy(() => import("./Truchet.js")),
|
|
116
116
|
Twirl: lazy(() => import("./Twirl.js")),
|
|
117
|
+
VHS: lazy(() => import("./VHS.js")),
|
|
117
118
|
Vesica: lazy(() => import("./Vesica.js")),
|
|
118
119
|
Vibrance: lazy(() => import("./Vibrance.js")),
|
|
119
120
|
VideoTexture: lazy(() => import("./VideoTexture.js")),
|
package/dist/react/Shader.js
CHANGED
|
@@ -89,7 +89,7 @@ const Shader = ({ children, disableTelemetry = false, colorSpace = "p3-linear",
|
|
|
89
89
|
return;
|
|
90
90
|
}
|
|
91
91
|
if (rendererRef.current.getPerformanceStats().fps > 0) {
|
|
92
|
-
telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.
|
|
92
|
+
telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.102", disableTelemetry, isPreview);
|
|
93
93
|
if (telemetryCollectorRef.current) telemetryCollectorRef.current.start();
|
|
94
94
|
telemetryStartTimeoutRef.current = null;
|
|
95
95
|
} else telemetryStartTimeoutRef.current = window.setTimeout(checkRendering, 500);
|