@tresjs/cientos 5.1.1 → 5.1.2

package/dist/trescientos.js

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/cientos
-  * version: v5.1.1
+  * version: v5.1.2
   * (c) 2025
   * description: Collection of useful helpers and fully functional, ready-made abstractions for Tres
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -10,10 +10,9 @@ import { buildGraph, extend, logError, logWarning, normalizeColor, normalizeVect
 import * as THREE from "three";
 import { AdditiveBlending, AlwaysStencilFunc, AnimationMixer, Audio, AudioListener, AudioLoader, BackSide, Box2, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Camera, CatmullRomCurve3, ClampToEdgeWrapping, Clock, Color, CubeCamera, CubeReflectionMapping, CubeTextureLoader, CubicBezierCurve3, DataTexture, DefaultLoadingManager, DepthTexture, DirectionalLight, DoubleSide, EdgesGeometry, EqualStencilFunc, EquirectangularReflectionMapping, Euler, FloatType, FramebufferTexture, FrontSide, Group, HalfFloatType, IcosahedronGeometry, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, KeepStencilOp, LOD, LinearFilter, MOUSE, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NotEqualStencilFunc, Object3D, OrthographicCamera, PerspectiveCamera, Plane, PlaneGeometry, Points, PointsMaterial, QuadraticBezierCurve3, Quaternion, REVISION, RGBAFormat, RawShaderMaterial, Raycaster, RepeatWrapping, ReplaceStencilOp, Scene, ShaderChunk, ShaderMaterial, ShapeGeometry, SkinnedMesh, Sphere, Spherical, TOUCH, TangentSpaceNormalMap, Texture, TextureLoader, UVMapping, Uniform, UniformsUtils, UnsignedByteType, Vector2, Vector3, Vector4, VideoTexture, WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from "three";
 import { tryOnScopeDispose, useDebounceFn, useElementSize, useEventListener, useMagicKeys, useMouse, useScroll, useWindowScroll, useWindowSize, watchThrottled, whenever } from "@vueuse/core";
-import { DRACOLoader, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, RoundedBoxGeometry, SVGLoader, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
+import { DRACOLoader, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, RoundedBoxGeometry, SVGLoader, SimplexNoise, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
 import BaseCameraControls, { default as CameraControls } from "camera-controls";
 import CustomShaderMaterial from "three-custom-shader-material/vanilla";
-import { WebGPURenderer } from "three/webgpu";
 import StatsImpl from "stats.js";
 import StatsGlImpl from "stats-gl";
 
@@ -916,7 +915,7 @@ function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
 * NOTE: Source:
 * https://threejs.org/docs/?q=material#api/en/materials/Material.transparent
 */
-const imageMaterialImpl = shaderMaterial({
+const ImageMaterialImpl = /* @__PURE__ */ shaderMaterial({
 	color: /* @__PURE__ */ new Color("white"),
 	scale: /* @__PURE__ */ new Vector2(1, 1),
 	imageBounds: /* @__PURE__ */ new Vector2(1, 1),
@@ -954,14 +953,14 @@ const imageMaterialImpl = shaderMaterial({
     vec2 aspect(vec2 size) {
       return size / min(size.x, size.y);
     }
-    
+
     const float PI = 3.14159265;
-      
+
     // from https://iquilezles.org/articles/distfunctions
     float udRoundBox( vec2 p, vec2 b, float r ) {
       return length(max(abs(p)-b+r,0.0))-r;
     }
-  
+
     void main() {
       vec2 s = aspect(scale);
       vec2 i = aspect(imageBounds);
@@ -971,25 +970,24 @@ const imageMaterialImpl = shaderMaterial({
       vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
       vec2 uv = vUv * s / new + offset;
       vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
-  
+
       vec2 res = vec2(scale * resolution);
       vec2 halfRes = 0.5 * res;
-      float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    
+      float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);
         vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));
       gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);
-      
+
       #include <tonemapping_fragment>
       #include <colorspace_fragment>
     }
   `);
-var ImageMaterialImpl_default = imageMaterialImpl;
 
 //#endregion
 //#region src/core/abstractions/Image/ImageMaterial.vue?vue&type=script&setup=true&lang.ts
 var ImageMaterial_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ImageMaterial",
 	setup(__props, { expose: __expose }) {
-		extend({ ImageMaterial: ImageMaterialImpl_default });
+		extend({ ImageMaterial: ImageMaterialImpl });
 		const materialRef = shallowRef();
 		__expose({ instance: materialRef });
 		return (_ctx, _cache) => {
@@ -1085,12 +1083,10 @@ var component_vue_vue_type_script_setup_true_lang_default$16 = /* @__PURE__ */ d
 		const planeBounds = computed(() => Array.isArray(props.scale) ? [props.scale[0], props.scale[1]] : [props.scale, props.scale]);
 		const imageBounds = computed(() => [texture$1.value?.image?.width ?? 0, texture$1.value?.image?.height ?? 0]);
 		const resolution = computed(() => Math.max(size.width.value, size.height.value));
+		const { state, isLoading } = useTexture(props.url);
 		watchEffect(() => {
 			if (props.texture) texture$1.value = props.texture;
-			else {
-				const { state: t } = useTexture(props.url);
-				texture$1.value = t.value;
-			}
+			if (!isLoading.value) texture$1.value = state.value;
 		});
 		const scale = computed(() => Array.isArray(props.scale) ? [...props.scale, 1] : props.scale);
 		__expose({ instance: imageRef });
@@ -2221,7 +2217,7 @@ var MouseParallax_default = MouseParallax_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/core/abstractions/Outline/OutlineMaterialImpl.ts
-const OutlineMaterialImpl = shaderMaterial({
+const OutlineMaterialImpl = /* @__PURE__ */ shaderMaterial({
 	screenspace: false,
 	color: new Color("black"),
 	opacity: 1,
@@ -2253,7 +2249,7 @@ const OutlineMaterialImpl = shaderMaterial({
      #endif
      if (screenspace) {
        vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
-       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
      } else {
        vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;
        vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;
@@ -2268,7 +2264,6 @@ const OutlineMaterialImpl = shaderMaterial({
      #include <tonemapping_fragment>
      #include <colorspace_fragment>
    }`);
-var OutlineMaterialImpl_default = OutlineMaterialImpl;
 
 //#endregion
 //#region src/core/abstractions/Outline/component.vue?vue&type=script&setup=true&lang.ts
@@ -2330,7 +2325,7 @@ var component_vue_vue_type_script_setup_true_lang_default$13 = /* @__PURE__ */ d
 		const props = __props;
 		const groupRef = shallowRef();
 		__expose({ instance: groupRef });
-		const material = new OutlineMaterialImpl_default({ ...props });
+		const material = new OutlineMaterialImpl({ ...props });
 		const contextSize = new Vector2(1, 1);
 		let oldAngle = 0;
 		let oldGeometry = null;
@@ -2623,6 +2618,7 @@ var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const reflectorRef = shallowRef();
 		extend$1({ Reflector });
 		const { color, textureWidth, textureHeight, clipBias, multisample, shader } = toRefs(props);
+		const colorValue = computed(() => new Color(color.value));
 		watch(props, () => {
 			invalidate();
 		});
@@ -2638,7 +2634,7 @@ var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					multisample: unref(multisample),
 					shader: unref(shader)
 				}],
-				"material-uniforms-color-value": unref(color)
+				"material-uniforms-color-value": colorValue.value
 			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [5, 5] }, null, -1))])], 8, _hoisted_1$50);
 		};
 	}
@@ -5504,6 +5500,7 @@ var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ define
 			root: MeshHolographicMaterialClass,
 			constructor: HolographicMaterialParameters_default
 		});
+		const colorValue = computed(() => new Color(props.hologramColor));
 		const { onBeforeRender } = useLoop();
 		onBeforeRender(() => {
 			MeshHolographicMaterialClass.value?.update();
@@ -5518,7 +5515,7 @@ var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ define
 				"uniforms-hologramBrightness-value": props.hologramBrightness,
 				"uniforms-scanlineSize-value": props.scanlineSize,
 				"uniforms-signalSpeed-value": props.signalSpeed,
-				"uniforms-hologramColor-value": props.hologramColor,
+				"uniforms-hologramColor-value": colorValue.value,
 				"uniforms-hologramOpacity-value": props.hologramOpacity,
 				"uniforms-blinkFresnelOnly-value": props.blinkFresnelOnly,
 				enableAdditive: props.enableAdditive,
@@ -6429,7 +6426,7 @@ var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ define
 		onBeforeRender(({ renderer, scene, camera }) => {
 			const parent = materialRef.value?.__tres?.parent;
 			if (!parent) return;
-			if (renderer instanceof WebGPURenderer) {
+			if ("isWebGPURenderer" in renderer && renderer.isWebGPURenderer === true) {
 				console.warn("MeshReflectionMaterial: WebGPURenderer is not supported yet");
 				return;
 			}
@@ -10726,6 +10723,111 @@ var Smoke_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 //#region src/core/staging/Smoke.vue
 var Smoke_default = Smoke_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/core/staging/CameraShake.vue?vue&type=script&setup=true&lang.ts
+var CameraShake_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CameraShake",
+	props: {
+		intensity: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		decay: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		decayRate: {
+			type: Number,
+			required: false,
+			default: .65
+		},
+		maxYaw: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		maxPitch: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		maxRoll: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		yawFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		pitchFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		rollFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { intensity, decay, decayRate, maxYaw, maxPitch, maxRoll, yawFrequency, pitchFrequency, rollFrequency } = toRefs(props);
+		const { camera, controls } = useTresContext();
+		let cleanUpFn = null;
+		const currentIntensity = shallowRef(props.intensity);
+		const initialRotation = shallowRef(camera.activeCamera.value?.rotation.clone());
+		const yawNoise = new SimplexNoise();
+		const pitchNoise = new SimplexNoise();
+		const rollNoise = new SimplexNoise();
+		function constrainIntensity() {
+			if (currentIntensity.value < 0) currentIntensity.value = 0;
+			if (currentIntensity.value > 1) currentIntensity.value = 1;
+		}
+		watch(intensity, (newVal) => {
+			currentIntensity.value = newVal;
+			constrainIntensity();
+		});
+		function updateInitialRotation() {
+			if (camera.activeCamera.value) initialRotation.value = camera.activeCamera.value.rotation.clone();
+		}
+		watch([camera.activeCamera, controls], () => {
+			cleanUpFn?.();
+			if (controls.value) cleanUpFn = useEventListener(controls.value, "change", updateInitialRotation);
+			updateInitialRotation();
+		});
+		function setIntensity(v) {
+			currentIntensity.value = Math.min(1, Math.max(0, v));
+		}
+		const { onBeforeRender } = useLoop();
+		onBeforeRender(({ elapsed, delta }) => {
+			const cam = camera.activeCamera.value;
+			if (!cam) return;
+			if (!decay.value && currentIntensity.value < intensity.value) setIntensity(currentIntensity.value + decayRate.value * delta);
+			const shakeFactor = currentIntensity.value * currentIntensity.value;
+			const yaw = maxYaw.value * shakeFactor * yawNoise.noise(elapsed * yawFrequency.value, 1);
+			const pitch = maxPitch.value * shakeFactor * pitchNoise.noise(elapsed * pitchFrequency.value, 1);
+			const roll = maxRoll.value * shakeFactor * rollNoise.noise(elapsed * rollFrequency.value, 1);
+			cam.rotation.set(initialRotation.value.x + pitch, initialRotation.value.y + yaw, initialRotation.value.z + roll);
+			if (decay.value) setIntensity(currentIntensity.value - decayRate.value * delta);
+		});
+		onUnmounted(() => {
+			cleanUpFn?.();
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/core/staging/CameraShake.vue
+var CameraShake_default = CameraShake_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/core/staging/SoftShadows.vue?vue&type=script&setup=true&lang.ts
 const PCSSGetShadow = `
@@ -11520,7 +11622,8 @@ const _hoisted_3$1 = [
 	"castShadow",
 	"shadow-bias",
 	"shadow-normalBias",
-	"shadow-mapSize"
+	"shadow-mapSize-x",
+	"shadow-mapSize-y"
 ];
 const _hoisted_4$1 = ["position", "intensity"];
 const _hoisted_5 = ["position"];
@@ -11688,7 +11791,8 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						castShadow: !!__props.shadows,
 						"shadow-bias": __props.shadows?.bias ?? 0,
 						"shadow-normalBias": __props.shadows?.normalBias ?? 0,
-						"shadow-mapSize": __props.shadows?.size ?? 1024
+						"shadow-mapSize-x": __props.shadows?.size ?? 1024,
+						"shadow-mapSize-y": __props.shadows?.size ?? 1024
 					}, null, 8, _hoisted_3$1),
 					createElementVNode("TresPointLight", {
 						position: lightingFillComputed.value,
@@ -12201,4 +12305,4 @@ function extractBindingPosition(binding) {
 }
 
 //#endregion
-export { component_default as AccumulativeShadows, Align_default as Align, component_default$1 as AnimatedSprite, Backdrop_default as Backdrop, BakeShadows, BaseCameraControls, Billboard_default as Billboard, component_default$2 as Bounds, Box_default as Box, CameraControls_default as CameraControls, CatmullRomCurve3_default as CatmullRomCurve3, Circle_default as Circle, CircleShadow_default as CircleShadow, Cone_default as Cone, ContactShadows_default as ContactShadows, component_default$3 as CubeCamera, CubicBezierLine_default as CubicBezierLine, customShaderMaterial_default as CustomShaderMaterial, Cylinder_default as Cylinder, Dodecahedron_default as Dodecahedron, Edges_default as Edges, component_default$4 as Environment, component_default$5 as FBXModel, component_default$6 as Fbo, Fit_default as Fit, component_default$7 as GLTFModel, GlobalAudio, GradientTexture_default as GradientTexture, Grid_default as Grid, component_default$8 as Helper, holographicMaterial_default as HolographicMaterial, HTML_default as Html, Icosahedron_default as Icosahedron, component_default$9 as Image, KeyboardControls_default as KeyboardControls, LOD_default as LOD, component_default$10 as Lensflare, Levioso_default as Levioso, lightformer_default as Lightformer, Line2_default as Line2, MapControls_default as MapControls, MarchingCube_default as MarchingCube, MarchingCubes_default as MarchingCubes, MarchingPlane_default as MarchingPlane, component_default$11 as Mask, meshDiscardMaterial_default as MeshDiscardMaterial, meshGlassMaterial_default as MeshGlassMaterial, meshReflectionMaterial_default as MeshReflectionMaterial, meshWobbleMaterial_default as MeshWobbleMaterial, MouseParallax_default as MouseParallax, Ocean_default as Ocean, Octahedron_default as Octahedron, OrbitControls_default as OrbitControls, component_default$12 as Outline, Plane_default as Plane, component_default$13 as PointMaterial, PointerLockControls_default as PointerLockControls, PositionalAudio_default as PositionalAudio, Precipitation_default as Precipitation, QuadraticBezierLine_default as QuadraticBezierLine, component_default$14 as RandomizedLights, Reflector_default as Reflector, Ring_default as Ring, RoundedBox_default as RoundedBox, component_default$15 as Sampler, ScreenQuad_default as ScreenQuad, ScreenSizer_default as ScreenSizer, ScreenSpace_default as ScreenSpace, ScrollControls_default as ScrollControls, Sky_default as Sky, Smoke_default as Smoke, SoftShadows_default as SoftShadows, component_default$16 as Sparkles, Sphere_default as Sphere, Stage_default as Stage, Stars_default 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$17 as UseSVG, component_default$18 as UseTexture, extractBindingPosition, hasSetter, pick, useAnimations, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };
+export { component_default as AccumulativeShadows, Align_default as Align, component_default$1 as AnimatedSprite, Backdrop_default as Backdrop, BakeShadows, BaseCameraControls, Billboard_default as Billboard, component_default$2 as Bounds, Box_default as Box, CameraControls_default as CameraControls, CameraShake_default as CameraShake, CatmullRomCurve3_default as CatmullRomCurve3, Circle_default as Circle, CircleShadow_default as CircleShadow, Cone_default as Cone, ContactShadows_default as ContactShadows, component_default$3 as CubeCamera, CubicBezierLine_default as CubicBezierLine, customShaderMaterial_default as CustomShaderMaterial, Cylinder_default as Cylinder, Dodecahedron_default as Dodecahedron, Edges_default as Edges, component_default$4 as Environment, component_default$5 as FBXModel, component_default$6 as Fbo, Fit_default as Fit, component_default$7 as GLTFModel, GlobalAudio, GradientTexture_default as GradientTexture, Grid_default as Grid, component_default$8 as Helper, holographicMaterial_default as HolographicMaterial, HTML_default as Html, Icosahedron_default as Icosahedron, component_default$9 as Image, KeyboardControls_default as KeyboardControls, LOD_default as LOD, component_default$10 as Lensflare, Levioso_default as Levioso, lightformer_default as Lightformer, Line2_default as Line2, MapControls_default as MapControls, MarchingCube_default as MarchingCube, MarchingCubes_default as MarchingCubes, MarchingPlane_default as MarchingPlane, component_default$11 as Mask, meshDiscardMaterial_default as MeshDiscardMaterial, meshGlassMaterial_default as MeshGlassMaterial, meshReflectionMaterial_default as MeshReflectionMaterial, meshWobbleMaterial_default as MeshWobbleMaterial, MouseParallax_default as MouseParallax, Ocean_default as Ocean, Octahedron_default as Octahedron, OrbitControls_default as OrbitControls, component_default$12 as Outline, Plane_default as Plane, component_default$13 as PointMaterial, PointerLockControls_default as PointerLockControls, PositionalAudio_default as PositionalAudio, Precipitation_default as Precipitation, QuadraticBezierLine_default as QuadraticBezierLine, component_default$14 as RandomizedLights, Reflector_default as Reflector, Ring_default as Ring, RoundedBox_default as RoundedBox, component_default$15 as Sampler, ScreenQuad_default as ScreenQuad, ScreenSizer_default as ScreenSizer, ScreenSpace_default as ScreenSpace, ScrollControls_default as ScrollControls, Sky_default as Sky, Smoke_default as Smoke, SoftShadows_default as SoftShadows, component_default$16 as Sparkles, Sphere_default as Sphere, Stage_default as Stage, Stars_default 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$17 as UseSVG, component_default$18 as UseTexture, extractBindingPosition, hasSetter, pick, useAnimations, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "type": "module",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@tresjs/core": "5.1.1",
+    "@tresjs/core": "5.2.0",
     "three": ">=0.133",
     "vue": ">=3.5.17"
   },
@@ -73,8 +73,8 @@
     "vite-plugin-glsl": "^1.5.1",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^3.1.1",
-    "@tresjs/core": "5.1.1",
-    "@tresjs/eslint-config": "1.5.1"
+    "@tresjs/eslint-config": "1.5.1",
+    "@tresjs/core": "5.2.0"
   },
   "nx": {
     "implicitDependencies": [