shaders 2.5.123 → 2.5.124

package/dist/core/{FloatingParticles-DKoG78j0.js → FloatingParticles-LMsFTJKp.js}

@@ -1,11 +1,21 @@
 import { a as transformColor } from "./transformations-CJcUeZIC.js";
 import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
-import { Fn, cos, dot, float, floor, fract, length, min, mix, screenUV, sin, smoothstep, time, vec2, vec3, vec4, viewportSize } from "three/tsl";
+import { StorageTexture } from "three/webgpu";
+import { FloatType } from "three";
+import { Fn, cos, dot, float, floor, fract, instanceIndex, length, min, mix, screenUV, sin, smoothstep, storageTexture, texture, textureStore, time, uint, uniform, uvec2, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var PARTICLE_TEX = 1024;
 var hash1_2 = Fn(([p]) => {
-	return fract(sin(dot(p, vec2(127.1, 311.7))).mul(43758.5453123));
+	const p3 = fract(vec3(p.x, p.y, p.x).mul(.1031));
+	const d = dot(p3, vec3(p3.y, p3.z, p3.x).add(33.33));
+	const p3b = p3.add(d);
+	return fract(p3b.x.add(p3b.y).mul(p3b.z));
 });
 var hash2_2 = Fn(([p]) => {
-	return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))).mul(43758.5453));
+	const p3 = fract(vec3(p.x, p.y, p.x).mul(vec3(.1031, .103, .0973)));
+	const d = dot(p3, vec3(p3.y, p3.z, p3.x).add(33.33));
+	const p3b = p3.add(d);
+	const s = p3b.x.add(p3b.y);
+	return fract(vec2(s.mul(p3b.z), s.mul(p3b.y)));
 });
 var voronoiPointFromRoot = Fn(([root, deg]) => {
 	const point = hash2_2(root).sub(.5);
@@ -20,6 +30,13 @@ var getParticleDistance = Fn(([uv$1, cellUV, randomness]) => {
 	const pointUV = voronoiPointFromRoot(cellUV, degFromRootUV(cellUV, randomness));
 	return length(uv$1.sub(pointUV));
 });
+var degFromRootUV_compute = Fn(([uv$1, randomness, frameTimeU]) => {
+	return frameTimeU.mul(randomness).mul(hash1_2(uv$1).sub(.5)).mul(2);
+});
+var getParticleDistance_compute = Fn(([uv$1, cellUV, randomness, frameTimeU]) => {
+	const pointUV = voronoiPointFromRoot(cellUV, degFromRootUV_compute(cellUV, randomness, frameTimeU));
+	return length(uv$1.sub(pointUV));
+});
 const componentDefinition = {
 	name: "FloatingParticles",
 	category: "Textures",
@@ -63,7 +80,7 @@ const componentDefinition = {
 			}
 		},
 		particleSize: {
-			default: 1,
+			default: 2,
 			description: "Size of particles",
 			ui: {
 				type: ["range", "map"],
@@ -157,8 +174,106 @@ const componentDefinition = {
 			}
 		}
 	},
+	computeNode: (params) => {
+		const { uniforms, onCleanup } = params;
+		const texSize = PARTICLE_TEX;
+		const count = texSize * texSize;
+		const gs = uint(texSize);
+		const outTex = new StorageTexture(texSize, texSize);
+		outTex.type = FloatType;
+		const outTexNode = storageTexture(outTex);
+		onCleanup(() => outTex.dispose());
+		const animTimeU = uniform(0);
+		const frameTimeU = uniform(0);
+		const aspectU = uniform(16 / 9);
+		const computeRenderParticle = Fn(([uv$1]) => {
+			const rootUV = floor(uv$1);
+			const randomness = uniforms.randomness.uniform;
+			const dCenter = getParticleDistance_compute(uv$1, rootUV, randomness, frameTimeU);
+			const dLeft = getParticleDistance_compute(uv$1, rootUV.add(vec2(-1, 0)), randomness, frameTimeU);
+			const dRight = getParticleDistance_compute(uv$1, rootUV.add(vec2(1, 0)), randomness, frameTimeU);
+			const dTop = getParticleDistance_compute(uv$1, rootUV.add(vec2(0, -1)), randomness, frameTimeU);
+			const dBottom = getParticleDistance_compute(uv$1, rootUV.add(vec2(0, 1)), randomness, frameTimeU);
+			const minDist = min(min(min(min(dCenter, dLeft), dRight), dTop), dBottom);
+			const softness = uniforms.particleSoftness.uniform;
+			const scaledSize = uniforms.particleSize.uniform.mul(.01);
+			const innerRadius = scaledSize.mul(.6);
+			const baseIntensity = smoothstep(innerRadius, innerRadius.add(softness.mul(scaledSize.mul(2.4))), minDist).oneMinus();
+			const twinkleIntensity = uniforms.twinkle.uniform;
+			const particlePhase = hash1_2(rootUV);
+			const twinkleValue = sin(frameTimeU.mul(2).add(particlePhase.mul(6.28318))).mul(.5).add(.5);
+			const twinkleModifier = mix(float(1), twinkleValue, twinkleIntensity);
+			return baseIntensity.mul(twinkleModifier).mul(uniforms.particleColor.uniform.rgb);
+		});
+		const computeLayeredParticles = Fn(([uv$1]) => {
+			const sizeMod = float(1.05);
+			const alphaMod = float(.9);
+			const layers = uniforms.count.uniform;
+			const particles = vec3(0).toVar();
+			const layerScale = float(1).toVar();
+			const alpha = float(1).toVar();
+			const offset = vec2(0).toVar();
+			const angleRad = uniforms.angle.uniform.mul(3.14159).div(180);
+			const baseMovementDir = vec2(cos(angleRad), sin(angleRad));
+			const baseMovement = animTimeU.mul(baseMovementDir);
+			const speedVar = uniforms.speedVariance.uniform;
+			const angleVar = uniforms.angleVariance.uniform.mul(3.14159).div(180);
+			for (let i = 0; i < 5; i++) {
+				const layerActive = float(i).lessThan(layers).and(alpha.greaterThan(.02));
+				const layerHash = hash2_2(vec2(alpha, float(i).mul(7.919)));
+				const speedMod = float(1).add(layerHash.x.sub(.5).mul(speedVar));
+				const angleDelta = layerHash.y.sub(.5).mul(angleVar).mul(2);
+				const variedAngle = angleRad.add(angleDelta).toVar();
+				const variedDir = vec2(cos(variedAngle), sin(variedAngle));
+				const movement = baseMovement.mul(speedMod).add(variedDir.sub(baseMovementDir).mul(animTimeU));
+				const layerParticles = computeRenderParticle(uv$1.mul(layerScale).add(movement).add(offset)).mul(alpha);
+				particles.assign(particles.add(layerActive.select(layerParticles, vec3(0))));
+				offset.assign(offset.add(layerHash.mul(10)));
+				alpha.assign(alpha.mul(alphaMod));
+				layerScale.assign(layerScale.mul(sizeMod));
+			}
+			return particles;
+		});
+		const particlePass = Fn(() => {
+			const idx = instanceIndex;
+			const j = idx.mod(gs);
+			const i = idx.div(gs);
+			const u = j.toFloat().add(.5).div(float(texSize));
+			const v = i.toFloat().add(.5).div(float(texSize));
+			const particles = computeLayeredParticles(vec2(u.mul(2).sub(1).mul(aspectU), v.mul(2).sub(1)).mul(uniforms.particleDensity.uniform));
+			const pa = length(particles).clamp(0, 1);
+			textureStore(outTexNode, uvec2(j, i), vec4(particles, pa)).toWriteOnly();
+		})().compute(count, [256]);
+		return {
+			outputs: { particleTexture: outTex },
+			getComputeNodes: (frameParams) => {
+				animTimeU.value += frameParams.deltaTime * uniforms.speed.uniform.value;
+				frameTimeU.value += frameParams.deltaTime;
+				if (frameParams.dimensions.height > 0) aspectU.value = frameParams.dimensions.width / frameParams.dimensions.height;
+				return [particlePass];
+			}
+		};
+	},
 	fragmentNode: (params) => {
-		const { uniforms, childNode } = params;
+		const { uniforms, childNode, computeOutputs } = params;
+		if (computeOutputs?.particleTexture) {
+			const particleField = texture(computeOutputs.particleTexture);
+			const px = float(1 / PARTICLE_TEX);
+			const s0 = particleField.sample(screenUV);
+			const s1 = particleField.sample(screenUV.add(vec2(px, float(0))));
+			const s2 = particleField.sample(screenUV.add(vec2(float(0), px)));
+			const s3 = particleField.sample(screenUV.add(vec2(px.negate(), float(0))));
+			const s4 = particleField.sample(screenUV.add(vec2(float(0), px.negate())));
+			const w0 = float(.5), w1 = float(.125);
+			const particles$1 = s0.xyz.mul(w0).add(s1.xyz.mul(w1)).add(s2.xyz.mul(w1)).add(s3.xyz.mul(w1)).add(s4.xyz.mul(w1));
+			const particleAlpha$1 = s0.w.mul(w0).add(s1.w.mul(w1)).add(s2.w.mul(w1)).add(s3.w.mul(w1)).add(s4.w.mul(w1));
+			if (childNode) {
+				const mixedColor = mix(childNode.xyz, particles$1, particleAlpha$1.greaterThan(.01).select(particleAlpha$1, 0));
+				const pa = particleAlpha$1.clamp(0, 1);
+				return vec4(mixedColor, pa.add(childNode.w.mul(float(1).sub(pa))));
+			}
+			return vec4(particles$1, particleAlpha$1);
+		}
 		const baseUV = screenUV;
 		const animTime = createAnimatedTime(params, uniforms.speed);
 		const renderParticle = Fn(([uv$2]) => {
@@ -175,7 +290,7 @@ const componentDefinition = {
 			const innerRadius = scaledSize.mul(.6);
 			const baseIntensity = smoothstep(innerRadius, innerRadius.add(softness.mul(scaledSize.mul(2.4))), minDist).oneMinus();
 			const twinkleIntensity = uniforms.twinkle.uniform;
-			const particlePhase = rootUV.x.mul(12.9898).add(rootUV.y.mul(78.233)).sin().mul(43758.5453).fract();
+			const particlePhase = hash1_2(rootUV);
 			const twinkleValue = sin(time.mul(2).add(particlePhase.mul(6.28318))).mul(.5).add(.5);
 			const twinkleModifier = mix(float(1), twinkleValue, twinkleIntensity);
 			return baseIntensity.mul(twinkleModifier).mul(uniforms.particleColor.uniform.rgb);
@@ -193,7 +308,7 @@ const componentDefinition = {
 			const baseMovement = animTime.mul(baseMovementDir);
 			const speedVar = uniforms.speedVariance.uniform;
 			const angleVar = uniforms.angleVariance.uniform.mul(3.14159).div(180);
-			for (let i = 0; i < 4; i++) {
+			for (let i = 0; i < 5; i++) {
 				const layerActive = float(i).lessThan(layers).and(alpha.greaterThan(.02));
 				const layerHash = hash2_2(vec2(alpha, float(i).mul(7.919)));
 				const speedMod = float(1).add(layerHash.x.sub(.5).mul(speedVar));

package/dist/core/index.js

@@ -42,7 +42,7 @@ import "./Ellipse-sWhNvW9-.js";
 import "./Emboss-DGaubb9x.js";
 import "./FallingLines-DqIZ8wTH.js";
 import "./FilmGrain-Dbw02Jz9.js";
-import "./FloatingParticles-DKoG78j0.js";
+import "./FloatingParticles-LMsFTJKp.js";
 import "./Flower-BbRNrXIa.js";
 import "./FlowField-D3CAHBBG.js";
 import "./FlowingGradient-BRQ_K-k3.js";
@@ -123,7 +123,7 @@ import "./Weave-ou5shgl3.js";
 import "./WebcamTexture-D4e06ajM.js";
 import "./WorleyNoise-Uf6IPm7A.js";
 import "./ZoomBlur-DJ-RNKHM.js";
-import { t as getAllShaders } from "./shaderRegistry-9d8S78Sy.js";
+import { t as getAllShaders } from "./shaderRegistry-DZDkRCt8.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
 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

@@ -42,7 +42,7 @@ import "./Ellipse-sWhNvW9-.js";
 import "./Emboss-DGaubb9x.js";
 import "./FallingLines-DqIZ8wTH.js";
 import "./FilmGrain-Dbw02Jz9.js";
-import "./FloatingParticles-DKoG78j0.js";
+import "./FloatingParticles-LMsFTJKp.js";
 import "./Flower-BbRNrXIa.js";
 import "./FlowField-D3CAHBBG.js";
 import "./FlowingGradient-BRQ_K-k3.js";
@@ -123,5 +123,5 @@ import "./Weave-ou5shgl3.js";
 import "./WebcamTexture-D4e06ajM.js";
 import "./WorleyNoise-Uf6IPm7A.js";
 import "./ZoomBlur-DJ-RNKHM.js";
-import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-9d8S78Sy.js";
+import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-DZDkRCt8.js";
 export { getAllShaders, getShaderByName, getShaderCategories, getShadersByCategory, shaderRegistry };

package/dist/core/{shaderRegistry-9d8S78Sy.js → shaderRegistry-DZDkRCt8.js}

@@ -35,7 +35,7 @@ import { n as componentDefinition$33 } from "./Ellipse-sWhNvW9-.js";
 import { n as componentDefinition$34 } from "./Emboss-DGaubb9x.js";
 import { n as componentDefinition$35 } from "./FallingLines-DqIZ8wTH.js";
 import { n as componentDefinition$36 } from "./FilmGrain-Dbw02Jz9.js";
-import { n as componentDefinition$37 } from "./FloatingParticles-DKoG78j0.js";
+import { n as componentDefinition$37 } from "./FloatingParticles-LMsFTJKp.js";
 import { n as componentDefinition$38 } from "./Flower-BbRNrXIa.js";
 import { n as componentDefinition$39 } from "./FlowField-D3CAHBBG.js";
 import { n as componentDefinition$40 } from "./FlowingGradient-BRQ_K-k3.js";

package/dist/core/shaders/FloatingParticles/index.d.ts

@@ -25,7 +25,7 @@ export interface ComponentProps {
     /**
      * Size of particles
      *
-     * @default 1
+     * @default 2
      */
     particleSize: number;
     /**

package/dist/core/shaders/FloatingParticles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/FloatingParticles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAIvE,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAA;AAkClE,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,MAAM,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAuMnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/FloatingParticles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAwC,MAAM,iBAAiB,CAAA;AAU1F,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAA;AA4DlE,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,MAAM,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA0SnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/core/shaders/FloatingParticles/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-CJcUeZIC.js";
 import "../../time-DUqSFWvT.js";
-import { n as componentDefinition, t as FloatingParticles_default } from "../../FloatingParticles-DKoG78j0.js";
+import { n as componentDefinition, t as FloatingParticles_default } from "../../FloatingParticles-LMsFTJKp.js";
 export { componentDefinition, FloatingParticles_default as default };

package/dist/js/createShader.js

@@ -148,7 +148,7 @@ async function createShader(canvas, preset, options) {
 					return;
 				}
 				if (renderer.getPerformanceStats().fps > 0) {
-					state.telemetryCollector = startTelemetry(renderer, "2.5.123", options?.disableTelemetry || false, false);
+					state.telemetryCollector = startTelemetry(renderer, "2.5.124", options?.disableTelemetry || false, false);
 					if (state.telemetryCollector) state.telemetryCollector.start();
 					state.telemetryStartTimeout = null;
 				} else state.telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/js/utils/generatePresetCode.js

@@ -468,7 +468,7 @@ var shaderMetadata = {
 		"randomness": .25,
 		"speed": .25,
 		"angle": 90,
-		"particleSize": 1,
+		"particleSize": 2,
 		"particleSoftness": 0,
 		"twinkle": .5,
 		"count": 5,

package/dist/react/Shader.js

@@ -89,7 +89,7 @@ const Shader = ({ children, disableTelemetry = false, colorSpace = "p3-linear",
 				return;
 			}
 			if (rendererRef.current.getPerformanceStats().fps > 0) {
-				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.123", disableTelemetry, isPreview);
+				telemetryCollectorRef.current = startTelemetry(rendererRef.current, "2.5.124", disableTelemetry, isPreview);
 				if (telemetryCollectorRef.current) telemetryCollectorRef.current.start();
 				telemetryStartTimeoutRef.current = null;
 			} else telemetryStartTimeoutRef.current = window.setTimeout(checkRendering, 500);