@tresjs/cientos 5.9.2 → 5.10.0

package/dist/webgpu.js

@@ -0,0 +1,1621 @@
+/**
+  * name: @tresjs/cientos
+  * version: v5.10.0
+  * (c) 2026
+  * description: Collection of useful helpers and fully functional, ready-made abstractions for Tres
+  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
+  */
+import { $ as useAnimations, $t as Decal_default, A as Icosahedron_default, At as OrbitControls_default, B as MarchingCubes_default, Bt as MERGED_INJECTION_KEY, C as Sphere_default, Ct as Stats, D as Ring_default, Dt as TransformControls_default, E as RoundedBox_default, Et as useHelper, F as Cone_default, Ft as Merged_default, G as htmlDefaults, Gt as useSurfaceSampler, H as useImage, Ht as ScreenSpace_default, I as Circle_default, It as Instances_default, J as useFBO, Jt as component_default$8, K as GradientTexture_default, Kt as useOutline, L as Box_default, Lt as Instance_default, M as gridDefaults, Mt as KeyboardControls_default, N as Dodecahedron_default, Nt as CameraControls_default, O as Plane_default, Ot as ScrollControls_default, P as Cylinder_default, Pt as BaseCameraControls, Q as useGLTFExporter, Qt as DecalDebugUI_default, R as Text3D_default, Rt as PositionMesh, S as Superformula_default, St as StatsGl, T as RoundedPlane_default, Tt as component_default$7, U as imageDefaults, Ut as ScreenSizer_default, V as MarchingCube_default, Vt as useMask, W as useHtml, Wt as component_default$10, X as component_default, Xt as Fit_default, Y as component_default$2, Yt as Levioso_default, Z as useIntersect, Zt as Edges_default, _ as Backdrop_default, _t as component_default$11, a as pick, an as CameraShake_default, at as glassDefaults, b as Torus_default, bt as component_default$9, c as sparklesDefaults, ct as useTextures, d as Smoke_default, dt as component_default$12, en as useDecalEditor, et as PositionalAudio_default, f as usePrecipitation, ft as useTexture, g as useEnvironment, gt as useFBX, h as component_default$3, ht as component_default$4, i as hasSetter, in as invalidateDecalGeometry, it as meshWobbleMaterialDefaults, j as useGrid, jt as MapControls_default, k as Octahedron_default, kt as PointerLockControls_default, l as toCooldownRatio, lt as useVideoTexture, m as lightformer_default, mt as useGLTF, n as starsDefaults, nn as getTextureAspect, nt as GlobalAudio, o as useSparkles, on as Billboard_default, ot as holographicDefaults, p as precipitationDefaults, pt as component_default$6, q as component_default$5, qt as outlineDefaults, r as extractBindingPosition, rn as getTextureName, rt as component_default$1, s as useEmptyDataTexture, sn as Align_default, st as toHolographicMaterialProps, t as useStars, tn as ensureTextureNames, tt as MouseParallax_default, u as toNoiseScale, ut as useProgress, v as Tube_default, vt as useSVG, w as ScreenQuad_default, wt as LOD_default, x as Tetrahedron_default, xt as useBVH, y as TorusKnot_default, yt as CircleShadow_default, z as MarchingPlane_default, zt as INSTANCES_INJECTION_KEY } from "./useStars-DmGIezjm.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, onMounted, onUpdated, openBlock, renderSlot, shallowRef, unref, watch } from "vue";
+import { extend, logWarning, useLoop, useTres, useTresContext } from "@tresjs/core";
+import { InstancedBufferAttribute, Mesh, NormalBlending } from "three";
+import { AdditiveBlending as AdditiveBlending$1, Color as Color$1, DataTexture as DataTexture$1, DoubleSide as DoubleSide$1, InstancedBufferAttribute as InstancedBufferAttribute$1, MathUtils as MathUtils$1, MeshBasicNodeMaterial, MeshPhysicalNodeMaterial, MeshStandardNodeMaterial, NodeMaterial, Object3D as Object3D$1, PointsNodeMaterial, Sprite, Vector2 as Vector2$1, Vector3 as Vector3$1 } from "three/webgpu";
+import { Discard, Fn, If, abs, batch, cameraPosition, cameraProjectionMatrix, cameraViewMatrix, clamp, cos, diffuseColor, distance, dot, float, fract, fwidth, instancedBufferAttribute, instancedDynamicBufferAttribute, instancedMesh, length, materialReference, max, min, mix, modelViewMatrix, modelWorldMatrix, modelWorldMatrixInverse, morphReference, normalGeometry, normalLocal, normalize, positionGeometry, positionLocal, pow, sRGBTransferEOTF, saturate, screenDPR, select, sin, skinning, smoothstep, texture, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
+//#region src/core/abstractions/Outline/OutlineNodeMaterial.ts
+var OutlineNodeMaterial = class extends MeshBasicNodeMaterial {
+	_outlineUniforms = {
+		thickness: uniform(outlineDefaults.thickness),
+		screenspace: uniform(Number(outlineDefaults.screenspace)),
+		size: uniform(new Vector2$1(1, 1))
+	};
+	_outlineVertexNode;
+	constructor() {
+		super();
+		this.fog = false;
+		this.color.set(outlineDefaults.color);
+		this.opacity = outlineDefaults.opacity;
+		const u = this._outlineUniforms;
+		this._outlineVertexNode = Fn(() => {
+			const mvp = cameraProjectionMatrix.mul(modelViewMatrix);
+			const clipPosition = mvp.mul(vec4(positionLocal, 1)).toVar();
+			const clipNormal = mvp.mul(vec4(normalLocal, 0));
+			const offset = normalize(clipNormal.xy).mul(u.thickness).div(u.size).mul(clipPosition.w).mul(2);
+			const pixelOffset = vec4(clipPosition.xy.add(offset), clipPosition.zw);
+			return select(u.screenspace.greaterThan(.5), clipPosition, pixelOffset);
+		})();
+		this.vertexNode = this._outlineVertexNode;
+	}
+	setupPosition(builder) {
+		const { geometry } = builder;
+		const object = builder.object;
+		if (geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color) morphReference(object);
+		if (object.isSkinnedMesh) skinning(object);
+		positionLocal.addAssign(normalLocal.mul(this._outlineUniforms.thickness).mul(this._outlineUniforms.screenspace));
+		if (object.isBatchedMesh) batch(object);
+		if (object.isInstancedMesh && object.instanceMatrix?.isInstancedBufferAttribute) instancedMesh(object);
+		return positionLocal;
+	}
+	copy(source) {
+		super.copy(source);
+		this.vertexNode = this._outlineVertexNode;
+		this.size.copy(source.size);
+		return this;
+	}
+	get thickness() {
+		return this._outlineUniforms.thickness.value;
+	}
+	set thickness(value) {
+		this._outlineUniforms.thickness.value = value;
+	}
+	get screenspace() {
+		return this._outlineUniforms.screenspace.value === 1;
+	}
+	set screenspace(value) {
+		this._outlineUniforms.screenspace.value = value ? 1 : 0;
+	}
+	get size() {
+		return this._outlineUniforms.size.value;
+	}
+};
+//#endregion
+//#region src/core/abstractions/Outline/webgpu.vue
+var webgpu_default$7 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		color: {
+			type: null,
+			required: false
+		},
+		screenspace: {
+			type: Boolean,
+			required: false
+		},
+		opacity: {
+			type: Number,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		thickness: {
+			type: Number,
+			required: false
+		},
+		angle: {
+			type: Number,
+			required: false
+		},
+		toneMapped: {
+			type: Boolean,
+			required: false
+		},
+		polygonOffset: {
+			type: Boolean,
+			required: false
+		},
+		polygonOffsetFactor: {
+			type: Number,
+			required: false
+		},
+		renderOrder: {
+			type: Number,
+			required: false
+		}
+	}, outlineDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const groupRef = shallowRef();
+		__expose({ instance: groupRef });
+		useOutline(props, groupRef, new OutlineNodeMaterial());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresGroup", {
+				ref_key: "groupRef",
+				ref: groupRef
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+//#region src/core/materials/holographicMaterial/HolographicNodeMaterial.ts
+/**
+* TSL port of the holographic material by Anderson Mancini. See `material.ts` for the license.
+* `HolographicMaterial.ts` has the GLSL version. A fix here must go there too.
+*/
+var HolographicNodeMaterial = class extends MeshBasicNodeMaterial {
+	holographicUniforms = {
+		fresnelAmount: uniform(holographicDefaults.fresnelAmount),
+		fresnelOpacity: uniform(holographicDefaults.fresnelOpacity),
+		scanlineSize: uniform(holographicDefaults.scanlineSize),
+		hologramBrightness: uniform(holographicDefaults.hologramBrightness),
+		signalSpeed: uniform(holographicDefaults.signalSpeed),
+		hologramOpacity: uniform(holographicDefaults.hologramOpacity),
+		hologramColor: uniform(new Color$1(holographicDefaults.hologramColor)),
+		enableBlinking: uniform(Number(holographicDefaults.enableBlinking)),
+		blinkFresnelOnly: uniform(Number(holographicDefaults.blinkFresnelOnly))
+	};
+	constructor() {
+		super();
+		this.transparent = true;
+		this.blending = AdditiveBlending$1;
+		this.depthTest = false;
+		this.fog = false;
+		const u = this.holographicUniforms;
+		const clipPosition = cameraProjectionMatrix.mul(modelViewMatrix).mul(vec4(positionLocal, 1)).toVarying();
+		const positionW = vec4(positionLocal, 1).mul(modelWorldMatrix).xyz.toVarying();
+		const normalW = normalize(vec4(normalGeometry, 0).mul(modelWorldMatrix).xyz).toVarying();
+		const flicker = (amount, t) => clamp(fract(cos(t).mul(43758.5453123)), amount, 1);
+		const random = (a, b) => fract(cos(dot(vec2(a, b), vec2(12.9898, 78.233))).mul(43758.5453));
+		const smoothstepAnyOrder = (edge0, edge1, x) => {
+			const t = saturate(x.sub(edge0).div(edge1.sub(edge0)));
+			return t.mul(t).mul(float(3).sub(t.mul(2)));
+		};
+		this.colorNode = Fn(() => {
+			const vUv = uv();
+			const myUV = fract(clipPosition.xy.div(clipPosition.w).mul(.5).add(.5));
+			const signalTime = time.mul(u.signalSpeed);
+			const scanlines = float(10).toVar();
+			scanlines.addAssign(sin(signalTime.mul(20.8).sub(myUV.y.mul(60).mul(u.scanlineSize))).mul(20));
+			scanlines.mulAssign(smoothstepAnyOrder(cos(signalTime.add(myUV.y.mul(u.scanlineSize))).mul(1.3), float(.78), float(.9)));
+			scanlines.mulAssign(max(.25, sin(signalTime)));
+			const r = random(vUv.x, vUv.y);
+			const b = random(vUv.y.mul(.9), vUv.y.mul(.2));
+			const hologramColor = vec4(u.hologramColor, mix(u.hologramBrightness, vUv.y, .5)).add(vec4(r.mul(scanlines), b.mul(scanlines), r, 1).div(84)).toVar();
+			const scanlineMix = mix(vec4(0), hologramColor, hologramColor.a);
+			const viewDirectionW = normalize(cameraPosition.sub(positionW));
+			const fresnelFacing = dot(viewDirectionW, normalW).mul(float(1.6).sub(u.fresnelOpacity.div(2)));
+			const fresnelEffect = clamp(u.fresnelAmount.sub(fresnelFacing), 0, u.fresnelOpacity);
+			const blinkValue = mix(float(1), float(.6).sub(u.signalSpeed), u.enableBlinking);
+			const blink = flicker(blinkValue, signalTime.mul(.02));
+			const finalColor = mix(scanlineMix.rgb.mul(blink).add(fresnelEffect), scanlineMix.rgb.add(fresnelEffect.mul(blink)), u.blinkFresnelOnly);
+			return vec4(sRGBTransferEOTF(saturate(finalColor)), u.hologramOpacity);
+		})();
+	}
+	copy(source) {
+		const { holographicUniforms, colorNode } = this;
+		super.copy(source);
+		Object.assign(this, {
+			holographicUniforms,
+			colorNode
+		});
+		for (const key of Object.keys(holographicUniforms)) {
+			const value = source.holographicUniforms[key].value;
+			const uniform = holographicUniforms[key];
+			if (value instanceof Color$1) uniform.value.copy(value);
+			else uniform.value = value;
+		}
+		return this;
+	}
+	get fresnelAmount() {
+		return this.holographicUniforms.fresnelAmount.value;
+	}
+	set fresnelAmount(value) {
+		this.holographicUniforms.fresnelAmount.value = value;
+	}
+	get fresnelOpacity() {
+		return this.holographicUniforms.fresnelOpacity.value;
+	}
+	set fresnelOpacity(value) {
+		this.holographicUniforms.fresnelOpacity.value = value;
+	}
+	get scanlineSize() {
+		return this.holographicUniforms.scanlineSize.value;
+	}
+	set scanlineSize(value) {
+		this.holographicUniforms.scanlineSize.value = value;
+	}
+	get hologramBrightness() {
+		return this.holographicUniforms.hologramBrightness.value;
+	}
+	set hologramBrightness(value) {
+		this.holographicUniforms.hologramBrightness.value = value;
+	}
+	get signalSpeed() {
+		return this.holographicUniforms.signalSpeed.value;
+	}
+	set signalSpeed(value) {
+		this.holographicUniforms.signalSpeed.value = value;
+	}
+	get hologramOpacity() {
+		return this.holographicUniforms.hologramOpacity.value;
+	}
+	set hologramOpacity(value) {
+		this.holographicUniforms.hologramOpacity.value = value;
+	}
+	get hologramColor() {
+		return this.holographicUniforms.hologramColor.value;
+	}
+	get enableBlinking() {
+		return this.holographicUniforms.enableBlinking.value === 1;
+	}
+	set enableBlinking(value) {
+		this.holographicUniforms.enableBlinking.value = value ? 1 : 0;
+	}
+	get blinkFresnelOnly() {
+		return this.holographicUniforms.blinkFresnelOnly.value === 1;
+	}
+	set blinkFresnelOnly(value) {
+		this.holographicUniforms.blinkFresnelOnly.value = value ? 1 : 0;
+	}
+};
+//#endregion
+//#region src/core/materials/holographicMaterial/webgpu.vue
+var webgpu_default$1 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		fresnelAmount: {
+			type: Number,
+			required: false
+		},
+		fresnelOpacity: {
+			type: Number,
+			required: false
+		},
+		blinkFresnelOnly: {
+			type: Boolean,
+			required: false
+		},
+		enableBlinking: {
+			type: Boolean,
+			required: false
+		},
+		enableAdditive: {
+			type: Boolean,
+			required: false
+		},
+		hologramBrightness: {
+			type: Number,
+			required: false
+		},
+		scanlineSize: {
+			type: Number,
+			required: false
+		},
+		signalSpeed: {
+			type: Number,
+			required: false
+		},
+		hologramOpacity: {
+			type: Number,
+			required: false
+		},
+		hologramColor: {
+			type: null,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		}
+	}, holographicDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		extend({ HolographicNodeMaterial });
+		const materialRef = shallowRef();
+		__expose({
+			root: materialRef,
+			constructor: HolographicNodeMaterial
+		});
+		const materialProps = computed(() => toHolographicMaterialProps(props));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" The TSL `time` node animates the material, so it needs no per-frame update. "), createElementVNode("TresHolographicNodeMaterial", mergeProps({
+				ref_key: "materialRef",
+				ref: materialRef
+			}, materialProps.value), null, 16)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/core/materials/meshDiscardMaterial/MeshDiscardNodeMaterial.ts
+var MeshDiscardNodeMaterial = class extends NodeMaterial {
+	constructor() {
+		super();
+		this.fog = false;
+		this.vertexNode = vec4(0);
+		this.fragmentNode = Fn(() => {
+			Discard();
+			return vec4(0);
+		})();
+	}
+};
+//#endregion
+//#region src/core/materials/meshDiscardMaterial/webgpu.vue
+var webgpu_default$4 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	setup(__props, { expose: __expose }) {
+		const meshDiscardMaterialRef = shallowRef();
+		const { extend } = useTresContext();
+		extend({ MeshDiscardNodeMaterial });
+		__expose({ instance: meshDiscardMaterialRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresMeshDiscardNodeMaterial", {
+				ref_key: "meshDiscardMaterialRef",
+				ref: meshDiscardMaterialRef
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+//#region src/core/materials/meshGlassMaterial/MeshGlassNodeMaterial.ts
+/**
+* Node material version of `MeshGlassMaterial`.
+*
+* The GLSL version fakes `isMeshPhysicalMaterial` on a `MeshStandardMaterial`. `WebGPURenderer`
+* picks the node material from `material.type`, so it renders that one as a standard material
+* without transmission. `MeshPhysicalNodeMaterial` does transmission and clearcoat itself, so this
+* port only needs the glass start values.
+*/
+var MeshGlassNodeMaterial = class extends MeshPhysicalNodeMaterial {
+	constructor(parameters = {}) {
+		super();
+		this.setValues({
+			...glassDefaults,
+			...parameters
+		});
+	}
+	get reflectivity() {
+		return MathUtils$1.clamp(2.5 * (this.ior - 1) / (this.ior + 1), 0, 1);
+	}
+	set reflectivity(reflectivity) {
+		this.ior = (1 + .4 * reflectivity) / (1 - .4 * reflectivity);
+	}
+};
+//#endregion
+//#region src/core/materials/meshGlassMaterial/webgpu.vue
+var webgpu_default$5 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	setup(__props, { expose: __expose }) {
+		const materialRef = shallowRef();
+		extend({ MeshGlassNodeMaterial });
+		__expose({ instance: materialRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresMeshGlassNodeMaterial", {
+				ref_key: "materialRef",
+				ref: materialRef
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+//#region src/core/materials/meshWobbleMaterial/MeshWobbleNodeMaterial.ts
+var MeshWobbleNodeMaterial = class extends MeshStandardNodeMaterial {
+	_wobbleUniforms = {
+		time: uniform(0),
+		factor: uniform(meshWobbleMaterialDefaults.factor)
+	};
+	_wobbleNode;
+	constructor(parameters) {
+		super();
+		const u = this._wobbleUniforms;
+		this._wobbleNode = Fn(() => {
+			const theta = sin(u.time.add(positionLocal.y)).div(2).mul(u.factor);
+			const c = cos(theta).toVar();
+			const s = sin(theta).toVar();
+			const rotate = (v) => vec3(c.mul(v.x).add(s.mul(v.z)), v.y, c.mul(v.z).sub(s.mul(v.x)));
+			normalLocal.assign(rotate(normalLocal));
+			return rotate(positionLocal);
+		})();
+		this.castShadowPositionNode = this._wobbleNode;
+		this.setValues(parameters);
+	}
+	setupPosition(builder) {
+		positionLocal.assign(this._wobbleNode);
+		return super.setupPosition(builder);
+	}
+	copy(source) {
+		super.copy(source);
+		this.castShadowPositionNode = this._wobbleNode;
+		return this;
+	}
+	get time() {
+		return this._wobbleUniforms.time.value;
+	}
+	set time(value) {
+		this._wobbleUniforms.time.value = value;
+	}
+	get factor() {
+		return this._wobbleUniforms.factor.value;
+	}
+	set factor(value) {
+		this._wobbleUniforms.factor.value = value;
+	}
+};
+//#endregion
+//#region src/core/materials/meshWobbleMaterial/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$7 = ["factor"];
+//#endregion
+//#region src/core/materials/meshWobbleMaterial/webgpu.vue
+var webgpu_default$6 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		speed: {
+			type: Number,
+			required: false
+		},
+		factor: {
+			type: Number,
+			required: false
+		}
+	}, meshWobbleMaterialDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const materialRef = shallowRef();
+		const { extend, invalidate } = useTres();
+		extend({ MeshWobbleNodeMaterial });
+		watch(props, () => {
+			invalidate();
+		});
+		const { onBeforeRender } = useLoop();
+		onBeforeRender(({ elapsed }) => {
+			if (materialRef.value) {
+				materialRef.value.time = elapsed * props.speed;
+				invalidate();
+			}
+		});
+		__expose({ instance: materialRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresMeshWobbleNodeMaterial", {
+				ref_key: "materialRef",
+				ref: materialRef,
+				factor: __props.factor
+			}, null, 8, _hoisted_1$7);
+		};
+	}
+});
+//#endregion
+//#region src/core/materials/pointMaterial/PointNodeMaterial.ts
+let warnedPoints = false;
+var PointNodeMaterial = class extends PointsNodeMaterial {
+	constructor(parameters) {
+		super();
+		this.alphaToCoverage = false;
+		this.setValues(parameters);
+	}
+	setupDiffuseColor(builder) {
+		super.setupDiffuseColor(builder);
+		if (builder.object.isPoints) {
+			if (!warnedPoints) {
+				warnedPoints = true;
+				logWarning("<PointMaterial> on <TresPoints> draws 1 pixel points under WebGPU. Put it on a <TresSprite> with `count` and a `positionNode` instead.");
+			}
+			return;
+		}
+		if (!this.transparent && this.blending === NormalBlending && !this.alphaToCoverage) return;
+		const cxy = uv().mul(2).sub(1);
+		const r = dot(cxy, cxy);
+		const delta = fwidth(r);
+		const mask = float(1).sub(smoothstep(float(1).sub(delta), float(1).add(delta), r));
+		diffuseColor.a.assign(diffuseColor.a.mul(mask));
+	}
+};
+//#endregion
+//#region src/core/materials/pointMaterial/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$6 = ["size-attenuation"];
+//#endregion
+//#region src/core/materials/pointMaterial/webgpu.vue
+var webgpu_default$8 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: { sizeAttenuation: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props, { expose: __expose }) {
+		extend({ PointNodeMaterial });
+		const materialRef = shallowRef();
+		const shaderKey = (m) => [
+			m.sizeAttenuation,
+			m.transparent,
+			m.blending,
+			m.alphaToCoverage,
+			m.vertexColors,
+			!!m.map,
+			!!m.alphaMap,
+			m.alphaTest > 0
+		].join();
+		let lastKey = "";
+		onMounted(() => {
+			if (materialRef.value) lastKey = shaderKey(materialRef.value);
+		});
+		onUpdated(() => {
+			const material = materialRef.value;
+			if (!material) return;
+			const key = shaderKey(material);
+			if (key !== lastKey) material.needsUpdate = true;
+			lastKey = key;
+		});
+		__expose({ instance: materialRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresPointNodeMaterial", {
+				ref_key: "materialRef",
+				ref: materialRef,
+				"size-attenuation": __props.sizeAttenuation
+			}, null, 8, _hoisted_1$6);
+		};
+	}
+});
+//#endregion
+//#region src/core/objects/Html/HtmlNodeMaterial.ts
+var HtmlNodeMaterial = class extends NodeMaterial {
+	_htmlUniforms = {
+		uWidth: uniform(1),
+		uHeight: uniform(1)
+	};
+	constructor(billboard) {
+		super();
+		this.side = DoubleSide$1;
+		this.fog = false;
+		if (billboard) {
+			const u = this._htmlUniforms;
+			const center = modelViewMatrix.mul(vec4(0, 0, 0, 1));
+			const corner = vec4(positionGeometry.xy.mul(vec2(u.uWidth, u.uHeight)), 0, 0);
+			this.vertexNode = cameraProjectionMatrix.mul(center.add(corner));
+		}
+		this.fragmentNode = vec4(0, 0, 0, 0);
+	}
+	get uWidth() {
+		return this._htmlUniforms.uWidth.value;
+	}
+	set uWidth(value) {
+		this._htmlUniforms.uWidth.value = value;
+	}
+	get uHeight() {
+		return this._htmlUniforms.uHeight.value;
+	}
+	set uHeight(value) {
+		this._htmlUniforms.uHeight.value = value;
+	}
+};
+//#endregion
+//#region src/core/objects/Html/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"material",
+	"cast-shadow",
+	"receive-shadow",
+	"geometry"
+];
+//#endregion
+//#region src/core/objects/Html/webgpu.vue
+var webgpu_default$2 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		geometry: {
+			type: null,
+			required: false
+		},
+		material: {
+			type: null,
+			required: false
+		},
+		as: {
+			type: String,
+			required: false
+		},
+		transform: {
+			type: Boolean,
+			required: false
+		},
+		prepend: {
+			type: Boolean,
+			required: false
+		},
+		portal: {
+			type: null,
+			required: false
+		},
+		wrapperClass: {
+			type: String,
+			required: false
+		},
+		eps: {
+			type: Number,
+			required: false
+		},
+		distanceFactor: {
+			type: Number,
+			required: false
+		},
+		fullscreen: {
+			type: Boolean,
+			required: false
+		},
+		center: {
+			type: Boolean,
+			required: false
+		},
+		pointerEvents: {
+			type: String,
+			required: false
+		},
+		sprite: {
+			type: Boolean,
+			required: false
+		},
+		transparentMaterial: {
+			type: Boolean,
+			required: false
+		},
+		zIndexRange: {
+			type: Array,
+			required: false
+		},
+		calculatePosition: {
+			type: null,
+			required: false
+		},
+		occlude: {
+			type: [
+				Object,
+				null,
+				Array,
+				Boolean,
+				String
+			],
+			required: false
+		},
+		castShadow: {
+			type: Boolean,
+			required: false
+		},
+		receiveShadow: {
+			type: Boolean,
+			required: false
+		}
+	}, htmlDefaults),
+	emits: ["onOcclude"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const { groupRef, occlusionMeshRef, defaultPlaneGeometry, effectiveMaterial, isRayCastOcclusion, isVisible } = useHtml(__props, __emit, (billboard) => new HtmlNodeMaterial(billboard));
+		__expose({
+			instance: groupRef,
+			isVisible,
+			occlusionMesh: occlusionMeshRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresGroup", {
+				ref_key: "groupRef",
+				ref: groupRef
+			}, [__props.occlude && !unref(isRayCastOcclusion) ? (openBlock(), createElementBlock("TresMesh", {
+				key: 0,
+				ref_key: "occlusionMeshRef",
+				ref: occlusionMeshRef,
+				material: unref(effectiveMaterial),
+				"cast-shadow": __props.castShadow,
+				"receive-shadow": __props.receiveShadow,
+				geometry: __props.geometry || unref(defaultPlaneGeometry)
+			}, null, 8, _hoisted_1$5)) : createCommentVNode("v-if", true)], 512);
+		};
+	}
+});
+//#endregion
+//#region src/core/objects/Image/ImageNodeMaterial.ts
+const emptyTexture = /* @__PURE__ */ (() => {
+	const blank = new DataTexture$1(new Uint8Array([
+		0,
+		0,
+		0,
+		255
+	]), 1, 1);
+	blank.needsUpdate = true;
+	return blank;
+})();
+/**
+* TSL port of the image material. `ImageMaterial.ts` has the GLSL version. A fix here must go there too.
+*/
+var ImageNodeMaterial = class extends MeshBasicNodeMaterial {
+	_imageUniforms = {
+		scale: uniform(new Vector2$1(1, 1)),
+		imageBounds: uniform(new Vector2$1(1, 1)),
+		resolution: uniform(1024),
+		zoom: uniform(imageDefaults.zoom),
+		radius: uniform(imageDefaults.radius),
+		grayscale: uniform(imageDefaults.grayscale)
+	};
+	_map = null;
+	_mapNode;
+	constructor() {
+		super();
+		this.fog = false;
+		this.color.set(imageDefaults.color);
+		this.opacity = imageDefaults.opacity;
+		const u = this._imageUniforms;
+		const vUv = uv();
+		const aspect = (size) => size.div(min(size.x, size.y));
+		const plane = aspect(u.scale);
+		const image = aspect(u.imageBounds);
+		const imageIsWider = plane.x.div(plane.y).lessThan(image.x.div(image.y));
+		const fitted = select(imageIsWider, vec2(image.x.mul(plane.y).div(image.y), plane.y), vec2(plane.x, image.y.mul(plane.x).div(image.x)));
+		const offset = select(imageIsWider, vec2(fitted.x.sub(plane.x).div(2), 0), vec2(0, fitted.y.sub(plane.y).div(2))).div(fitted);
+		const zoomedUv = vUv.mul(plane).div(fitted).add(offset).sub(.5).div(u.zoom).add(.5);
+		const planePixels = u.scale.mul(u.resolution);
+		const halfPlanePixels = planePixels.mul(.5);
+		const cornerRadius = u.resolution.mul(u.radius);
+		const boxDistance = length(max(abs(vUv.mul(planePixels).sub(halfPlanePixels)).sub(halfPlanePixels).add(cornerRadius), 0)).sub(cornerRadius);
+		const cornerAlpha = float(1).sub(smoothstep(0, 1, boxDistance));
+		this._mapNode = texture(emptyTexture, zoomedUv);
+		const colorUniform = materialReference("color", "color");
+		const color = this._mapNode.mul(vec4(colorUniform, cornerAlpha));
+		const luma = dot(color.rgb, vec3(.299, .587, .114));
+		this.colorNode = vec4(mix(color.rgb, vec3(luma), u.grayscale), color.a);
+		Object.defineProperty(this, "map", {
+			configurable: true,
+			get: () => this._map,
+			set: (value) => {
+				this._map = value;
+				this._mapNode.value = value ?? emptyTexture;
+			}
+		});
+	}
+	copy(source) {
+		const { colorNode } = this;
+		super.copy(source);
+		this.colorNode = colorNode;
+		this.scale.copy(source.scale);
+		this.imageBounds.copy(source.imageBounds);
+		this.map = source.map;
+		return this;
+	}
+	get scale() {
+		return this._imageUniforms.scale.value;
+	}
+	get imageBounds() {
+		return this._imageUniforms.imageBounds.value;
+	}
+	get resolution() {
+		return this._imageUniforms.resolution.value;
+	}
+	set resolution(value) {
+		this._imageUniforms.resolution.value = value;
+	}
+	get zoom() {
+		return this._imageUniforms.zoom.value;
+	}
+	set zoom(value) {
+		this._imageUniforms.zoom.value = value;
+	}
+	get radius() {
+		return this._imageUniforms.radius.value;
+	}
+	set radius(value) {
+		this._imageUniforms.radius.value = value;
+	}
+	get grayscale() {
+		return this._imageUniforms.grayscale.value;
+	}
+	set grayscale(value) {
+		this._imageUniforms.grayscale.value = value;
+	}
+};
+//#endregion
+//#region src/core/objects/Image/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = ["scale"];
+const _hoisted_2$2 = ["args"];
+//#endregion
+//#region src/core/objects/Image/webgpu.vue
+var webgpu_default$3 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		segments: {
+			type: Number,
+			required: false
+		},
+		scale: {
+			type: [Number, Array],
+			required: false
+		},
+		color: {
+			type: null,
+			required: false
+		},
+		zoom: {
+			type: Number,
+			required: false
+		},
+		radius: {
+			type: Number,
+			required: false
+		},
+		grayscale: {
+			type: Number,
+			required: false
+		},
+		toneMapped: {
+			type: Boolean,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		opacity: {
+			type: Number,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		},
+		texture: {
+			type: null,
+			required: false
+		},
+		url: {
+			type: null,
+			required: false
+		}
+	}, imageDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		extend({ ImageNodeMaterial });
+		const imageRef = shallowRef();
+		const { materialProps, scale } = useImage(props);
+		__expose({ instance: imageRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresMesh", {
+				ref_key: "imageRef",
+				ref: imageRef,
+				scale: unref(scale)
+			}, [
+				renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresPlaneGeometry", { args: [
+					1,
+					1,
+					props.segments,
+					props.segments
+				] }, null, 8, _hoisted_2$2)]),
+				createCommentVNode(" WebGPURenderer tone-maps the whole frame, so it ignores `toneMapped`. "),
+				createElementVNode("TresImageNodeMaterial", normalizeProps(guardReactiveProps(unref(materialProps))), null, 16)
+			], 8, _hoisted_1$4);
+		};
+	}
+});
+//#endregion
+//#region src/core/shapes/Grid/GridNodeMaterial.ts
+var GridNodeMaterial = class extends MeshBasicNodeMaterial {
+	gridUniforms = {
+		cellSize: uniform(gridDefaults.cellSize),
+		sectionSize: uniform(gridDefaults.sectionSize),
+		fadeDistance: uniform(gridDefaults.fadeDistance),
+		fadeStrength: uniform(gridDefaults.fadeStrength),
+		fadeFrom: uniform(gridDefaults.fadeFrom),
+		cellThickness: uniform(gridDefaults.cellThickness),
+		sectionThickness: uniform(gridDefaults.sectionThickness),
+		cellColor: uniform(new Color$1(gridDefaults.cellColor)),
+		sectionColor: uniform(new Color$1(gridDefaults.sectionColor)),
+		infiniteGrid: uniform(Number(gridDefaults.infiniteGrid)),
+		followCamera: uniform(Number(gridDefaults.followCamera)),
+		worldCamProjPosition: uniform(new Vector3$1()),
+		worldPlanePosition: uniform(new Vector3$1())
+	};
+	constructor() {
+		super();
+		this.transparent = true;
+		this.fog = false;
+		const u = this.gridUniforms;
+		const scaled = positionGeometry.xzy.mul(mix(float(1), u.fadeDistance.add(1), u.infiniteGrid));
+		const cameraOffset = u.worldCamProjPosition.sub(u.worldPlanePosition).mul(u.followCamera);
+		const world = modelWorldMatrix.mul(vec4(scaled, 1)).xyz.add(cameraOffset);
+		const local = modelWorldMatrixInverse.mul(vec4(world, 1)).xyz;
+		this.positionNode = local;
+		const localPosition = local.toVarying();
+		const worldPosition = world.toVarying();
+		const getGrid = (size, thickness) => {
+			const r = localPosition.xz.div(size);
+			const grid = abs(fract(r.sub(.5)).sub(.5)).div(fwidth(r));
+			const line = min(grid.x, grid.y).add(1).sub(thickness);
+			return float(1).sub(min(line, 1));
+		};
+		this.colorNode = Fn(() => {
+			const g1 = getGrid(u.cellSize, u.cellThickness).toVar();
+			const g2 = getGrid(u.sectionSize, u.sectionThickness).toVar();
+			const from = u.worldCamProjPosition.mul(u.fadeFrom);
+			const d = float(1).sub(min(distance(from, worldPosition).div(u.fadeDistance), 1));
+			const color = mix(u.cellColor, u.sectionColor, min(1, u.sectionThickness.mul(g2)));
+			const alpha = g1.add(g2).mul(pow(d, u.fadeStrength)).toVar();
+			alpha.assign(mix(alpha.mul(.75), alpha, g2));
+			If(alpha.lessThanEqual(0), () => {
+				Discard();
+			});
+			return vec4(color, alpha);
+		})();
+	}
+	get cellSize() {
+		return this.gridUniforms.cellSize.value;
+	}
+	set cellSize(value) {
+		this.gridUniforms.cellSize.value = value;
+	}
+	get sectionSize() {
+		return this.gridUniforms.sectionSize.value;
+	}
+	set sectionSize(value) {
+		this.gridUniforms.sectionSize.value = value;
+	}
+	get fadeDistance() {
+		return this.gridUniforms.fadeDistance.value;
+	}
+	set fadeDistance(value) {
+		this.gridUniforms.fadeDistance.value = value;
+	}
+	get fadeStrength() {
+		return this.gridUniforms.fadeStrength.value;
+	}
+	set fadeStrength(value) {
+		this.gridUniforms.fadeStrength.value = value;
+	}
+	get fadeFrom() {
+		return this.gridUniforms.fadeFrom.value;
+	}
+	set fadeFrom(value) {
+		this.gridUniforms.fadeFrom.value = value;
+	}
+	get cellThickness() {
+		return this.gridUniforms.cellThickness.value;
+	}
+	set cellThickness(value) {
+		this.gridUniforms.cellThickness.value = value;
+	}
+	get sectionThickness() {
+		return this.gridUniforms.sectionThickness.value;
+	}
+	set sectionThickness(value) {
+		this.gridUniforms.sectionThickness.value = value;
+	}
+	get cellColor() {
+		return this.gridUniforms.cellColor.value;
+	}
+	get sectionColor() {
+		return this.gridUniforms.sectionColor.value;
+	}
+	get infiniteGrid() {
+		return this.gridUniforms.infiniteGrid.value === 1;
+	}
+	set infiniteGrid(value) {
+		this.gridUniforms.infiniteGrid.value = value ? 1 : 0;
+	}
+	get followCamera() {
+		return this.gridUniforms.followCamera.value === 1;
+	}
+	set followCamera(value) {
+		this.gridUniforms.followCamera.value = value ? 1 : 0;
+	}
+	get worldCamProjPosition() {
+		return this.gridUniforms.worldCamProjPosition.value;
+	}
+	get worldPlanePosition() {
+		return this.gridUniforms.worldPlanePosition.value;
+	}
+};
+//#endregion
+//#region src/core/shapes/Grid/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = ["args"];
+//#endregion
+//#region src/core/shapes/Grid/webgpu.vue
+var webgpu_default = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		cellSize: {
+			type: Number,
+			required: false
+		},
+		cellThickness: {
+			type: Number,
+			required: false
+		},
+		cellColor: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false
+		},
+		sectionSize: {
+			type: Number,
+			required: false
+		},
+		sectionThickness: {
+			type: Number,
+			required: false
+		},
+		sectionColor: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false
+		},
+		followCamera: {
+			type: Boolean,
+			required: false
+		},
+		infiniteGrid: {
+			type: Boolean,
+			required: false
+		},
+		fadeDistance: {
+			type: Number,
+			required: false
+		},
+		fadeStrength: {
+			type: Number,
+			required: false
+		},
+		fadeFrom: {
+			type: Number,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		},
+		args: {
+			type: Array,
+			required: false
+		}
+	}, gridDefaults),
+	setup(__props) {
+		const props = __props;
+		extend({ GridNodeMaterial });
+		const mesh = shallowRef(new Mesh());
+		const { materialProps } = useGrid(props, mesh);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" The material sets `transparent` itself. WebGPU needs no `extensions-derivatives`. "), createElementVNode("TresMesh", {
+				ref_key: "mesh",
+				ref: mesh,
+				"frustum-culled": false
+			}, [createElementVNode("TresGridNodeMaterial", normalizeProps(guardReactiveProps(unref(materialProps))), null, 16), createElementVNode("TresPlaneGeometry", { args: props.args }, null, 8, _hoisted_1$3)], 512)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/utils/useInstancedPoints.ts
+function useInstancedPoints(positions, material, { dynamic = false } = {}) {
+	const createNode = dynamic ? instancedDynamicBufferAttribute : instancedBufferAttribute;
+	const attribute = shallowRef(new InstancedBufferAttribute(positions.value, 3));
+	const positionNode = shallowRef(createNode(attribute.value));
+	const count = computed(() => attribute.value.count);
+	watch(positions, (array) => {
+		if (array.length === attribute.value.array.length) {
+			attribute.value.array = array;
+			attribute.value.needsUpdate = true;
+			return;
+		}
+		attribute.value = new InstancedBufferAttribute(array, 3);
+		positionNode.value = createNode(attribute.value);
+		if (material.value) material.value.needsUpdate = true;
+	});
+	return {
+		attribute,
+		positionNode,
+		count
+	};
+}
+//#endregion
+//#region src/core/staging/Precipitation/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["count"];
+const _hoisted_2$1 = ["position-node"];
+//#endregion
+//#region src/core/staging/Precipitation/webgpu.vue
+var webgpu_default$9 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		size: {
+			type: Number,
+			required: false
+		},
+		area: {
+			type: Array,
+			required: false
+		},
+		color: {
+			type: null,
+			required: false
+		},
+		map: {
+			type: [
+				String,
+				Object,
+				null
+			],
+			required: false
+		},
+		alphaMap: {
+			type: [
+				String,
+				Object,
+				null
+			],
+			required: false
+		},
+		alphaTest: {
+			type: Number,
+			required: false
+		},
+		opacity: {
+			type: Number,
+			required: false
+		},
+		count: {
+			type: Number,
+			required: false
+		},
+		speed: {
+			type: Number,
+			required: false
+		},
+		randomness: {
+			type: Number,
+			required: false
+		},
+		depthWrite: {
+			type: Boolean,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		sizeAttenuation: {
+			type: Boolean,
+			required: false
+		}
+	}, precipitationDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		extend({ PointsNodeMaterial });
+		const materialRef = shallowRef();
+		const { positions, materialProps, onPositionsMoved } = usePrecipitation(props, materialRef);
+		const { attribute, positionNode, count } = useInstancedPoints(positions, materialRef, { dynamic: true });
+		onPositionsMoved(() => {
+			attribute.value.needsUpdate = true;
+		});
+		const spriteRef = shallowRef();
+		__expose({ instance: spriteRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresSprite", {
+				ref_key: "spriteRef",
+				ref: spriteRef,
+				count: unref(count),
+				"frustum-culled": false
+			}, [createElementVNode("TresPointsNodeMaterial", mergeProps({
+				ref_key: "materialRef",
+				ref: materialRef
+			}, unref(materialProps), { "position-node": unref(positionNode) }), null, 16, _hoisted_2$1)], 8, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/core/staging/Sparkles/SparklesNodeMaterial.ts
+var SparklesNodeMaterial = class extends PointsNodeMaterial {
+	yFor;
+	sparklesUniforms = {
+		uNormal: uniform(Object3D$1.DEFAULT_UP.clone()),
+		uPixelRatio: uniform(1),
+		uNormalThreshold: uniform(sparklesDefaults.normalThreshold),
+		uTime: uniform(0),
+		uCooldownRatio: uniform(toCooldownRatio(sparklesDefaults.cooldownSec, sparklesDefaults.lifetimeSec)),
+		uSize: uniform(sparklesDefaults.size),
+		uAlpha: uniform(sparklesDefaults.alpha),
+		uOffset: uniform(sparklesDefaults.offset),
+		uSurfaceDistance: uniform(sparklesDefaults.surfaceDistance),
+		uNoiseScale: uniform(toNoiseScale(sparklesDefaults.noiseScale, sparklesDefaults.lifetimeSec)),
+		uScaleNoise: uniform(sparklesDefaults.scaleNoise),
+		uOffsetNoise: uniform(sparklesDefaults.offsetNoise),
+		uLifetimeNoise: uniform(sparklesDefaults.lifetimeNoise),
+		uMixColor: uniform(sparklesDefaults.mixColor),
+		uMixAlpha: uniform(sparklesDefaults.mixAlpha),
+		uMixOffset: uniform(sparklesDefaults.mixOffset),
+		uMixSize: uniform(sparklesDefaults.mixSize),
+		uMixSurfaceDistance: uniform(sparklesDefaults.mixSurfaceDistance),
+		uMixNoise: uniform(sparklesDefaults.mixNoise)
+	};
+	mapNode = texture(useEmptyDataTexture());
+	infoNode = texture(useEmptyDataTexture());
+	constructor(yFor) {
+		super();
+		this.yFor = yFor;
+		this.fog = false;
+		this.sizeAttenuation = false;
+	}
+	setGeometry(geometry) {
+		const position = geometry.getAttribute("position");
+		if (!position) return 0;
+		const normal = geometry.getAttribute("normal");
+		const index = geometry.getIndex();
+		const { start, count: rangeCount } = geometry.drawRange;
+		const first = Math.max(0, start);
+		const count = Math.max(0, Math.min(index ? index.count : position.count, first + rangeCount) - first);
+		const positions = new Float32Array(count * 3);
+		const normals = new Float32Array(count * 3);
+		for (let i = 0; i < count; i++) {
+			const vertex = index ? index.getX(first + i) : first + i;
+			positions.set([
+				position.getX(vertex),
+				position.getY(vertex),
+				position.getZ(vertex)
+			], i * 3);
+			if (normal) normals.set([
+				normal.getX(vertex),
+				normal.getY(vertex),
+				normal.getZ(vertex)
+			], i * 3);
+		}
+		this.buildNodes(instancedBufferAttribute(new InstancedBufferAttribute$1(positions, 3)), instancedBufferAttribute(new InstancedBufferAttribute$1(normals, 3)));
+		return count;
+	}
+	buildNodes(position, normal) {
+		const u = this.sparklesUniforms;
+		const yFor = this.yFor;
+		const info = (x, row) => this.infoNode.sample(vec2(x, row)).level(float(0));
+		const normalP = smoothstep(u.uNormalThreshold, 1, dot(normal, u.uNormal).mul(.5).add(.5));
+		const lifetimeNoise = u.uLifetimeNoise.mul(mix(normalP, 1, u.uMixNoise));
+		const t = u.uTime.add(position.x.mul(u.uNoiseScale)).add(position.y.mul(10).mul(u.uNoiseScale)).add(position.z.mul(7.3).mul(u.uNoiseScale)).add(sin(lifetimeNoise.mul(position.x.add(position.y.mul(13)))).mul(lifetimeNoise));
+		const lifetimeP = max(float(-1e-4), mix(u.uCooldownRatio.negate(), cos(t).mul(lifetimeNoise).add(1), fract(t)));
+		const progress = (mixFactor) => mix(normalP, lifetimeP, mixFactor);
+		const surfaceDistance = info(progress(u.uMixSurfaceDistance), yFor.sequenceSurfaceDistance).x.mul(u.uSurfaceDistance);
+		const noise = info(progress(u.uMixNoise), yFor.sequenceNoise).xyz;
+		const offset = info(progress(u.uMixOffset), yFor.sequenceOffset).xyz.mul(2).sub(1).mul(u.uOffset);
+		const wave = t.mul(u.uNoiseScale).mul(10);
+		const world = modelWorldMatrix.mul(vec4(position.add(normal.mul(surfaceDistance)), 1)).xyz.add(vec3(cos(wave), sin(wave), cos(wave)).mul(u.uOffsetNoise.mul(.2)).mul(noise)).add(offset);
+		this.positionNode = modelWorldMatrixInverse.mul(vec4(world, 1)).xyz;
+		const viewZ = cameraViewMatrix.mul(vec4(world, 1)).z;
+		const pointSize = float(2).mul(info(progress(u.uMixSize), yFor.sequenceSize).x).mul(mix(float(1), abs(sin(t.mul(u.uNoiseScale).add(position.x.mul(13.9)).add(position.y.mul(73.1)))), u.uScaleNoise)).mul(u.uSize).mul(float(100).div(viewZ.negate())).mul(u.uPixelRatio);
+		const hidden = pointSize.lessThan(.6).or(lifetimeP.lessThan(0));
+		this.sizeNode = select(hidden, float(0), pointSize.div(screenDPR));
+		const color = info(progress(u.uMixColor), yFor.sequenceColor).mul(info(progress(u.uMixAlpha), yFor.sequenceAlpha).x).mul(u.uAlpha);
+		this.colorNode = color.toVarying().mul(this.mapNode.sample(vec2(uv().x, uv().y.oneMinus())));
+		this.needsUpdate = true;
+	}
+	get uMap() {
+		return this.mapNode.value;
+	}
+	set uMap(value) {
+		this.mapNode.value = value;
+	}
+	get uInfoTexture() {
+		return this.infoNode.value;
+	}
+	set uInfoTexture(value) {
+		this.infoNode.value = value;
+	}
+	get uNormal() {
+		return this.sparklesUniforms.uNormal.value;
+	}
+	get uPixelRatio() {
+		return this.sparklesUniforms.uPixelRatio.value;
+	}
+	set uPixelRatio(value) {
+		this.sparklesUniforms.uPixelRatio.value = value;
+	}
+	get uNormalThreshold() {
+		return this.sparklesUniforms.uNormalThreshold.value;
+	}
+	set uNormalThreshold(value) {
+		this.sparklesUniforms.uNormalThreshold.value = value;
+	}
+	get uTime() {
+		return this.sparklesUniforms.uTime.value;
+	}
+	set uTime(value) {
+		this.sparklesUniforms.uTime.value = value;
+	}
+	get uCooldownRatio() {
+		return this.sparklesUniforms.uCooldownRatio.value;
+	}
+	set uCooldownRatio(value) {
+		this.sparklesUniforms.uCooldownRatio.value = value;
+	}
+	get uSize() {
+		return this.sparklesUniforms.uSize.value;
+	}
+	set uSize(value) {
+		this.sparklesUniforms.uSize.value = value;
+	}
+	get uAlpha() {
+		return this.sparklesUniforms.uAlpha.value;
+	}
+	set uAlpha(value) {
+		this.sparklesUniforms.uAlpha.value = value;
+	}
+	get uOffset() {
+		return this.sparklesUniforms.uOffset.value;
+	}
+	set uOffset(value) {
+		this.sparklesUniforms.uOffset.value = value;
+	}
+	get uSurfaceDistance() {
+		return this.sparklesUniforms.uSurfaceDistance.value;
+	}
+	set uSurfaceDistance(value) {
+		this.sparklesUniforms.uSurfaceDistance.value = value;
+	}
+	get uNoiseScale() {
+		return this.sparklesUniforms.uNoiseScale.value;
+	}
+	set uNoiseScale(value) {
+		this.sparklesUniforms.uNoiseScale.value = value;
+	}
+	get uScaleNoise() {
+		return this.sparklesUniforms.uScaleNoise.value;
+	}
+	set uScaleNoise(value) {
+		this.sparklesUniforms.uScaleNoise.value = value;
+	}
+	get uOffsetNoise() {
+		return this.sparklesUniforms.uOffsetNoise.value;
+	}
+	set uOffsetNoise(value) {
+		this.sparklesUniforms.uOffsetNoise.value = value;
+	}
+	get uLifetimeNoise() {
+		return this.sparklesUniforms.uLifetimeNoise.value;
+	}
+	set uLifetimeNoise(value) {
+		this.sparklesUniforms.uLifetimeNoise.value = value;
+	}
+	get uMixColor() {
+		return this.sparklesUniforms.uMixColor.value;
+	}
+	set uMixColor(value) {
+		this.sparklesUniforms.uMixColor.value = value;
+	}
+	get uMixAlpha() {
+		return this.sparklesUniforms.uMixAlpha.value;
+	}
+	set uMixAlpha(value) {
+		this.sparklesUniforms.uMixAlpha.value = value;
+	}
+	get uMixOffset() {
+		return this.sparklesUniforms.uMixOffset.value;
+	}
+	set uMixOffset(value) {
+		this.sparklesUniforms.uMixOffset.value = value;
+	}
+	get uMixSize() {
+		return this.sparklesUniforms.uMixSize.value;
+	}
+	set uMixSize(value) {
+		this.sparklesUniforms.uMixSize.value = value;
+	}
+	get uMixSurfaceDistance() {
+		return this.sparklesUniforms.uMixSurfaceDistance.value;
+	}
+	set uMixSurfaceDistance(value) {
+		this.sparklesUniforms.uMixSurfaceDistance.value = value;
+	}
+	get uMixNoise() {
+		return this.sparklesUniforms.uMixNoise.value;
+	}
+	set uMixNoise(value) {
+		this.sparklesUniforms.uMixNoise.value = value;
+	}
+};
+//#endregion
+//#region src/core/staging/Sparkles/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["object"];
+//#endregion
+//#region src/core/staging/Sparkles/webgpu.vue
+var webgpu_default$10 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		map: {
+			type: [Object, String],
+			required: false
+		},
+		geometry: {
+			type: Object,
+			required: false
+		},
+		directionalLight: {
+			type: Object,
+			required: false
+		},
+		lifetimeSec: {
+			type: Number,
+			required: false
+		},
+		cooldownSec: {
+			type: Number,
+			required: false
+		},
+		normalThreshold: {
+			type: Number,
+			required: false
+		},
+		noiseScale: {
+			type: Number,
+			required: false
+		},
+		scaleNoise: {
+			type: Number,
+			required: false
+		},
+		offsetNoise: {
+			type: Number,
+			required: false
+		},
+		lifetimeNoise: {
+			type: Number,
+			required: false
+		},
+		size: {
+			type: Number,
+			required: false
+		},
+		alpha: {
+			type: Number,
+			required: false
+		},
+		offset: {
+			type: Number,
+			required: false
+		},
+		surfaceDistance: {
+			type: Number,
+			required: false
+		},
+		sequenceColor: {
+			type: null,
+			required: false
+		},
+		sequenceAlpha: {
+			type: [Number, Array],
+			required: false
+		},
+		sequenceOffset: {
+			type: [
+				Object,
+				Array,
+				Number
+			],
+			required: false
+		},
+		sequenceNoise: {
+			type: [
+				Object,
+				Array,
+				Number
+			],
+			required: false
+		},
+		sequenceSize: {
+			type: [Number, Array],
+			required: false
+		},
+		sequenceSurfaceDistance: {
+			type: [Number, Array],
+			required: false
+		},
+		mixColor: {
+			type: Number,
+			required: false
+		},
+		mixAlpha: {
+			type: Number,
+			required: false
+		},
+		mixOffset: {
+			type: Number,
+			required: false
+		},
+		mixSize: {
+			type: Number,
+			required: false
+		},
+		mixSurfaceDistance: {
+			type: Number,
+			required: false
+		},
+		mixNoise: {
+			type: Number,
+			required: false
+		},
+		blending: {
+			type: null,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		depthWrite: {
+			type: Boolean,
+			required: false
+		}
+	}, sparklesDefaults),
+	setup(__props, { expose: __expose }) {
+		const { object: sparkles } = useSparkles(__props, (yFor) => {
+			const material = new SparklesNodeMaterial(yFor);
+			const sprite = new Sprite(material);
+			sprite.geometry = sprite.geometry.clone();
+			sprite.count = 0;
+			sprite.frustumCulled = false;
+			sprite.raycast = () => {};
+			return {
+				object: sprite,
+				material,
+				setGeometry: (geometry) => {
+					sprite.count = material.setGeometry(geometry);
+				}
+			};
+		});
+		__expose({ instance: sparkles });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("primitive", { object: unref(sparkles) }, null, 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/core/staging/Stars/webgpu.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["count"];
+const _hoisted_2 = ["position-node"];
+//#endregion
+//#region src/core/staging/Stars/webgpu.vue
+var webgpu_default$11 = /* @__PURE__ */ defineComponent({
+	__name: "webgpu",
+	props: /*@__PURE__*/ mergeDefaults({
+		size: {
+			type: Number,
+			required: false
+		},
+		sizeAttenuation: {
+			type: Boolean,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		alphaTest: {
+			type: Number,
+			required: false
+		},
+		count: {
+			type: Number,
+			required: false
+		},
+		depth: {
+			type: Number,
+			required: false
+		},
+		radius: {
+			type: Number,
+			required: false
+		},
+		alphaMap: {
+			type: [Object, null],
+			required: false
+		}
+	}, starsDefaults),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		extend({ PointsNodeMaterial });
+		const materialRef = shallowRef();
+		const { positions, materialProps } = useStars(props, materialRef);
+		const { positionNode, count } = useInstancedPoints(positions, materialRef);
+		const starsRef = shallowRef();
+		__expose({ instance: starsRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresSprite", {
+				ref_key: "starsRef",
+				ref: starsRef,
+				count: unref(count),
+				"frustum-culled": false
+			}, [createElementVNode("TresPointsNodeMaterial", mergeProps({
+				ref_key: "materialRef",
+				ref: materialRef
+			}, unref(materialProps), { "position-node": unref(positionNode) }), null, 16, _hoisted_2)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Align_default as Align, component_default as AnimatedSprite, Backdrop_default as Backdrop, BaseCameraControls, Billboard_default as Billboard, component_default$1 as Bounds, Box_default as Box, CameraControls_default as CameraControls, CameraShake_default as CameraShake, Circle_default as Circle, CircleShadow_default as CircleShadow, Cone_default as Cone, component_default$2 as CubeCamera, Cylinder_default as Cylinder, Decal_default as Decal, DecalDebugUI_default as DecalDebugUI, Dodecahedron_default as Dodecahedron, Edges_default as Edges, component_default$3 as Environment, component_default$4 as FBXModel, component_default$5 as Fbo, Fit_default as Fit, component_default$6 as GLTFModel, GlobalAudio, GradientTexture_default as GradientTexture, webgpu_default as Grid, component_default$7 as Helper, webgpu_default$1 as HolographicMaterial, webgpu_default$2 as Html, INSTANCES_INJECTION_KEY, Icosahedron_default as Icosahedron, webgpu_default$3 as Image, Instance_default as Instance, Instances_default as Instances, KeyboardControls_default as KeyboardControls, LOD_default as LOD, Levioso_default as Levioso, lightformer_default as Lightformer, MERGED_INJECTION_KEY, MapControls_default as MapControls, MarchingCube_default as MarchingCube, MarchingCubes_default as MarchingCubes, MarchingPlane_default as MarchingPlane, component_default$8 as Mask, Merged_default as Merged, webgpu_default$4 as MeshDiscardMaterial, webgpu_default$5 as MeshGlassMaterial, webgpu_default$6 as MeshWobbleMaterial, MouseParallax_default as MouseParallax, Octahedron_default as Octahedron, OrbitControls_default as OrbitControls, webgpu_default$7 as Outline, Plane_default as Plane, webgpu_default$8 as PointMaterial, PointerLockControls_default as PointerLockControls, PositionMesh, PositionalAudio_default as PositionalAudio, webgpu_default$9 as Precipitation, component_default$9 as RandomizedLights, Ring_default as Ring, RoundedBox_default as RoundedBox, RoundedPlane_default as RoundedPlane, component_default$10 as Sampler, ScreenQuad_default as ScreenQuad, ScreenSizer_default as ScreenSizer, ScreenSpace_default as ScreenSpace, ScrollControls_default as ScrollControls, Smoke_default as Smoke, webgpu_default$10 as Sparkles, Sphere_default as Sphere, webgpu_default$11 as Stars, Stats, StatsGl, Superformula_default as Superformula, Tetrahedron_default as Tetrahedron, Text3D_default as Text3D, Torus_default as Torus, TorusKnot_default as TorusKnot, TransformControls_default as TransformControls, Tube_default as Tube, component_default$11 as UseSVG, component_default$12 as UseTexture, ensureTextureNames, extractBindingPosition, getTextureAspect, getTextureName, hasSetter, invalidateDecalGeometry, pick, useAnimations, useBVH, useDecalEditor, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useHelper, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };