@react-three/fiber 7.0.15 → 7.0.19

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @react-three/fiber
 
+## 7.0.19
+
+### Patch Changes
+
+- 7aa2eab: fix: remove zustand subcribe selector
+
+## 7.0.18
+
+### Patch Changes
+
+- 6780f58: fix unmount pointer capture
+
+## 7.0.17
+
+### Patch Changes
+
+- 894c550: fix: event count
+
+## 7.0.16
+
+### Patch Changes
+
+- c7a4220: patch: applyprops returns the same instance
+
 ## 7.0.15
 
 ### Patch Changes

package/dist/declarations/src/core/events.d.ts

@@ -53,6 +53,10 @@ export interface EventManager<TTarget> {
     connect?: (target: TTarget) => void;
     disconnect?: () => void;
 }
+export interface PointerCaptureTarget {
+    intersection: Intersection;
+    target: Element;
+}
 export declare function removeInteractivity(store: UseStore<RootState>, object: THREE.Object3D): void;
 export declare function createEvents(store: UseStore<RootState>): {
     handlePointer: (name: string) => (event: DomEvent) => void;

package/dist/declarations/src/core/renderer.d.ts

@@ -12,9 +12,8 @@ export declare type LocalState = {
     objects: Instance[];
     parent: Instance | null;
     primitive?: boolean;
-    handlers: {
-        count: number;
-    } & Partial<EventHandlers>;
+    eventCount: number;
+    handlers: Partial<EventHandlers>;
     memoizedProps: {
         [key: string]: any;
     };
@@ -57,6 +56,6 @@ declare let extend: (objects: object) => void;
 declare function prepare<T = THREE.Object3D>(object: T, state?: Partial<LocalState>): T;
 declare function createRenderer<TCanvas>(roots: Map<TCanvas, Root>): {
     reconciler: Reconciler.Reconciler<unknown, unknown, unknown, unknown, unknown>;
-    applyProps: (instance: Instance, data: InstanceProps | DiffSet) => void;
+    applyProps: (instance: Instance, data: InstanceProps | DiffSet) => Instance;
 };
 export { prepare, createRenderer, extend };

package/dist/declarations/src/core/store.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as ReactThreeFiber from '../three-types';
 import { GetState, SetState, UseStore } from 'zustand';
 import { Instance, InstanceProps } from './renderer';
-import { DomEvent, EventManager, ThreeEvent } from './events';
+import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
@@ -37,7 +37,10 @@ export declare type Performance = {
     debounce: number;
     regress: () => void;
 };
-export declare const isRenderer: (def: THREE.WebGLRenderer) => def is THREE.WebGLRenderer;
+export declare type Renderer = {
+    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
+};
+export declare const isRenderer: (def: Renderer) => boolean;
 export declare const isOrthographicCamera: (def: THREE.Camera) => def is THREE.OrthographicCamera;
 export declare type InternalState = {
     active: boolean;
@@ -47,7 +50,7 @@ export declare type InternalState = {
     interaction: THREE.Object3D[];
     hovered: Map<string, DomEvent>;
     subscribers: Subscription[];
-    capturedMap: Map<number, Map<THREE.Object3D, Intersection>>;
+    capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
     initialClick: [x: number, y: number];
     initialHits: THREE.Object3D[];
     subscribe: (callback: React.MutableRefObject<RenderCallback>, priority?: number) => () => void;

package/dist/declarations/src/web/index.d.ts

@@ -2,7 +2,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { UseStore } from 'zustand';
-import { StoreProps, context, RootState, Size } from '../core/store';
+import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
 import { extend, Root } from '../core/renderer';
 import { addEffect, addAfterEffect, addTail } from '../core/loop';
 import { createPointerEvents as events } from './events';
@@ -11,9 +11,13 @@ import { EventManager } from '../core/events';
 declare const roots: Map<Element, Root>;
 declare const modes: readonly ["legacy", "blocking", "concurrent"];
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").InstanceProps | import("../core/renderer").DiffSet) => void;
+declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").InstanceProps | import("../core/renderer").DiffSet) => import("../core/renderer").Instance;
+declare type Properties<T> = Pick<T, {
+    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
+}[keyof T]>;
+declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
 export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: THREE.WebGLRenderer | Partial<THREE.WebGLRendererParameters>;
+    gl?: GLProps;
     events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
     mode?: typeof modes[number];

package/dist/react-three-fiber.cjs.dev.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var THREE = require('three');
 var React = require('react');
 var create = require('zustand');
-var shallow = require('zustand/shallow');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var useAsset = require('use-asset');
@@ -37,7 +36,6 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
-var shallow__default = /*#__PURE__*/_interopDefault(shallow);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
@@ -76,6 +74,23 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
+/** Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+
+  if (captureData) {
+    captures.delete(obj); // If this was the last capturing object for this pointer
+
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
+    }
+  }
+}
 
 function removeInteractivity(store, object) {
   const {
@@ -89,6 +104,9 @@ function removeInteractivity(store, object) {
       internal.hovered.delete(key);
     }
   });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
@@ -168,7 +186,7 @@ function createEvents(store) {
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -187,7 +205,9 @@ function createEvents(store) {
     // intersect.
 
     if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      intersections.push(...internal.capturedMap.get(event.pointerId).values());
+      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+        intersections.push(captureData.intersection);
+      }
     }
 
     return intersections;
@@ -205,9 +225,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-
-      const releasePointerCapture = id => event.target.releasePointerCapture(id);
-
       const localState = {
         stopped: false
       };
@@ -220,23 +237,36 @@ function createEvents(store) {
         };
 
         const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, hit);
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
           } else {
             // if the pointerId was not previously captured, we create a map
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, hit]]));
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
           } // Call the original event now
           event.target.setPointerCapture(id);
+        };
+
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
         }; // Add native event props
 
 
-        let extractEventProps = {};
+        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in Object.getPrototypeOf(event)) {
+        for (let prop in event) {
           let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
 
@@ -305,13 +335,12 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
-        var _r3f3;
-
         const eventObject = hoveredObj.eventObject;
-        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers != null && handlers.count) {
+        if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -333,9 +362,8 @@ function createEvents(store) {
       case 'onLostPointerCapture':
         return event => {
           if ('pointerId' in event) {
-            // this will be a problem if one target releases the pointerId
-            // and another one is still keeping it, as the line below
-            // indifferently deletes all capturing references.
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed.
             store.getState().internal.capturedMap.delete(event.pointerId);
           }
 
@@ -374,12 +402,11 @@ function createEvents(store) {
 
       if (isPointerMove) cancelPointer(hits);
       handleIntersects(hits, event, delta, data => {
-        var _r3f4;
-
         const eventObject = data.eventObject;
-        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
 
-        if (!(handlers != null && handlers.count)) return;
+        if (!(instance != null && instance.eventCount)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -422,9 +449,9 @@ function createEvents(store) {
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f5;
+      var _r3f3;
 
-      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
+      return (_r3f3 = object.__r3f) == null ? void 0 : _r3f3.handlers.onPointerMissed == null ? void 0 : _r3f3.handlers.onPointerMissed(event);
     });
   }
 
@@ -475,9 +502,8 @@ function prepare(object, state) {
     instance.__r3f = {
       root: null,
       memoizedProps: {},
-      handlers: {
-        count: 0
-      },
+      eventCount: 0,
+      handlers: {},
       objects: [],
       parent: null,
       ...state
@@ -538,7 +564,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
+    var _instance$__r3f3, _root$getState, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -548,7 +574,7 @@ function createRenderer(roots) {
       memoized,
       changes
     } = isDiffSet(data) ? data : diffProps(instance, data);
-    const prevHandlers = (_localState$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
+    const prevHandlers = localState.eventCount; // Prepare memoized props
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
@@ -587,7 +613,7 @@ function createRenderer(roots) {
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
-        localState.handlers.count = Object.keys(localState.handlers).length;
+        localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
           // If value is an array
@@ -617,16 +643,17 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
+    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
       // Pre-emptively remove the instance from the interaction manager
       const index = rootState.internal.interaction.indexOf(instance);
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
-      if (localState.handlers.count) rootState.internal.interaction.push(instance);
+      if (localState.eventCount) rootState.internal.interaction.push(instance);
     } // Call the update lifecycle when it is being updated
 
 
     if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+    return instance;
   }
 
   function invalidateInstance(instance) {
@@ -812,7 +839,7 @@ function createRenderer(roots) {
         } else if (is.fun(detachFn)) {
           detachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
         parentInstance.remove(child); // Remove interactivity
@@ -1030,7 +1057,7 @@ function createRenderer(roots) {
   };
 }
 
-const isRenderer = def => def && !!def.render;
+const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
@@ -1058,11 +1085,11 @@ const createStore = (applyProps, invalidate, advance, props) => {
   if (shadows) {
     gl.shadowMap.enabled = true;
     if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-  } // Set color management
+  } // Set color preferences
 
 
-  if (!linear) gl.outputEncoding = THREE__namespace.sRGBEncoding;
-  if (!flat) gl.toneMapping = THREE__namespace.ACESFilmicToneMapping; // clock.elapsedTime is updated using advance(timestamp)
+  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
+  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
 
   if (frameloop === 'never') {
     clock.stop();
@@ -1251,38 +1278,45 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = rootState.getState();
+
+    if (size !== oldSize || viewport.dpr !== oldDpr) {
+      // https://github.com/pmndrs/react-three-fiber/issues/92
+      // Do not mess with the camera if it belongs to the user
+      if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow__default['default']);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1637,13 +1671,23 @@ const {
   applyProps
 } = createRenderer();
 
-const createRendererInstance = (gl, canvas) => isRenderer(gl) ? gl : new THREE__namespace.WebGLRenderer({
-  powerPreference: 'high-performance',
-  canvas: canvas,
-  antialias: true,
-  alpha: true,
-  ...gl
-});
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = new THREE__namespace.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
 
 function render(element, canvas, {
   gl,

package/dist/react-three-fiber.cjs.prod.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var THREE = require('three');
 var React = require('react');
 var create = require('zustand');
-var shallow = require('zustand/shallow');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var useAsset = require('use-asset');
@@ -37,7 +36,6 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
-var shallow__default = /*#__PURE__*/_interopDefault(shallow);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
@@ -76,6 +74,23 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
+/** Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+
+  if (captureData) {
+    captures.delete(obj); // If this was the last capturing object for this pointer
+
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
+    }
+  }
+}
 
 function removeInteractivity(store, object) {
   const {
@@ -89,6 +104,9 @@ function removeInteractivity(store, object) {
       internal.hovered.delete(key);
     }
   });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
@@ -168,7 +186,7 @@ function createEvents(store) {
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -187,7 +205,9 @@ function createEvents(store) {
     // intersect.
 
     if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      intersections.push(...internal.capturedMap.get(event.pointerId).values());
+      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+        intersections.push(captureData.intersection);
+      }
     }
 
     return intersections;
@@ -205,9 +225,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-
-      const releasePointerCapture = id => event.target.releasePointerCapture(id);
-
       const localState = {
         stopped: false
       };
@@ -220,23 +237,36 @@ function createEvents(store) {
         };
 
         const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, hit);
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
           } else {
             // if the pointerId was not previously captured, we create a map
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, hit]]));
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
           } // Call the original event now
           event.target.setPointerCapture(id);
+        };
+
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
         }; // Add native event props
 
 
-        let extractEventProps = {};
+        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in Object.getPrototypeOf(event)) {
+        for (let prop in event) {
           let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
 
@@ -305,13 +335,12 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
-        var _r3f3;
-
         const eventObject = hoveredObj.eventObject;
-        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers != null && handlers.count) {
+        if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -333,9 +362,8 @@ function createEvents(store) {
       case 'onLostPointerCapture':
         return event => {
           if ('pointerId' in event) {
-            // this will be a problem if one target releases the pointerId
-            // and another one is still keeping it, as the line below
-            // indifferently deletes all capturing references.
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed.
             store.getState().internal.capturedMap.delete(event.pointerId);
           }
 
@@ -374,12 +402,11 @@ function createEvents(store) {
 
       if (isPointerMove) cancelPointer(hits);
       handleIntersects(hits, event, delta, data => {
-        var _r3f4;
-
         const eventObject = data.eventObject;
-        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
 
-        if (!(handlers != null && handlers.count)) return;
+        if (!(instance != null && instance.eventCount)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -422,9 +449,9 @@ function createEvents(store) {
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f5;
+      var _r3f3;
 
-      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
+      return (_r3f3 = object.__r3f) == null ? void 0 : _r3f3.handlers.onPointerMissed == null ? void 0 : _r3f3.handlers.onPointerMissed(event);
     });
   }
 
@@ -475,9 +502,8 @@ function prepare(object, state) {
     instance.__r3f = {
       root: null,
       memoizedProps: {},
-      handlers: {
-        count: 0
-      },
+      eventCount: 0,
+      handlers: {},
       objects: [],
       parent: null,
       ...state
@@ -538,7 +564,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
+    var _instance$__r3f3, _root$getState, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -548,7 +574,7 @@ function createRenderer(roots) {
       memoized,
       changes
     } = isDiffSet(data) ? data : diffProps(instance, data);
-    const prevHandlers = (_localState$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
+    const prevHandlers = localState.eventCount; // Prepare memoized props
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
@@ -587,7 +613,7 @@ function createRenderer(roots) {
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
-        localState.handlers.count = Object.keys(localState.handlers).length;
+        localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
           // If value is an array
@@ -617,16 +643,17 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
+    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
       // Pre-emptively remove the instance from the interaction manager
       const index = rootState.internal.interaction.indexOf(instance);
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
-      if (localState.handlers.count) rootState.internal.interaction.push(instance);
+      if (localState.eventCount) rootState.internal.interaction.push(instance);
     } // Call the update lifecycle when it is being updated
 
 
     if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+    return instance;
   }
 
   function invalidateInstance(instance) {
@@ -812,7 +839,7 @@ function createRenderer(roots) {
         } else if (is.fun(detachFn)) {
           detachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
         parentInstance.remove(child); // Remove interactivity
@@ -1030,7 +1057,7 @@ function createRenderer(roots) {
   };
 }
 
-const isRenderer = def => def && !!def.render;
+const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
@@ -1058,11 +1085,11 @@ const createStore = (applyProps, invalidate, advance, props) => {
   if (shadows) {
     gl.shadowMap.enabled = true;
     if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-  } // Set color management
+  } // Set color preferences
 
 
-  if (!linear) gl.outputEncoding = THREE__namespace.sRGBEncoding;
-  if (!flat) gl.toneMapping = THREE__namespace.ACESFilmicToneMapping; // clock.elapsedTime is updated using advance(timestamp)
+  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
+  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
 
   if (frameloop === 'never') {
     clock.stop();
@@ -1251,38 +1278,45 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = rootState.getState();
+
+    if (size !== oldSize || viewport.dpr !== oldDpr) {
+      // https://github.com/pmndrs/react-three-fiber/issues/92
+      // Do not mess with the camera if it belongs to the user
+      if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow__default['default']);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1637,13 +1671,23 @@ const {
   applyProps
 } = createRenderer();
 
-const createRendererInstance = (gl, canvas) => isRenderer(gl) ? gl : new THREE__namespace.WebGLRenderer({
-  powerPreference: 'high-performance',
-  canvas: canvas,
-  antialias: true,
-  alpha: true,
-  ...gl
-});
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = new THREE__namespace.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
 
 function render(element, canvas, {
   gl,

package/dist/react-three-fiber.esm.js

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import create from 'zustand';
-import shallow from 'zustand/shallow';
 import Reconciler from 'react-reconciler';
 import { unstable_now, unstable_runWithPriority, unstable_IdlePriority } from 'scheduler';
 import { useAsset } from 'use-asset';
@@ -42,6 +41,23 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
+/** Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+
+  if (captureData) {
+    captures.delete(obj); // If this was the last capturing object for this pointer
+
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
+    }
+  }
+}
 
 function removeInteractivity(store, object) {
   const {
@@ -55,6 +71,9 @@ function removeInteractivity(store, object) {
       internal.hovered.delete(key);
     }
   });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
 }
 function createEvents(store) {
   const temp = new THREE.Vector3();
@@ -134,7 +153,7 @@ function createEvents(store) {
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -153,7 +172,9 @@ function createEvents(store) {
     // intersect.
 
     if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      intersections.push(...internal.capturedMap.get(event.pointerId).values());
+      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+        intersections.push(captureData.intersection);
+      }
     }
 
     return intersections;
@@ -171,9 +192,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-
-      const releasePointerCapture = id => event.target.releasePointerCapture(id);
-
       const localState = {
         stopped: false
       };
@@ -186,23 +204,36 @@ function createEvents(store) {
         };
 
         const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, hit);
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
           } else {
             // if the pointerId was not previously captured, we create a map
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, hit]]));
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
           } // Call the original event now
           event.target.setPointerCapture(id);
+        };
+
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
         }; // Add native event props
 
 
-        let extractEventProps = {};
+        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in Object.getPrototypeOf(event)) {
+        for (let prop in event) {
           let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
 
@@ -271,13 +302,12 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
-        var _r3f3;
-
         const eventObject = hoveredObj.eventObject;
-        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers != null && handlers.count) {
+        if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -299,9 +329,8 @@ function createEvents(store) {
       case 'onLostPointerCapture':
         return event => {
           if ('pointerId' in event) {
-            // this will be a problem if one target releases the pointerId
-            // and another one is still keeping it, as the line below
-            // indifferently deletes all capturing references.
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed.
             store.getState().internal.capturedMap.delete(event.pointerId);
           }
 
@@ -340,12 +369,11 @@ function createEvents(store) {
 
       if (isPointerMove) cancelPointer(hits);
       handleIntersects(hits, event, delta, data => {
-        var _r3f4;
-
         const eventObject = data.eventObject;
-        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
 
-        if (!(handlers != null && handlers.count)) return;
+        if (!(instance != null && instance.eventCount)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -388,9 +416,9 @@ function createEvents(store) {
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f5;
+      var _r3f3;
 
-      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
+      return (_r3f3 = object.__r3f) == null ? void 0 : _r3f3.handlers.onPointerMissed == null ? void 0 : _r3f3.handlers.onPointerMissed(event);
     });
   }
 
@@ -441,9 +469,8 @@ function prepare(object, state) {
     instance.__r3f = {
       root: null,
       memoizedProps: {},
-      handlers: {
-        count: 0
-      },
+      eventCount: 0,
+      handlers: {},
       objects: [],
       parent: null,
       ...state
@@ -504,7 +531,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
+    var _instance$__r3f3, _root$getState, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -514,7 +541,7 @@ function createRenderer(roots) {
       memoized,
       changes
     } = isDiffSet(data) ? data : diffProps(instance, data);
-    const prevHandlers = (_localState$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
+    const prevHandlers = localState.eventCount; // Prepare memoized props
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
@@ -553,7 +580,7 @@ function createRenderer(roots) {
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
-        localState.handlers.count = Object.keys(localState.handlers).length;
+        localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
           // If value is an array
@@ -583,16 +610,17 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
+    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
       // Pre-emptively remove the instance from the interaction manager
       const index = rootState.internal.interaction.indexOf(instance);
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
-      if (localState.handlers.count) rootState.internal.interaction.push(instance);
+      if (localState.eventCount) rootState.internal.interaction.push(instance);
     } // Call the update lifecycle when it is being updated
 
 
     if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+    return instance;
   }
 
   function invalidateInstance(instance) {
@@ -778,7 +806,7 @@ function createRenderer(roots) {
         } else if (is.fun(detachFn)) {
           detachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
         parentInstance.remove(child); // Remove interactivity
@@ -996,7 +1024,7 @@ function createRenderer(roots) {
   };
 }
 
-const isRenderer = def => def && !!def.render;
+const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
@@ -1024,11 +1052,11 @@ const createStore = (applyProps, invalidate, advance, props) => {
   if (shadows) {
     gl.shadowMap.enabled = true;
     if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
-  } // Set color management
+  } // Set color preferences
 
 
-  if (!linear) gl.outputEncoding = THREE.sRGBEncoding;
-  if (!flat) gl.toneMapping = THREE.ACESFilmicToneMapping; // clock.elapsedTime is updated using advance(timestamp)
+  if (linear) gl.outputEncoding = THREE.LinearEncoding;
+  if (flat) gl.toneMapping = THREE.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
 
   if (frameloop === 'never') {
     clock.stop();
@@ -1217,38 +1245,45 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = rootState.getState();
+
+    if (size !== oldSize || viewport.dpr !== oldDpr) {
+      // https://github.com/pmndrs/react-three-fiber/issues/92
+      // Do not mess with the camera if it belongs to the user
+      if (!(internal.lastProps.camera instanceof THREE.Camera)) {
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1603,13 +1638,23 @@ const {
   applyProps
 } = createRenderer();
 
-const createRendererInstance = (gl, canvas) => isRenderer(gl) ? gl : new THREE.WebGLRenderer({
-  powerPreference: 'high-performance',
-  canvas: canvas,
-  antialias: true,
-  alpha: true,
-  ...gl
-});
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = new THREE.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE.sRGBEncoding;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set gl props
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
 
 function render(element, canvas, {
   gl,

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -0,0 +1,11 @@
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../../src/native";

package/native/dist/react-three-fiber-native.cjs.js

@@ -0,0 +1,16 @@
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
+
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
+
+// this re-exports the source file
+module.exports = require("../../src/native.tsx");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.15",
+  "version": "7.0.19",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",