shaders 2.2.40 → 2.2.42
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/Shatter-COjV2jLy.js +299 -0
- package/dist/core/Stripes-BbNFX05u.js +127 -0
- package/dist/core/index.js +41 -37
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/Shatter/index.d.ts +70 -0
- package/dist/core/shaders/Shatter/index.d.ts.map +1 -0
- package/dist/core/shaders/Shatter/index.js +4 -0
- package/dist/core/shaders/SimplexNoise/index.js +1 -1
- package/dist/core/shaders/SineWave/index.js +1 -1
- package/dist/core/shaders/SolidColor/index.js +1 -1
- package/dist/core/shaders/Spherize/index.js +1 -1
- package/dist/core/shaders/Spiral/index.js +1 -1
- package/dist/core/shaders/Strands/index.js +1 -1
- package/dist/core/shaders/Stretch/index.js +1 -1
- package/dist/core/shaders/Stripes/index.d.ts +71 -0
- package/dist/core/shaders/Stripes/index.d.ts.map +1 -0
- package/dist/core/shaders/Stripes/index.js +5 -0
- package/dist/core/shaders/Swirl/index.js +1 -1
- package/dist/core/shaders/TiltShift/index.js +1 -1
- package/dist/core/shaders/Tint/index.js +1 -1
- package/dist/core/shaders/Tritone/index.js +1 -1
- package/dist/core/shaders/Twirl/index.js +1 -1
- package/dist/core/shaders/Vibrance/index.js +1 -1
- package/dist/core/shaders/WaveDistortion/index.js +1 -1
- package/dist/core/shaders/ZoomBlur/index.js +1 -1
- package/dist/react/components/Shatter.d.ts +31 -0
- package/dist/react/components/Shatter.d.ts.map +1 -0
- package/dist/react/components/Stripes.d.ts +31 -0
- package/dist/react/components/Stripes.d.ts.map +1 -0
- package/dist/react/{generatePresetCode-BCeSxN_V.js → generatePresetCode-BrkW1bEe.js} +28 -0
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +702 -424
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +1 -1
- package/dist/registry.js +469 -0
- package/dist/solid/components/Shatter.d.ts +28 -0
- package/dist/solid/components/Shatter.d.ts.map +1 -0
- package/dist/solid/components/Stripes.d.ts +28 -0
- package/dist/solid/components/Stripes.d.ts.map +1 -0
- package/dist/solid/index.d.ts +2 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +645 -361
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +28 -0
- package/dist/svelte/components/Shatter.svelte.d.ts +19 -0
- package/dist/svelte/components/Stripes.svelte.d.ts +19 -0
- package/dist/svelte/{generatePresetCode-BFY8wlyB.js → generatePresetCode-bx7z5wvC.js} +28 -0
- package/dist/svelte/index.d.ts +2 -0
- package/dist/svelte/index.js +254 -32
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/components/Shatter.vue.d.ts +57 -0
- package/dist/vue/components/Shatter.vue.d.ts.map +1 -0
- package/dist/vue/components/Stripes.vue.d.ts +57 -0
- package/dist/vue/components/Stripes.vue.d.ts.map +1 -0
- package/dist/vue/{generatePresetCode-D3MinGC_.js → generatePresetCode-_7ZzqQPH.js} +28 -0
- package/dist/vue/index.d.ts +2 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +379 -121
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +1 -1
- package/package.json +17 -1
- /package/dist/core/{SimplexNoise-CMMeggo6.js → SimplexNoise-Ce79jgYM.js} +0 -0
- /package/dist/core/{SineWave-DVVLqHPw.js → SineWave-Cv2gOU8a.js} +0 -0
- /package/dist/core/{SolidColor-zYROg_aE.js → SolidColor-DFkDBFq3.js} +0 -0
- /package/dist/core/{Spherize-tsKMpSaS.js → Spherize-R-s4pX9t.js} +0 -0
- /package/dist/core/{Spiral-DDyVSeG_.js → Spiral-W4dALX1z.js} +0 -0
- /package/dist/core/{Strands-B9vY4uA7.js → Strands-DtN5POfO.js} +0 -0
- /package/dist/core/{Stretch-BhHjbcqd.js → Stretch-BzvP_hdu.js} +0 -0
- /package/dist/core/{Swirl-DoCDBZad.js → Swirl-CfsYsr4X.js} +0 -0
- /package/dist/core/{TiltShift-BYQjUHpn.js → TiltShift-B6gbm7Z8.js} +0 -0
- /package/dist/core/{Tint-BUFsUBqI.js → Tint-CpnitsHw.js} +0 -0
- /package/dist/core/{Tritone-DS1QbB-T.js → Tritone-DzvSKVfR.js} +0 -0
- /package/dist/core/{Twirl-w3PgFOlA.js → Twirl-BXH4uAd6.js} +0 -0
- /package/dist/core/{Vibrance--gtdjy4j.js → Vibrance-ByN9bRgU.js} +0 -0
- /package/dist/core/{WaveDistortion-BfhB1rjJ.js → WaveDistortion-BA1PyqYH.js} +0 -0
- /package/dist/core/{ZoomBlur-DxUocLAG.js → ZoomBlur-CTrw7HxX.js} +0 -0
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
|
|
2
|
+
import { o as transformEdges } from "./transformations-YbhRK-rd.js";
|
|
3
|
+
import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
|
|
4
|
+
import { convertToTexture, float, screenUV, smoothstep, texture, vec2, vec4 } from "three/tsl";
|
|
5
|
+
var seededRandom = (seed) => {
|
|
6
|
+
const x = Math.sin(seed) * 1e4;
|
|
7
|
+
return x - Math.floor(x);
|
|
8
|
+
};
|
|
9
|
+
const componentDefinition = {
|
|
10
|
+
name: "Shatter",
|
|
11
|
+
category: "Interactive",
|
|
12
|
+
description: "Broken glass effect with tectonic plate displacement",
|
|
13
|
+
requiresRTT: true,
|
|
14
|
+
requiresChild: true,
|
|
15
|
+
props: {
|
|
16
|
+
crackWidth: {
|
|
17
|
+
default: 1,
|
|
18
|
+
description: "Thickness of crack lines",
|
|
19
|
+
ui: {
|
|
20
|
+
type: "range",
|
|
21
|
+
min: .5,
|
|
22
|
+
max: 5,
|
|
23
|
+
step: .1,
|
|
24
|
+
label: "Crack Width"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
intensity: {
|
|
28
|
+
default: 4,
|
|
29
|
+
description: "How much shards shift",
|
|
30
|
+
ui: {
|
|
31
|
+
type: "range",
|
|
32
|
+
min: 0,
|
|
33
|
+
max: 20,
|
|
34
|
+
step: 1,
|
|
35
|
+
label: "Intensity"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
radius: {
|
|
39
|
+
default: .4,
|
|
40
|
+
description: "Cursor influence radius",
|
|
41
|
+
ui: {
|
|
42
|
+
type: "range",
|
|
43
|
+
min: .1,
|
|
44
|
+
max: 1,
|
|
45
|
+
step: .1,
|
|
46
|
+
label: "Radius"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
decay: {
|
|
50
|
+
default: 1,
|
|
51
|
+
description: "How fast shards return to rest",
|
|
52
|
+
ui: {
|
|
53
|
+
type: "range",
|
|
54
|
+
min: .1,
|
|
55
|
+
max: 10,
|
|
56
|
+
step: .1,
|
|
57
|
+
label: "Decay"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
seed: {
|
|
61
|
+
default: 2,
|
|
62
|
+
description: "Random seed for pattern",
|
|
63
|
+
ui: {
|
|
64
|
+
type: "range",
|
|
65
|
+
min: 0,
|
|
66
|
+
max: 50,
|
|
67
|
+
step: 1,
|
|
68
|
+
label: "Seed"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
chromaticSplit: {
|
|
72
|
+
default: 1,
|
|
73
|
+
description: "RGB separation for prismatic glass effect",
|
|
74
|
+
ui: {
|
|
75
|
+
type: "range",
|
|
76
|
+
min: 0,
|
|
77
|
+
max: 5,
|
|
78
|
+
step: .1,
|
|
79
|
+
label: "Chromatic Split"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
refractionStrength: {
|
|
83
|
+
default: 5,
|
|
84
|
+
description: "How much cracks bend/distort the underlying image",
|
|
85
|
+
ui: {
|
|
86
|
+
type: "range",
|
|
87
|
+
min: 0,
|
|
88
|
+
max: 10,
|
|
89
|
+
step: .1,
|
|
90
|
+
label: "Refraction"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
shardLighting: {
|
|
94
|
+
default: .1,
|
|
95
|
+
description: "Subtle lighting on tilted shards for 3D depth",
|
|
96
|
+
ui: {
|
|
97
|
+
type: "range",
|
|
98
|
+
min: 0,
|
|
99
|
+
max: .5,
|
|
100
|
+
step: .1,
|
|
101
|
+
label: "Shard Lighting"
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
edges: {
|
|
105
|
+
default: "mirror",
|
|
106
|
+
description: "How to handle edges when displacement pushes content out of bounds",
|
|
107
|
+
transform: transformEdges,
|
|
108
|
+
ui: {
|
|
109
|
+
type: "select",
|
|
110
|
+
options: [
|
|
111
|
+
{
|
|
112
|
+
label: "Stretch",
|
|
113
|
+
value: "stretch"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Transparent",
|
|
117
|
+
value: "transparent"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
label: "Mirror",
|
|
121
|
+
value: "mirror"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
label: "Wrap",
|
|
125
|
+
value: "wrap"
|
|
126
|
+
}
|
|
127
|
+
],
|
|
128
|
+
label: "Edges"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup }) => {
|
|
133
|
+
const SHARD_COUNT = 16;
|
|
134
|
+
const FRICTION = 1;
|
|
135
|
+
const cellData = new Float32Array(SHARD_COUNT * 4);
|
|
136
|
+
const cellTexture = new DataTexture(cellData, 4, 4, RGBAFormat, FloatType);
|
|
137
|
+
cellTexture.magFilter = LinearFilter;
|
|
138
|
+
cellTexture.minFilter = LinearFilter;
|
|
139
|
+
const displacementData = new Float32Array(SHARD_COUNT * 4);
|
|
140
|
+
const displacementTexture = new DataTexture(displacementData, 4, 4, RGBAFormat, FloatType);
|
|
141
|
+
displacementTexture.magFilter = LinearFilter;
|
|
142
|
+
displacementTexture.minFilter = LinearFilter;
|
|
143
|
+
const generateCells = (seed) => {
|
|
144
|
+
for (let i = 0; i < SHARD_COUNT; i++) {
|
|
145
|
+
cellData[i * 4] = seededRandom(seed + i * 2);
|
|
146
|
+
cellData[i * 4 + 1] = seededRandom(seed + i * 2 + 1);
|
|
147
|
+
cellData[i * 4 + 2] = seededRandom(seed + i * 3);
|
|
148
|
+
cellData[i * 4 + 3] = seededRandom(seed + i * 3 + 1);
|
|
149
|
+
}
|
|
150
|
+
cellTexture.needsUpdate = true;
|
|
151
|
+
};
|
|
152
|
+
let currentSeed = uniforms.seed.uniform.value;
|
|
153
|
+
generateCells(currentSeed);
|
|
154
|
+
displacementData.fill(0);
|
|
155
|
+
displacementTexture.needsUpdate = true;
|
|
156
|
+
let prevX = .5;
|
|
157
|
+
let prevY = .5;
|
|
158
|
+
let lastTime = Date.now();
|
|
159
|
+
onBeforeRender(({ pointer }) => {
|
|
160
|
+
const currentTime = Date.now();
|
|
161
|
+
const dt = Math.min((currentTime - lastTime) / 1e3, .016);
|
|
162
|
+
lastTime = currentTime;
|
|
163
|
+
const newSeed = uniforms.seed.uniform.value;
|
|
164
|
+
if (newSeed !== currentSeed) {
|
|
165
|
+
currentSeed = newSeed;
|
|
166
|
+
generateCells(currentSeed);
|
|
167
|
+
displacementData.fill(0);
|
|
168
|
+
}
|
|
169
|
+
const intensity = uniforms.intensity.uniform.value;
|
|
170
|
+
const radius = uniforms.radius.uniform.value;
|
|
171
|
+
const decay = uniforms.decay.uniform.value;
|
|
172
|
+
const friction = FRICTION;
|
|
173
|
+
let velX = dt > 0 ? (pointer.x - prevX) / dt : 0;
|
|
174
|
+
let velY = dt > 0 ? (pointer.y - prevY) / dt : 0;
|
|
175
|
+
let speed = Math.sqrt(velX * velX + velY * velY);
|
|
176
|
+
const maxVelocity = 5 + intensity * 2;
|
|
177
|
+
if (speed > maxVelocity) {
|
|
178
|
+
const scale = maxVelocity / speed;
|
|
179
|
+
velX *= scale;
|
|
180
|
+
velY *= scale;
|
|
181
|
+
speed = maxVelocity;
|
|
182
|
+
}
|
|
183
|
+
for (let i = 0; i < SHARD_COUNT; i++) {
|
|
184
|
+
const cellX = cellData[i * 4];
|
|
185
|
+
const cellY = cellData[i * 4 + 1];
|
|
186
|
+
const randomDirX = cellData[i * 4 + 2] - .5;
|
|
187
|
+
const randomDirY = cellData[i * 4 + 3] - .5;
|
|
188
|
+
const dx = cellX - pointer.x;
|
|
189
|
+
const dy = cellY - pointer.y;
|
|
190
|
+
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
191
|
+
let currentDx = displacementData[i * 4];
|
|
192
|
+
let currentDy = displacementData[i * 4 + 1];
|
|
193
|
+
const decayTime = Math.max(.01, decay);
|
|
194
|
+
const decayFactor = Math.exp(-dt / decayTime);
|
|
195
|
+
currentDx *= decayFactor;
|
|
196
|
+
currentDy *= decayFactor;
|
|
197
|
+
let velocityDx = 0;
|
|
198
|
+
let velocityDy = 0;
|
|
199
|
+
if (dist < radius && speed > .01) {
|
|
200
|
+
const influence = Math.max(0, 1 - dist / radius);
|
|
201
|
+
const influenceCurve = influence * influence;
|
|
202
|
+
const pushForce = influenceCurve * speed * intensity * dt * .5;
|
|
203
|
+
velocityDx = velX * pushForce;
|
|
204
|
+
velocityDy = velY * pushForce;
|
|
205
|
+
const jitterForce = influenceCurve * speed * intensity * dt * .1;
|
|
206
|
+
velocityDx += randomDirX * jitterForce;
|
|
207
|
+
velocityDy += randomDirY * jitterForce;
|
|
208
|
+
}
|
|
209
|
+
const lerpFactor = Math.min(1, friction * dt);
|
|
210
|
+
displacementData[i * 4] = currentDx + velocityDx * lerpFactor;
|
|
211
|
+
displacementData[i * 4 + 1] = currentDy + velocityDy * lerpFactor;
|
|
212
|
+
displacementData[i * 4 + 2] = 0;
|
|
213
|
+
displacementData[i * 4 + 3] = 0;
|
|
214
|
+
}
|
|
215
|
+
displacementTexture.needsUpdate = true;
|
|
216
|
+
prevX = pointer.x;
|
|
217
|
+
prevY = pointer.y;
|
|
218
|
+
});
|
|
219
|
+
onCleanup(() => {
|
|
220
|
+
cellTexture.dispose();
|
|
221
|
+
displacementTexture.dispose();
|
|
222
|
+
});
|
|
223
|
+
if (!childNode) return vec4(0, 0, 0, 0);
|
|
224
|
+
const childTexture = convertToTexture(childNode);
|
|
225
|
+
onCleanup(() => {
|
|
226
|
+
if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
|
|
227
|
+
});
|
|
228
|
+
const cellField = texture(cellTexture);
|
|
229
|
+
const dispField = texture(displacementTexture);
|
|
230
|
+
const cells = [];
|
|
231
|
+
for (let i = 0; i < SHARD_COUNT; i++) {
|
|
232
|
+
const u = (i % 4 + .5) / 4;
|
|
233
|
+
const v = (Math.floor(i / 4) + .5) / 4;
|
|
234
|
+
const cellPos = cellField.sample(vec2(u, v)).xy;
|
|
235
|
+
const dist = screenUV.sub(cellPos).length();
|
|
236
|
+
cells.push({
|
|
237
|
+
dist,
|
|
238
|
+
index: float(i)
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
let minDist1 = cells[0].dist;
|
|
242
|
+
let minDist2 = float(1e3);
|
|
243
|
+
let nearestIdx = cells[0].index;
|
|
244
|
+
for (let i = 1; i < SHARD_COUNT; i++) {
|
|
245
|
+
const dist = cells[i].dist;
|
|
246
|
+
const isNewNearest = dist.lessThan(minDist1);
|
|
247
|
+
const isNewSecond = dist.lessThan(minDist2).and(isNewNearest.not());
|
|
248
|
+
const nextMin2 = isNewNearest.select(minDist1, isNewSecond.select(dist, minDist2));
|
|
249
|
+
const nextMin1 = isNewNearest.select(dist, minDist1);
|
|
250
|
+
const nextIdx = isNewNearest.select(cells[i].index, nearestIdx);
|
|
251
|
+
minDist2 = nextMin2;
|
|
252
|
+
minDist1 = nextMin1;
|
|
253
|
+
nearestIdx = nextIdx;
|
|
254
|
+
}
|
|
255
|
+
const dispU = nearestIdx.mod(float(4)).add(.5).div(4);
|
|
256
|
+
const dispV = nearestIdx.div(float(4)).floor().add(.5).div(4);
|
|
257
|
+
const displacement = dispField.sample(vec2(dispU, dispV)).xy;
|
|
258
|
+
const displacementMag = displacement.length();
|
|
259
|
+
const edgeDiff = minDist2.sub(minDist1);
|
|
260
|
+
const crackThreshold = uniforms.crackWidth.uniform.mul(.005);
|
|
261
|
+
const baseCrackIntensity = float(1).sub(smoothstep(float(0), crackThreshold, edgeDiff));
|
|
262
|
+
const displacementFactor = smoothstep(float(0), float(.01), displacementMag);
|
|
263
|
+
const crackIntensity = baseCrackIntensity.mul(displacementFactor);
|
|
264
|
+
const nearestCellU = nearestIdx.mod(float(4)).add(.5).div(4);
|
|
265
|
+
const nearestCellV = nearestIdx.div(float(4)).floor().add(.5).div(4);
|
|
266
|
+
const nearestCellPos = cellField.sample(vec2(nearestCellU, nearestCellV)).xy;
|
|
267
|
+
const toNearest = screenUV.sub(nearestCellPos).normalize();
|
|
268
|
+
const edgeNormal = vec2(toNearest.y.negate(), toNearest.x);
|
|
269
|
+
const displacedUV = screenUV.sub(displacement);
|
|
270
|
+
const refractionOffset = edgeNormal.mul(uniforms.refractionStrength.uniform).mul(.01);
|
|
271
|
+
const chromaticOffset = uniforms.chromaticSplit.uniform.mul(.005);
|
|
272
|
+
const rOffset = refractionOffset.add(edgeNormal.mul(chromaticOffset));
|
|
273
|
+
const gOffset = refractionOffset;
|
|
274
|
+
const bOffset = refractionOffset.sub(edgeNormal.mul(chromaticOffset));
|
|
275
|
+
const rUV = displacedUV.add(rOffset.mul(crackIntensity));
|
|
276
|
+
const gUV = displacedUV.add(gOffset.mul(crackIntensity));
|
|
277
|
+
const bUV = displacedUV.add(bOffset.mul(crackIntensity));
|
|
278
|
+
const rSample = childTexture.sample(rUV);
|
|
279
|
+
const gSample = childTexture.sample(gUV);
|
|
280
|
+
const bSample = childTexture.sample(bUV);
|
|
281
|
+
const rFinal = applyEdgeHandling(rUV, rSample, childTexture, uniforms.edges.uniform);
|
|
282
|
+
const gFinal = applyEdgeHandling(gUV, gSample, childTexture, uniforms.edges.uniform);
|
|
283
|
+
const bFinal = applyEdgeHandling(bUV, bSample, childTexture, uniforms.edges.uniform);
|
|
284
|
+
const refractedColor = vec4(rFinal.r, gFinal.g, bFinal.b, gFinal.a);
|
|
285
|
+
const normalColor = applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform);
|
|
286
|
+
let shadedRGB = normalColor.rgb.mul(float(1).sub(crackIntensity)).add(refractedColor.rgb.mul(crackIntensity));
|
|
287
|
+
const displacementLength = displacement.length();
|
|
288
|
+
const tiltX = displacement.x.div(displacementLength.add(.001));
|
|
289
|
+
const tiltY = displacement.y.div(displacementLength.add(.001));
|
|
290
|
+
const lightDir3D = vec2(.3, .6).normalize();
|
|
291
|
+
const normalDot = tiltX.mul(lightDir3D.x).add(tiltY.mul(lightDir3D.y));
|
|
292
|
+
const lightingFactor = float(1).add(normalDot.mul(uniforms.shardLighting.uniform));
|
|
293
|
+
const lightingIntensity = smoothstep(float(0), float(.02), displacementLength);
|
|
294
|
+
const finalLighting = float(1).add(lightingFactor.sub(1).mul(lightingIntensity));
|
|
295
|
+
return vec4(shadedRGB.mul(finalLighting), normalColor.a);
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
var Shatter_default = componentDefinition;
|
|
299
|
+
export { componentDefinition as n, Shatter_default as t };
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { i as transformColorSpace, n as transformAngle, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
|
|
2
|
+
import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
|
|
3
|
+
import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
|
|
4
|
+
import { cos, fract, fwidth, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
|
|
5
|
+
const componentDefinition = {
|
|
6
|
+
name: "Stripes",
|
|
7
|
+
category: "Base Layers",
|
|
8
|
+
description: "Alternating colored stripes with animation",
|
|
9
|
+
props: {
|
|
10
|
+
colorA: {
|
|
11
|
+
default: "#000000",
|
|
12
|
+
transform: transformColor,
|
|
13
|
+
description: "First stripe color",
|
|
14
|
+
ui: {
|
|
15
|
+
type: "color",
|
|
16
|
+
label: "Color A"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
colorB: {
|
|
20
|
+
default: "#ffffff",
|
|
21
|
+
transform: transformColor,
|
|
22
|
+
description: "Second stripe color",
|
|
23
|
+
ui: {
|
|
24
|
+
type: "color",
|
|
25
|
+
label: "Color B"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
angle: {
|
|
29
|
+
default: 45,
|
|
30
|
+
transform: transformAngle,
|
|
31
|
+
description: "Angle of stripes in degrees",
|
|
32
|
+
ui: {
|
|
33
|
+
type: "range",
|
|
34
|
+
min: -180,
|
|
35
|
+
max: 180,
|
|
36
|
+
step: 1,
|
|
37
|
+
label: "Angle"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
density: {
|
|
41
|
+
default: 5,
|
|
42
|
+
description: "Number of stripe pairs visible",
|
|
43
|
+
ui: {
|
|
44
|
+
type: "range",
|
|
45
|
+
min: 1,
|
|
46
|
+
max: 30,
|
|
47
|
+
step: 1,
|
|
48
|
+
label: "Density"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
balance: {
|
|
52
|
+
default: .5,
|
|
53
|
+
description: "Ratio of the two colors",
|
|
54
|
+
ui: {
|
|
55
|
+
type: "range",
|
|
56
|
+
min: .01,
|
|
57
|
+
max: .99,
|
|
58
|
+
step: .01,
|
|
59
|
+
label: "Balance"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
softness: {
|
|
63
|
+
default: 0,
|
|
64
|
+
description: "Edge softness",
|
|
65
|
+
ui: {
|
|
66
|
+
type: "range",
|
|
67
|
+
min: 0,
|
|
68
|
+
max: 1,
|
|
69
|
+
step: .01,
|
|
70
|
+
label: "Softness"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
speed: {
|
|
74
|
+
default: .2,
|
|
75
|
+
description: "Animation speed",
|
|
76
|
+
ui: {
|
|
77
|
+
type: "range",
|
|
78
|
+
min: -1,
|
|
79
|
+
max: 1,
|
|
80
|
+
step: .1,
|
|
81
|
+
label: "Speed"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
offset: {
|
|
85
|
+
default: 0,
|
|
86
|
+
description: "Phase offset for pattern positioning",
|
|
87
|
+
ui: {
|
|
88
|
+
type: "range",
|
|
89
|
+
min: 0,
|
|
90
|
+
max: 1,
|
|
91
|
+
step: .01,
|
|
92
|
+
label: "Offset"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
colorSpace: {
|
|
96
|
+
default: "linear",
|
|
97
|
+
transform: transformColorSpace,
|
|
98
|
+
description: "Color space for interpolation",
|
|
99
|
+
ui: {
|
|
100
|
+
type: "select",
|
|
101
|
+
options: colorSpaceOptions,
|
|
102
|
+
label: "Color Space"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
fragmentNode: (params) => {
|
|
107
|
+
const { uniforms } = params;
|
|
108
|
+
const uv$1 = screenUV;
|
|
109
|
+
const aspect = viewportSize.x.div(viewportSize.y);
|
|
110
|
+
const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
|
|
111
|
+
const angleRad = uniforms.angle.uniform.mul(.0174533);
|
|
112
|
+
const cosA = cos(angleRad);
|
|
113
|
+
const sinA = sin(angleRad);
|
|
114
|
+
const rotatedCoord = aspectCorrectedUV.x.mul(cosA).add(aspectCorrectedUV.y.mul(sinA));
|
|
115
|
+
const t = createAnimatedTime(params, uniforms.speed);
|
|
116
|
+
const pattern = rotatedCoord.mul(uniforms.density.uniform).add(t).add(uniforms.offset.uniform);
|
|
117
|
+
const stripe = fract(pattern);
|
|
118
|
+
const fw = fwidth(pattern);
|
|
119
|
+
const balance = uniforms.balance.uniform;
|
|
120
|
+
const soft = uniforms.softness.uniform;
|
|
121
|
+
const mask = smoothstep(balance.sub(soft).sub(fw), balance.add(soft).add(fw), stripe);
|
|
122
|
+
const mixedColor = mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, mask, uniforms.colorSpace.uniform);
|
|
123
|
+
return vec4(mixedColor.rgb, mixedColor.a);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
var Stripes_default = componentDefinition;
|
|
127
|
+
export { componentDefinition as n, Stripes_default as t };
|
package/dist/core/index.js
CHANGED
|
@@ -46,21 +46,23 @@ import { n as componentDefinition$40 } from "./RectangularCoordinates-CiW3J4UT.j
|
|
|
46
46
|
import { n as componentDefinition$41 } from "./Ripples-DKBIp3Qq.js";
|
|
47
47
|
import { n as componentDefinition$42 } from "./Saturation-DVVlpikK.js";
|
|
48
48
|
import { n as componentDefinition$43 } from "./Sharpness-cw57bW0s.js";
|
|
49
|
-
import { n as componentDefinition$44 } from "./
|
|
50
|
-
import { n as componentDefinition$45 } from "./
|
|
51
|
-
import { n as componentDefinition$46 } from "./
|
|
52
|
-
import { n as componentDefinition$47 } from "./
|
|
53
|
-
import { n as componentDefinition$48 } from "./
|
|
54
|
-
import { n as componentDefinition$49 } from "./
|
|
55
|
-
import { n as componentDefinition$50 } from "./
|
|
56
|
-
import { n as componentDefinition$51 } from "./
|
|
57
|
-
import { n as componentDefinition$52 } from "./
|
|
58
|
-
import { n as componentDefinition$53 } from "./
|
|
59
|
-
import { n as componentDefinition$54 } from "./
|
|
60
|
-
import { n as componentDefinition$55 } from "./
|
|
61
|
-
import { n as componentDefinition$56 } from "./
|
|
62
|
-
import { n as componentDefinition$57 } from "./
|
|
63
|
-
import { n as componentDefinition$58 } from "./
|
|
49
|
+
import { n as componentDefinition$44 } from "./Shatter-COjV2jLy.js";
|
|
50
|
+
import { n as componentDefinition$45 } from "./SimplexNoise-Ce79jgYM.js";
|
|
51
|
+
import { n as componentDefinition$46 } from "./SineWave-Cv2gOU8a.js";
|
|
52
|
+
import { n as componentDefinition$47 } from "./SolidColor-DFkDBFq3.js";
|
|
53
|
+
import { n as componentDefinition$48 } from "./Spherize-R-s4pX9t.js";
|
|
54
|
+
import { n as componentDefinition$49 } from "./Spiral-W4dALX1z.js";
|
|
55
|
+
import { n as componentDefinition$50 } from "./Strands-DtN5POfO.js";
|
|
56
|
+
import { n as componentDefinition$51 } from "./Stretch-BzvP_hdu.js";
|
|
57
|
+
import { n as componentDefinition$52 } from "./Stripes-BbNFX05u.js";
|
|
58
|
+
import { n as componentDefinition$53 } from "./Swirl-CfsYsr4X.js";
|
|
59
|
+
import { n as componentDefinition$54 } from "./TiltShift-B6gbm7Z8.js";
|
|
60
|
+
import { n as componentDefinition$55 } from "./Tint-CpnitsHw.js";
|
|
61
|
+
import { n as componentDefinition$56 } from "./Tritone-DzvSKVfR.js";
|
|
62
|
+
import { n as componentDefinition$57 } from "./Twirl-BXH4uAd6.js";
|
|
63
|
+
import { n as componentDefinition$58 } from "./Vibrance-ByN9bRgU.js";
|
|
64
|
+
import { n as componentDefinition$59 } from "./WaveDistortion-BA1PyqYH.js";
|
|
65
|
+
import { n as componentDefinition$60 } from "./ZoomBlur-CTrw7HxX.js";
|
|
64
66
|
import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, WebGPURenderer } from "three/webgpu";
|
|
65
67
|
import { WebGLRenderer } from "three";
|
|
66
68
|
import { PI, abs, add, atan, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
|
|
@@ -1087,7 +1089,7 @@ function shaderRenderer() {
|
|
|
1087
1089
|
}
|
|
1088
1090
|
}
|
|
1089
1091
|
};
|
|
1090
|
-
const registerNode = (id, fragmentNodeFunc, parentId, metadata, uniforms = {}, componentDefinition$
|
|
1092
|
+
const registerNode = (id, fragmentNodeFunc, parentId, metadata, uniforms = {}, componentDefinition$61) => {
|
|
1091
1093
|
if (fragmentNodeFunc === null) {
|
|
1092
1094
|
const queueIndex = pendingRegistrationQueue.findIndex((item) => item.id === id);
|
|
1093
1095
|
if (queueIndex !== -1) {
|
|
@@ -1105,7 +1107,7 @@ function shaderRenderer() {
|
|
|
1105
1107
|
parentId,
|
|
1106
1108
|
metadata,
|
|
1107
1109
|
uniforms,
|
|
1108
|
-
componentDefinition: componentDefinition$
|
|
1110
|
+
componentDefinition: componentDefinition$61
|
|
1109
1111
|
};
|
|
1110
1112
|
else pendingRegistrationQueue.push({
|
|
1111
1113
|
id,
|
|
@@ -1113,7 +1115,7 @@ function shaderRenderer() {
|
|
|
1113
1115
|
parentId,
|
|
1114
1116
|
metadata,
|
|
1115
1117
|
uniforms,
|
|
1116
|
-
componentDefinition: componentDefinition$
|
|
1118
|
+
componentDefinition: componentDefinition$61
|
|
1117
1119
|
});
|
|
1118
1120
|
return;
|
|
1119
1121
|
}
|
|
@@ -1146,11 +1148,11 @@ function shaderRenderer() {
|
|
|
1146
1148
|
}
|
|
1147
1149
|
const nodeInfo = {
|
|
1148
1150
|
id,
|
|
1149
|
-
componentName: componentDefinition$
|
|
1151
|
+
componentName: componentDefinition$61?.name || "Unknown",
|
|
1150
1152
|
fragmentNodeFunc,
|
|
1151
1153
|
parentId,
|
|
1152
|
-
requiresRTT: componentDefinition$
|
|
1153
|
-
requiresChild: componentDefinition$
|
|
1154
|
+
requiresRTT: componentDefinition$61?.requiresRTT || false,
|
|
1155
|
+
requiresChild: componentDefinition$61?.requiresChild || false,
|
|
1154
1156
|
opacityUniform,
|
|
1155
1157
|
metadata: {
|
|
1156
1158
|
blendMode: metadata?.blendMode || "normal",
|
|
@@ -1466,7 +1468,7 @@ function shaderRenderer() {
|
|
|
1466
1468
|
if (pendingRegistrationQueue.length === 0) return;
|
|
1467
1469
|
const queue = [...pendingRegistrationQueue];
|
|
1468
1470
|
pendingRegistrationQueue = [];
|
|
1469
|
-
for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition: componentDefinition$
|
|
1471
|
+
for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition: componentDefinition$61 } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition$61);
|
|
1470
1472
|
};
|
|
1471
1473
|
const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = false }) => {
|
|
1472
1474
|
if (isInitialized || isInitializing) return;
|
|
@@ -1805,21 +1807,23 @@ var createShaderRegistry = () => {
|
|
|
1805
1807
|
Ripples: componentDefinition$41,
|
|
1806
1808
|
Saturation: componentDefinition$42,
|
|
1807
1809
|
Sharpness: componentDefinition$43,
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1810
|
+
Shatter: componentDefinition$44,
|
|
1811
|
+
SimplexNoise: componentDefinition$45,
|
|
1812
|
+
SineWave: componentDefinition$46,
|
|
1813
|
+
SolidColor: componentDefinition$47,
|
|
1814
|
+
Spherize: componentDefinition$48,
|
|
1815
|
+
Spiral: componentDefinition$49,
|
|
1816
|
+
Strands: componentDefinition$50,
|
|
1817
|
+
Stretch: componentDefinition$51,
|
|
1818
|
+
Stripes: componentDefinition$52,
|
|
1819
|
+
Swirl: componentDefinition$53,
|
|
1820
|
+
TiltShift: componentDefinition$54,
|
|
1821
|
+
Tint: componentDefinition$55,
|
|
1822
|
+
Tritone: componentDefinition$56,
|
|
1823
|
+
Twirl: componentDefinition$57,
|
|
1824
|
+
Vibrance: componentDefinition$58,
|
|
1825
|
+
WaveDistortion: componentDefinition$59,
|
|
1826
|
+
ZoomBlur: componentDefinition$60
|
|
1823
1827
|
};
|
|
1824
1828
|
Object.entries(shaderDefinitions).forEach(([fileName, def]) => {
|
|
1825
1829
|
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":"AAgEA,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;AAiGD,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"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { ComponentDefinition } from '../../types';
|
|
2
|
+
|
|
3
|
+
export interface ComponentProps {
|
|
4
|
+
/**
|
|
5
|
+
* Thickness of crack lines
|
|
6
|
+
*
|
|
7
|
+
* Accepts a number between 0.5 and 5.
|
|
8
|
+
* @default 1
|
|
9
|
+
*/
|
|
10
|
+
crackWidth: number;
|
|
11
|
+
/**
|
|
12
|
+
* How much shards shift
|
|
13
|
+
*
|
|
14
|
+
* Accepts a number between 0 and 20.
|
|
15
|
+
* @default 4
|
|
16
|
+
*/
|
|
17
|
+
intensity: number;
|
|
18
|
+
/**
|
|
19
|
+
* Cursor influence radius
|
|
20
|
+
*
|
|
21
|
+
* Accepts a number between 0.1 and 1.
|
|
22
|
+
* @default 0.4
|
|
23
|
+
*/
|
|
24
|
+
radius: number;
|
|
25
|
+
/**
|
|
26
|
+
* How fast shards return to rest
|
|
27
|
+
*
|
|
28
|
+
* Accepts a number between 0.1 and 10.
|
|
29
|
+
* @default 1
|
|
30
|
+
*/
|
|
31
|
+
decay: number;
|
|
32
|
+
/**
|
|
33
|
+
* Random seed for pattern
|
|
34
|
+
*
|
|
35
|
+
* Accepts a number between 0 and 50.
|
|
36
|
+
* @default 2
|
|
37
|
+
*/
|
|
38
|
+
seed: number;
|
|
39
|
+
/**
|
|
40
|
+
* RGB separation for prismatic glass effect
|
|
41
|
+
*
|
|
42
|
+
* Accepts a number between 0 and 5.
|
|
43
|
+
* @default 1
|
|
44
|
+
*/
|
|
45
|
+
chromaticSplit: number;
|
|
46
|
+
/**
|
|
47
|
+
* How much cracks bend/distort the underlying image
|
|
48
|
+
*
|
|
49
|
+
* Accepts a number between 0 and 10.
|
|
50
|
+
* @default 5
|
|
51
|
+
*/
|
|
52
|
+
refractionStrength: number;
|
|
53
|
+
/**
|
|
54
|
+
* Subtle lighting on tilted shards for 3D depth
|
|
55
|
+
*
|
|
56
|
+
* Accepts a number between 0 and 0.5.
|
|
57
|
+
* @default 0.1
|
|
58
|
+
*/
|
|
59
|
+
shardLighting: number;
|
|
60
|
+
/**
|
|
61
|
+
* How to handle edges when displacement pushes content out of bounds
|
|
62
|
+
*
|
|
63
|
+
* Accepts one of: `"stretch"`, `"transparent"`, `"mirror"`, `"wrap"`.
|
|
64
|
+
* @default "mirror"
|
|
65
|
+
*/
|
|
66
|
+
edges: string;
|
|
67
|
+
}
|
|
68
|
+
export declare const componentDefinition: ComponentDefinition<ComponentProps>;
|
|
69
|
+
export default componentDefinition;
|
|
70
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Shatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAQvE,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CAChB;AAQD,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAqXnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
2
|
import "../../time-BZqyVJXt.js";
|
|
3
3
|
import "../../colorMixing-CZPFmiT4.js";
|
|
4
|
-
import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-
|
|
4
|
+
import { n as componentDefinition, t as SimplexNoise_default } from "../../SimplexNoise-Ce79jgYM.js";
|
|
5
5
|
export { componentDefinition, SimplexNoise_default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
2
|
import "../../time-BZqyVJXt.js";
|
|
3
|
-
import { n as componentDefinition, t as SineWave_default } from "../../SineWave-
|
|
3
|
+
import { n as componentDefinition, t as SineWave_default } from "../../SineWave-Cv2gOU8a.js";
|
|
4
4
|
export { componentDefinition, SineWave_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
|
-
import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-
|
|
2
|
+
import { n as componentDefinition, t as SolidColor_default } from "../../SolidColor-DFkDBFq3.js";
|
|
3
3
|
export { componentDefinition, SolidColor_default as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
|
-
import { n as componentDefinition, t as Spherize_default } from "../../Spherize-
|
|
2
|
+
import { n as componentDefinition, t as Spherize_default } from "../../Spherize-R-s4pX9t.js";
|
|
3
3
|
export { componentDefinition, Spherize_default as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
2
|
import "../../time-BZqyVJXt.js";
|
|
3
3
|
import "../../colorMixing-CZPFmiT4.js";
|
|
4
|
-
import { n as componentDefinition, t as Spiral_default } from "../../Spiral-
|
|
4
|
+
import { n as componentDefinition, t as Spiral_default } from "../../Spiral-W4dALX1z.js";
|
|
5
5
|
export { componentDefinition, Spiral_default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
2
|
import "../../time-BZqyVJXt.js";
|
|
3
|
-
import { n as componentDefinition, t as Strands_default } from "../../Strands-
|
|
3
|
+
import { n as componentDefinition, t as Strands_default } from "../../Strands-DtN5POfO.js";
|
|
4
4
|
export { componentDefinition, Strands_default as default };
|