@tresjs/core 5.8.3 → 5.9.1

package/dist/template-compiler-options.d.mts

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.3
+  * version: v5.9.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.mjs

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.3
+  * version: v5.9.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -10,7 +10,8 @@ const whitelist = [
 	"TresCanvas",
 	"TresCanvasContext",
 	"TresLeches",
-	"TresScene"
+	"TresScene",
+	"TresPortal"
 ];
 const templateCompilerOptions = { template: { compilerOptions: { isCustomElement: (tag) => (/^Tres[A-Z]/.test(tag) || tag.startsWith("tres-")) && !whitelist.includes(tag) || tag === "primitive" } } };
 var template_compiler_options_default = templateCompilerOptions;

package/dist/tres.d.ts

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.3
+  * version: v5.9.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue14 from "vue";
+import * as vue20 from "vue";
 import { App, ComputedRef, DefineComponent, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, VNode, VNodeRef } from "vue";
 import * as THREE from "three";
 import { BufferGeometry, Camera, Color, ColorRepresentation, ColorSpace, Event, Fog, Group, Layers, Light, Loader, LoadingManager, Material, Mesh, Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, Scene, ShadowMapType, ToneMapping, Vector3, WebGLRenderer } from "three";
@@ -87,7 +87,7 @@ interface UseCameraReturn {
   /**
    * The list of cameras
    */
-  cameras: Ref<TresCamera[]>;
+  cameras: ShallowRef<TresCamera[]>;
   /**
    * Register a camera
    * @param camera - The camera to register
@@ -247,10 +247,10 @@ interface RendererOptions {
    * Type of shadow map to use for shadow calculations
    * - `BasicShadowMap`: Basic shadow map.
    * - `PCFShadowMap`: Percentage-Closer Filtering shadow map.
-   * - `PCFSoftShadowMap`: Percentage-Closer Filtering soft shadow map.
+   * - `PCFSoftShadowMap`: Deprecated on WebGL, three falls back to `PCFShadowMap`. Still supported on WebGPU.
    * - `VSMShadowMap`: Variance shadow map.
    * @see {@link https://threejs.org/docs/#api/en/constants/Renderer}
-   * @default PCFSoftShadowMap (Opinionated default by TresJS)
+   * @default PCFShadowMap on WebGL, PCFSoftShadowMap on WebGPU (Opinionated default by TresJS)
    */
   shadowMapType?: ShadowMapType;
   /**
@@ -323,11 +323,11 @@ declare function useRendererManager({
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   onError: _vueuse_core0.EventHookOn<TresRendererError>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue14.ComputedRef<boolean>;
+  canBeInvalidated: vue20.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
-  isInitialized: vue14.Ref<boolean, boolean>;
-  error: vue14.Ref<TresRendererError | null, TresRendererError | null>;
+  isInitialized: vue20.Ref<boolean, boolean>;
+  error: vue20.Ref<TresRendererError | null, TresRendererError | null>;
 };
 type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 //#endregion
@@ -354,8 +354,18 @@ interface TresContext {
   camera: UseCameraReturn;
   controls: Ref<TresControl | null>;
   renderer: UseRendererManagerReturn;
+  /**
+   * Whether the active renderer is a Three.js WebGPU `Renderer` (as opposed to a
+   * `WebGLRenderer`). Reactive so downstream components can branch on it without
+   * re-deriving it from `renderer.instance`.
+   *
+   * Note: this reflects the renderer instance, not the active backend — a
+   * `WebGPURenderer` running on its WebGL2 fallback still reports `true`.
+   */
+  isWebGPU: ComputedRef<boolean>;
   events: ReturnType<typeof useEventManager>;
 }
+declare const INJECTION_KEY = "useTres";
 declare const useTresContextProvider: (args_0: {
   scene: TresScene;
   canvas: MaybeRef<HTMLCanvasElement>;
@@ -445,17 +455,18 @@ interface TresScene extends THREE.Scene {
   };
 }
 interface MathRepresentation {
-  set(...args: number[] | [THREE.ColorRepresentation]): any;
+  set(...args: number[]): any;
 }
 interface VectorRepresentation extends MathRepresentation {
   setScalar(s: number): any;
 }
+type MathTypes = MathRepresentation | THREE.Euler | THREE.Color;
 interface VectorCoordinates {
   x: number;
   y: number;
   z: number;
 }
-type MathType<T extends MathRepresentation | THREE.Euler> = T extends THREE.Color ? ConstructorParameters<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | Parameters<T['set']> | number | VectorCoordinates : T | Parameters<T['set']>;
+type MathType<T extends MathTypes> = T extends THREE.Color ? ConstructorParameters<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | Parameters<T['set']> | number | VectorCoordinates : T | Parameters<T['set']>;
 type VectorLike$1<VectorClass extends THREE.Vector2 | THREE.Vector3 | THREE.Vector4> = VectorClass | Parameters<VectorClass['set']> | Readonly<Parameters<VectorClass['set']>> | Parameters<VectorClass['setScalar']>[0];
 type TresVector2 = VectorLike$1<THREE.Vector2>;
 type TresVector3 = VectorLike$1<THREE.Vector3>;
@@ -472,7 +483,7 @@ type TresContextWithClock = TresContext & {
   delta: number;
   elapsed: number;
 };
-type WithMathProps<P> = { [K in keyof P]: P[K] extends MathRepresentation | THREE.Euler ? MathType<P[K]> : P[K] };
+type WithMathProps<P> = { [K in keyof P]: P[K] extends MathTypes ? MathType<P[K]> : P[K] };
 interface RaycastableRepresentation {
   raycast: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;
 }
@@ -514,8 +525,8 @@ interface TresObjectMap {
 declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
-declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue14.PublicProps & __VLS_PrettifyLocal<{
+declare const __VLS_export$3: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue20.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -539,20 +550,20 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue14.UnwrapRef<T>;
+      state: vue20.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
   emit: ((evt: "error", error: unknown) => void) & ((evt: "loaded", result: T) => void);
-}>) => vue14.VNode & {
+}>) => vue20.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default$2: typeof __VLS_export$2;
+declare const _default$3: typeof __VLS_export$3;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/composables/useGraph/index.d.ts
-declare const useGraph: (object: MaybeRef<TresObject | undefined>) => vue14.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef<TresObject | undefined>) => vue20.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -603,7 +614,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue14.ShallowRef<boolean>>;
+  isActive: Readonly<vue20.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -704,16 +715,17 @@ type ContextEmits = {
   beforeLoop: [context: TresContextWithClock];
   loop: [context: TresContextWithClock];
 } & { [key in TresPointerEventName]: [event: TresPointerEvent] };
-type __VLS_Props = ContextProps & {
+type __VLS_Props$1 = ContextProps & {
   canvas: HTMLCanvasElement;
 };
-type __VLS_Slots$1 = {
+type __VLS_Slots$2 = {
   default: () => any;
 };
-declare const __VLS_base$1: vue14.DefineComponent<__VLS_Props, {
-  context: vue14.ShallowRef<TresContext, TresContext>;
+declare const __VLS_base$2: vue20.DefineComponent<__VLS_Props$1, {
+  context: vue20.ShallowRef<TresContext, TresContext>;
   dispose: () => void;
-}, {}, {}, {}, vue14.ComponentOptionsMixin, vue14.ComponentOptionsMixin, {
+}, {}, {}, {}, vue20.ComponentOptionsMixin, vue20.ComponentOptionsMixin, {
+  render: (context: TresContext) => any;
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -730,10 +742,10 @@ declare const __VLS_base$1: vue14.DefineComponent<__VLS_Props, {
   ready: (context: TresContext) => any;
   error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
-  render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue14.PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, vue20.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
+  onRender?: ((context: TresContext) => any) | undefined;
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -750,13 +762,12 @@ declare const __VLS_base$1: vue14.DefineComponent<__VLS_Props, {
   onReady?: ((context: TresContext) => any) | undefined;
   onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
-  onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue14.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$1: typeof __VLS_export$1;
-type __VLS_WithSlots$1<T, S> = T & {
+}>, {}, {}, {}, {}, string, vue20.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
+declare const _default$1: typeof __VLS_export$2;
+type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -769,10 +780,11 @@ interface TresCanvasInstance {
   get context(): TresContext | undefined;
   dispose: () => void;
 }
-type __VLS_Slots = {
+type __VLS_Slots$1 = {
   default: () => any;
 };
-declare const __VLS_base: vue14.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue14.ComponentOptionsMixin, vue14.ComponentOptionsMixin, {
+declare const __VLS_base$1: vue20.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue20.ComponentOptionsMixin, vue20.ComponentOptionsMixin, {
+  render: (context: TresContext) => any;
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -789,10 +801,10 @@ declare const __VLS_base: vue14.DefineComponent<ContextProps, TresCanvasInstance
   ready: (context: TresContext) => any;
   error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
-  render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue14.PublicProps, Readonly<ContextProps> & Readonly<{
+}, string, vue20.PublicProps, Readonly<ContextProps> & Readonly<{
+  onRender?: ((context: TresContext) => any) | undefined;
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -809,29 +821,49 @@ declare const __VLS_base: vue14.DefineComponent<ContextProps, TresCanvasInstance
   onReady?: ((context: TresContext) => any) | undefined;
   onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
-  onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
+  alpha: boolean;
+  logarithmicDepthBuffer: boolean;
+  toneMapping: THREE.ToneMapping;
+  depth: boolean;
+  stencil: boolean;
+  clearColor: THREE.ColorRepresentation;
   windowSize: boolean;
   enableProvideBridge: boolean;
+  customRendererOptions: TresCustomRendererOptions;
   antialias: boolean;
-  stencil: boolean;
-  depth: boolean;
-  logarithmicDepthBuffer: boolean;
   preserveDrawingBuffer: boolean;
-  alpha: boolean;
   failIfMajorPerformanceCaveat: boolean;
-  clearColor: THREE.ColorRepresentation;
   clearAlpha: number;
   shadows: boolean;
-  toneMapping: THREE.ToneMapping;
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-}, {}, {}, {}, string, vue14.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue20.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/TresPortal.vue.d.ts
+type __VLS_Props = {
+  /** Target Object3D/Scene to reparent children into. */
+  to: Object3D;
+  /** When true, children render in place (main scene) instead of the target. */
+  disabled?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: vue20.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue20.ComponentOptionsMixin, vue20.ComponentOptionsMixin, {}, string, vue20.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue20.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+declare const _default$2: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -1170,6 +1202,34 @@ declare const isTresPrimitive: (value: unknown) => value is TresPrimitive;
  * ```
  */
 declare const isTresInstance: (value: unknown) => value is TresInstance;
+/**
+ * Type guard to check if a value is a Three.js WebGPU `Renderer`.
+ *
+ * Identifies the renderer *instance*, not the active backend: a `WebGPURenderer`
+ * can run on a WebGPU **or** a WebGL2 fallback backend, and this returns `true`
+ * for both. That is the right granularity for branching on capabilities —
+ * `NodeMaterial` works on either backend, while a GLSL `ShaderMaterial` works on
+ * neither under the WebGPU renderer.
+ * @param value - The value to check
+ * @returns True if the value is a WebGPU `Renderer` instance, false otherwise
+ * @example
+ * ```ts
+ * const { renderer } = useTresContext()
+ * if (isWebGPURenderer(renderer.instance)) {
+ *   // TypeScript knows renderer.instance is a WebGPU Renderer here
+ * }
+ * ```
+ */
+declare const isWebGPURenderer: (value: unknown) => value is Renderer;
+/**
+ * Type guard to check if a value is a Three.js `WebGLRenderer`.
+ * @param value - The value to check
+ * @returns True if the value is a `WebGLRenderer` instance, false otherwise
+ * @see {@link isWebGPURenderer}
+ */
+declare const isWebGLRenderer: (value: unknown) => value is WebGLRenderer & {
+  isWebGLRenderer: true;
+};
 //#endregion
 //#region src/index.d.ts
 interface TresOptions {
@@ -1181,4 +1241,4 @@ interface TresPlugin {
 }
 declare const plugin: TresPlugin;
 //#endregion
-export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, _default$1 as TresCanvasContext, type TresCanvasEmits, type TresCanvasInstance, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, TresComponents, type TresContext, TresContextWithClock, TresControl, type TresCustomRendererOptions, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererError, TresRendererErrorCode, TresRendererSetupContext, TresScene, TresTimer, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$2 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, createTimer, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, INJECTION_KEY, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, _default$1 as TresCanvasContext, type TresCanvasEmits, type TresCanvasInstance, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, TresComponents, type TresContext, TresContextWithClock, TresControl, type TresCustomRendererOptions, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, _default$2 as TresPortal, TresPrimitive, TresQuaternion, TresRenderer, TresRendererError, TresRendererErrorCode, TresRendererSetupContext, TresScene, TresTimer, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$3 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, createTimer, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, isWebGLRenderer, isWebGPURenderer, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/dist/tres.js

@@ -1,13 +1,13 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.3
+  * version: v5.9.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, triggerRef, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
-import { ACESFilmicToneMapping, ArrowHelper, BufferAttribute, Color, DirectionalLightHelper, DoubleSide, HemisphereLightHelper, Layers, Material, MathUtils, Mesh, MeshBasicMaterial, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
+import { ACESFilmicToneMapping, ArrowHelper, BufferAttribute, Color, DirectionalLightHelper, DoubleSide, HemisphereLightHelper, Layers, Material, MathUtils, Mesh, MeshBasicMaterial, PCFShadowMap, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
 import { createEventHook, createInjectionState, promiseTimeout, refDebounced, tryOnScopeDispose, unrefElement, useAsyncState, useDevicePixelRatio, useElementSize, useFps, useMemory, useRafFn, useTimeout, useWindowSize, whenever } from "@vueuse/core";
 import { camel, isEqual, isFunction, isNumber, isObject, isString, isUndefined } from "radashi";
 import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
@@ -15,7 +15,7 @@ import { setupDevtoolsPlugin } from "@vue/devtools-api";
 import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js";
 
 //#region package.json
-var version = "5.8.3";
+var version = "5.9.1";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -265,6 +265,32 @@ const isTresPrimitive = createTypeGuard("isPrimitive");
 * ```
 */
 const isTresInstance = (value) => isTresObject(value) && "__tres" in value;
+/**
+* Type guard to check if a value is a Three.js WebGPU `Renderer`.
+*
+* Identifies the renderer *instance*, not the active backend: a `WebGPURenderer`
+* can run on a WebGPU **or** a WebGL2 fallback backend, and this returns `true`
+* for both. That is the right granularity for branching on capabilities —
+* `NodeMaterial` works on either backend, while a GLSL `ShaderMaterial` works on
+* neither under the WebGPU renderer.
+* @param value - The value to check
+* @returns True if the value is a WebGPU `Renderer` instance, false otherwise
+* @example
+* ```ts
+* const { renderer } = useTresContext()
+* if (isWebGPURenderer(renderer.instance)) {
+*   // TypeScript knows renderer.instance is a WebGPU Renderer here
+* }
+* ```
+*/
+const isWebGPURenderer = createTypeGuard("isRenderer");
+/**
+* Type guard to check if a value is a Three.js `WebGLRenderer`.
+* @param value - The value to check
+* @returns True if the value is a `WebGLRenderer` instance, false otherwise
+* @see {@link isWebGPURenderer}
+*/
+const isWebGLRenderer = createTypeGuard("isWebGLRenderer");
 
 //#endregion
 //#region src/utils/array.ts
@@ -577,7 +603,7 @@ var component_default = component_vue_vue_type_script_setup_true_lang_default;
 * @returns The camera management functions and state
 */
 const useCameraManager = ({ sizes }) => {
-	const cameras = ref([]);
+	const cameras = shallowRef([]);
 	const activeCamera = computed(() => cameras.value[0]);
 	/**
 	* Set the active camera
@@ -596,6 +622,7 @@ const useCameraManager = ({ sizes }) => {
 	const registerCamera = (camera, active = false) => {
 		if (cameras.value.some(({ uuid }) => uuid === camera.uuid)) return;
 		cameras.value.push(camera);
+		triggerRef(cameras);
 		if (active) setActiveCamera(camera.uuid);
 	};
 	/**
@@ -857,7 +884,6 @@ function useRendererManager({ scene, canvas, options, fpsLimit, contextParts: {
 		if (toValue(options.renderMode) === "on-demand") invalidate();
 	};
 	const isModeAlways = computed(() => toValue(options.renderMode) === "always");
-	const isRenderer = (value) => isObject(value) && "isRenderer" in value && Boolean(value.isRenderer);
 	const readyEventHook = createEventHook();
 	const errorEventHook = createEventHook();
 	let hasTriggeredReady = false;
@@ -865,7 +891,7 @@ function useRendererManager({ scene, canvas, options, fpsLimit, contextParts: {
 	const error = ref(null);
 	const initializeRenderer = async () => {
 		try {
-			if (isRenderer(renderer)) await renderer.init();
+			if (isWebGPURenderer(renderer)) await renderer.init();
 			isInitialized.value = true;
 		} catch (e) {
 			const rendererError = new TresRendererError(e instanceof Error ? e.message : "Unknown error", "INITIALIZATION_FAILED", { cause: e instanceof Error ? e : void 0 });
@@ -964,9 +990,8 @@ Error details: ${rendererError.message}`, rendererError);
 	});
 	watchEffect(() => {
 		if (!isInitialized.value) return;
-		const value = options.shadowMapType;
-		if (value === void 0) return;
-		renderer.shadowMap.type = value;
+		const fallback = isWebGPURenderer(renderer) ? PCFSoftShadowMap : PCFShadowMap;
+		renderer.shadowMap.type = options.shadowMapType ?? fallback;
 		forceMaterialUpdate();
 	});
 	onUnmounted(() => {
@@ -1047,6 +1072,7 @@ const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene,
 		scene: localScene,
 		camera,
 		renderer,
+		isWebGPU: computed(() => isWebGPURenderer(renderer.instance)),
 		controls: ref(null),
 		extend,
 		events
@@ -1067,7 +1093,7 @@ const useTresContext = () => {
 //#endregion
 //#region src/composables/useTres/index.ts
 function useTres() {
-	const { scene, renderer, camera, sizes, controls, extend: extend$1, events } = useTresContext();
+	const { scene, renderer, camera, sizes, controls, extend: extend$1, events, isWebGPU } = useTresContext();
 	return {
 		scene,
 		renderer: renderer.instance,
@@ -1076,6 +1102,7 @@ function useTres() {
 		controls,
 		extend: extend$1,
 		events,
+		isWebGPU,
 		invalidate: renderer.invalidate,
 		advance: renderer.advance
 	};
@@ -2261,7 +2288,8 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		customRendererOptions: {
 			type: Object,
-			required: false
+			required: false,
+			default: () => ({ primitivePrefix: "" })
 		},
 		antialias: {
 			type: Boolean,
@@ -2337,7 +2365,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		shadowMapType: {
 			type: null,
 			required: false,
-			default: PCFSoftShadowMap
+			default: void 0
 		},
 		useLegacyLights: {
 			type: Boolean,
@@ -2480,11 +2508,40 @@ const whitelist = [
 	"TresCanvas",
 	"TresCanvasContext",
 	"TresLeches",
-	"TresScene"
+	"TresScene",
+	"TresPortal"
 ];
 const templateCompilerOptions = { template: { compilerOptions: { isCustomElement: (tag) => (/^Tres[A-Z]/.test(tag) || tag.startsWith("tres-")) && !whitelist.includes(tag) || tag === "primitive" } } };
 var template_compiler_options_default = templateCompilerOptions;
 
+//#endregion
+//#region src/components/TresPortal.vue?vue&type=script&setup=true&lang.ts
+var TresPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TresPortal",
+	props: {
+		to: {
+			type: Object,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, {
+				to: __props.to,
+				disabled: __props.disabled
+			}, [renderSlot(_ctx.$slots, "default")], 8, ["to", "disabled"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/TresPortal.vue
+var TresPortal_default = TresPortal_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/directives/vDistanceTo.ts
 let arrowHelper = null;
@@ -2575,4 +2632,4 @@ const plugin = { install(app) {
 var src_default = plugin;
 
 //#endregion
-export { DevtoolsMessenger, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresRendererError, component_default as UseLoader, buildGraph, catalogue, createTimer, src_default as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, template_compiler_options_default as templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { DevtoolsMessenger, INJECTION_KEY, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresPortal_default as TresPortal, TresRendererError, component_default as UseLoader, buildGraph, catalogue, createTimer, src_default as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, isWebGLRenderer, isWebGPURenderer, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, template_compiler_options_default as templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.8.3",
+  "version": "5.9.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -89,7 +89,7 @@
     "build": "tsdown",
     "build:analyze": "ANALYZE=true tsdown",
     "test": "vitest",
-    "test:ci": "vitest run",
+    "test:ci": "vitest run --typecheck",
     "test:ui": "vitest --ui --coverage.enabled=true",
     "coverage": "vitest run --coverage",
     "lint": "eslint .",