feat: update foward events only once per frame per pointer

Author: bbohlender

examples/hit-test-anchor/app.tsx

@@ -12,6 +12,7 @@ import {
   useXRAnchor,
   useXRInputSourceStateContext,
 } from '@react-three/xr'
+import { noEvents } from '@react-three/xr/src'
 import { useEffect, useRef } from 'react'
 import { Matrix4, Mesh, Vector3 } from 'three'
 import { create } from 'zustand'
@@ -78,7 +79,7 @@ export function App() {
   return (
     <>
       <button onClick={() => store.enterAR()}>Enter AR</button>
-      <Canvas style={{ width: '100%', flexGrow: 1 }}>
+      <Canvas events={noEvents} style={{ width: '100%', flexGrow: 1 }}>
         <XR store={store}>
           <ambientLight />
           {new Array(leftLength).fill(undefined).map((_, i) => (

examples/layers/app.tsx

@@ -1,9 +1,8 @@
-import { Canvas, useThree } from '@react-three/fiber'
-import { createXRStore, useHover, XR, XRLayer, XROrigin } from '@react-three/xr'
+import { Canvas } from '@react-three/fiber'
+import { PointerEvents, noEvents, createXRStore, XR, XRLayer, XROrigin } from '@react-three/xr'
 import { Text } from '@react-three/drei'
-import { useEffect, useMemo, useRef } from 'react'
-import { Mesh, SRGBColorSpace, VideoTexture } from 'three'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { useMemo } from 'react'
+import { SRGBColorSpace, VideoTexture } from 'three'
 
 const store = createXRStore({
   foveation: 0,
@@ -25,11 +24,11 @@ export function App() {
     <>
       <button onClick={() => store.enterAR()}>Enter AR</button>
       <Canvas
-        events={() => ({ enabled: false, priority: 0 })}
+        events={noEvents}
         style={{ width: '100%', flexGrow: 1 }}
         camera={{ position: [0, 0, 0], rotation: [0, 0, 0] }}
       >
-        <SwitchToXRPointerEvents />
+        <PointerEvents />
         <XR store={store}>
           <Text scale={0.03} color="black" position={[-0.6, 0.28, -0.5]}>
             32x32 XRLayer with DPR=32
@@ -67,11 +66,3 @@ export function App() {
     </>
   )
 }
-
-export function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, () => camera, scene), [domElement, camera, scene])
-  return null
-}

examples/pointer-events/index.ts

@@ -50,12 +50,14 @@ getVoidObject(scene).addEventListener('click', () => console.log('click outer'))
 
 const canvas = document.getElementById('root') as HTMLCanvasElement
 
-forwardHtmlEvents(canvas, () => camera, scene)
-forwardObjectEvents(plane, () => innerCamera, innerScene)
+const { update: updateForwardHtmlEvents } = forwardHtmlEvents(canvas, () => camera, scene)
+const { update: updateForwardObjectEvents } = forwardObjectEvents(plane, () => innerCamera, innerScene)
 
 const renderer = new WebGLRenderer({ antialias: true, canvas })
 
 renderer.setAnimationLoop((time) => {
+  updateForwardHtmlEvents()
+  updateForwardObjectEvents()
   box.rotation.y = time * 0.0001
   plane.rotation.y = Math.sin(time * 0.001) * 0.3
   renderer.setRenderTarget(frambuffer)

examples/rag-doll/src/App.jsx

@@ -1,13 +1,11 @@
-import { Canvas, useThree } from '@react-three/fiber'
+import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 import { Physics, usePlane } from '@react-three/cannon'
 import { Cursor } from './helpers/Drag.js'
 import { Guy } from './components/Guy.jsx'
 import { Mug, Chair, Table, Lamp } from './components/Furniture.jsx'
-import { createXRStore, useControllerLocomotion, XR, XROrigin } from '@react-three/xr'
-import { useRef, Suspense, useEffect } from 'react'
-import { Group } from 'three'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { createXRStore, noEvents, useControllerLocomotion, XR, XROrigin, PointerEvents } from '@react-three/xr'
+import { useRef, Suspense } from 'react'
 
 const store = createXRStore({
   hand: { touchPointer: false },
@@ -42,10 +40,10 @@ export function App() {
         onPointerMissed={() => console.log('missed')}
         dpr={[1, 2]}
         shadows
-        events={() => ({ enabled: false, priority: 0 })}
+        events={noEvents}
         camera={{ position: [-40, 40, 40], fov: 25 }}
       >
-        <SwitchToXRPointerEvents />
+        <PointerEvents />
         <OrbitControls />
         <XR store={store}>
           <color attach="background" args={['#171720']} />
@@ -97,11 +95,3 @@ function Floor(props) {
     </mesh>
   )
 }
-
-export function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, () => camera, scene), [domElement, camera, scene])
-  return null
-}

examples/uikit/app.tsx

@@ -1,7 +1,7 @@
-import { Canvas, useThree } from '@react-three/fiber'
-import { createXRStore, XR, XRLayer, XROrigin } from '@react-three/xr'
+import { Canvas } from '@react-three/fiber'
+import { createXRStore, noEvents, PointerEvents, XR, XROrigin } from '@react-three/xr'
 import { Environment } from '@react-three/drei'
-import { Container, Text, Image, Root, setPreferredColorScheme, Fullscreen } from '@react-three/uikit'
+import { Container, Text, Image, Root, setPreferredColorScheme } from '@react-three/uikit'
 import { Button, Slider } from '@react-three/uikit-default'
 import {
   ArrowLeftIcon,
@@ -11,8 +11,7 @@ import {
   MenuIcon,
   PlayIcon,
 } from '@react-three/uikit-lucide'
-import { useEffect, useState } from 'react'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { useState } from 'react'
 import { useControls } from 'leva'
 
 const store = createXRStore({
@@ -32,8 +31,8 @@ export function App() {
   return (
     <>
       <button onClick={() => store.enterAR()}>Enter AR</button>
-      <Canvas events={() => ({ enabled: false, priority: 0 })} style={{ width: '100%', flexGrow: 1 }}>
-        <SwitchToXRPointerEvents />
+      <Canvas events={noEvents} style={{ width: '100%', flexGrow: 1 }}>
+        <PointerEvents />
         <XR store={store}>
           <XROrigin visible={visible} />
           <Environment preset="city" />
@@ -176,11 +175,3 @@ export function App() {
     </>
   )
 }
-
-export function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, () => camera, scene), [domElement, camera, scene])
-  return null
-}

examples/use-gesture/app.tsx

@@ -1,13 +1,12 @@
-import { Canvas, useThree } from '@react-three/fiber'
-import { useEffect } from 'react'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { Canvas } from '@react-three/fiber'
 import { useDrag } from '@use-gesture/react'
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 export function App() {
   return (
-    <Canvas style={{ width: '100%', flexGrow: 1 }} events={() => ({ enabled: false, priority: 0 })}>
+    <Canvas style={{ width: '100%', flexGrow: 1 }} events={noEvents}>
       <DragCube />
-      <SwitchToXRPointerEvents />
+      <PointerEvents />
     </Canvas>
   )
 }
@@ -21,11 +20,3 @@ function DragCube() {
     </mesh>
   )
 }
-
-export function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, () => camera, scene), [domElement, camera, scene])
-  return null
-}

packages/pointer-events/README.md

@@ -14,7 +14,7 @@ const canvas = document.getElementById('canvas')
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10)
 camera.position.z = 1
-forwardHtmlEvents(canvas, () => camera, scene)
+const { update } = forwardHtmlEvents(canvas, () => camera, scene)
 
 const width = window.innerWidth,
   height = window.innerHeight
@@ -29,7 +29,10 @@ mesh.addEventListener('pointerout', () => material.color.set('red'))
 
 const renderer = new THREE.WebGLRenderer({ antialias: true })
 renderer.setSize(width, height)
-renderer.setAnimationLoop(() => renderer.render(scene, camera))
+renderer.setAnimationLoop(() => {
+  update()
+  renderer.render(scene, camera)
+})
 ```
 
 ## Filtering
@@ -79,4 +82,4 @@ rightPointer.move()
 
 ## Pitfalls
 
-The `pointerEvents` attribute of any Mesh/Object3D/... will not be cloned when cloning the object.
+The `pointerEvents` attribute of any Mesh/Object3D/... will not be cloned when cloning the object.

packages/pointer-events/src/forward.ts

@@ -9,6 +9,7 @@ import { getClosestUV } from './utils.js'
 export type ForwardablePointerEvent = { pointerId?: number; pointerType?: string; pointerState?: any } & NativeEvent
 
 export type ForwardEventsOptions = {
+  alwaysUpdate?: boolean
   /**
    * @default true
    */
@@ -97,7 +98,7 @@ function forwardEvents(
   setPointerCapture: (pointerId: number) => void,
   releasePointerCapture: (ponterId: number) => void,
   options: ForwardEventsOptions = {},
-): () => void {
+): { destroy: () => void; update: () => void } {
   const forwardPointerCapture = options?.forwardPointerCapture ?? true
   const pointerMap = new Map<number, Pointer>()
   const pointerTypePrefix = options.pointerTypePrefix ?? 'forward-'
@@ -125,27 +126,49 @@ function forwardEvents(
     )
     return innerPointer
   }
-  const pointerMoveListener = (e: ForwardablePointerEvent) => getInnerPointer(e).move(scene, e)
+
+  const lastMoveEventMap: Map<Pointer, ForwardablePointerEvent | undefined> = new Map()
+
+  const pointerMoveListener = (e: ForwardablePointerEvent) => lastMoveEventMap.set(getInnerPointer(e), e)
   const pointerCancelListener = (e: ForwardablePointerEvent) => getInnerPointer(e).cancel(e)
   const pointerDownListener = (e: ForwardablePointerEvent) => void (hasButton(e) && getInnerPointer(e).down(e))
   const pointerUpListener = (e: ForwardablePointerEvent) => void (hasButton(e) && getInnerPointer(e).up(e))
-  const pointerLeaveListener = (e: ForwardablePointerEvent) => getInnerPointer(e).exit(e)
   const wheelListener = (e: ForwardablePointerEvent & NativeWheelEvent) => getInnerPointer(e).wheel(scene, e, false)
+  const pointerLeaveListener = (e: ForwardablePointerEvent) => {
+    const pointer = getInnerPointer(e)
+    pointer.exit(e)
+    lastMoveEventMap.delete(pointer)
+  }
 
   from.addEventListener('pointermove', pointerMoveListener)
   from.addEventListener('pointercancel', pointerCancelListener)
   from.addEventListener('pointerdown', pointerDownListener)
   from.addEventListener('pointerup', pointerUpListener)
-  from.addEventListener('pointerleave', pointerLeaveListener)
   from.addEventListener('wheel', wheelListener)
+  from.addEventListener('pointerleave', pointerLeaveListener)
 
-  return () => {
-    from.removeEventListener('pointermove', pointerMoveListener)
-    from.removeEventListener('pointercancel', pointerCancelListener)
-    from.removeEventListener('pointerdown', pointerDownListener)
-    from.removeEventListener('pointerup', pointerUpListener)
-    from.removeEventListener('pointerleave', pointerLeaveListener)
-    from.removeEventListener('wheel', wheelListener)
+  return {
+    destroy() {
+      from.removeEventListener('pointermove', pointerMoveListener)
+      from.removeEventListener('pointercancel', pointerCancelListener)
+      from.removeEventListener('pointerdown', pointerDownListener)
+      from.removeEventListener('pointerup', pointerUpListener)
+      from.removeEventListener('wheel', wheelListener)
+      from.removeEventListener('pointerleave', pointerLeaveListener)
+      lastMoveEventMap.clear()
+    },
+    update() {
+      for (const [pointer, lastMoveEvent] of lastMoveEventMap.entries()) {
+        if (lastMoveEvent == null) {
+          continue
+        }
+        pointer.move(scene, lastMoveEvent)
+        if (options.alwaysUpdate === true) {
+          continue
+        }
+        lastMoveEventMap.set(pointer, undefined)
+      }
+    },
   }
 }
 

packages/pointer-events/src/intersections/utils.ts

@@ -66,7 +66,11 @@ export function intersectPointerEventTargets(
 
   const isAllowed = isPointerEventsAllowed(hasListener, pointerEventsOrDefault, pointerEventsType)
   const length = pointers.length
-  if (isAllowed === true) {
+  if (length === 1) {
+    if (isAllowed === true || (typeof isAllowed === 'function' && isAllowed(pointers[0]))) {
+      filterAndInteresct(pointers[0], object, pointerEventsOrDefault, pointerEventsType, pointerEventsOrder)
+    }
+  } else if (isAllowed === true) {
     for (let i = 0; i < length; i++) {
       filterAndInteresct(pointers[i], object, pointerEventsOrDefault, pointerEventsType, pointerEventsOrder)
     }
@@ -80,7 +84,7 @@ export function intersectPointerEventTargets(
     }
   }
 
-  if (object.intersectChildren === false) {
+  if (object.children.length === 0 || object.intersectChildren === false) {
     return
   }
 

packages/pointer-events/tests/browser/index.ts

@@ -19,14 +19,17 @@ const canvas = document.getElementById('canvas') as HTMLCanvasElement
 const camera = new OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 200)
 camera.position.z = 100
 //setup threejs event forwarding
-forwardHtmlEvents(document.body, () => camera, scene, {
+const { update } = forwardHtmlEvents(document.body, () => camera, scene, {
   forwardPointerCapture: false,
   clickThesholdMs: 1000 /*increasing threshold for slow testing machines*/,
 })
 
 const renderer = new WebGLRenderer({ antialias: true, canvas })
 renderer.setSize(window.innerWidth, window.innerHeight)
-renderer.setAnimationLoop(() => renderer.render(scene, camera))
+renderer.setAnimationLoop(() => {
+  update()
+  renderer.render(scene, camera)
+})
 
 const elements = e as Array<ElementInfo>
 

packages/react/xr/src/events.tsx

@@ -0,0 +1,20 @@
+import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { addEffect, EventManager, useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+
+export function PointerEvents() {
+  const domElement = useThree((s) => s.gl.domElement)
+  const camera = useThree((s) => s.camera)
+  const scene = useThree((s) => s.scene)
+  useEffect(() => {
+    const { destroy, update } = forwardHtmlEvents(domElement, () => camera, scene)
+    const cleanupUpdate = addEffect(update)
+    return () => {
+      cleanupUpdate()
+      destroy()
+    }
+  }, [domElement, camera, scene])
+  return null
+}
+
+export const noEvents = (): EventManager<HTMLElement> => ({ enabled: false, priority: 0 })

packages/react/xr/src/index.ts

@@ -16,6 +16,7 @@ export * from './anchor.js'
 export * from './dom-overlay.js'
 export * from './layer.js'
 export * from './controller-locomotion.js'
+export * from './events.js'
 
 //react-three/xr v5 compatibility layer
 export * from './deprecated/index.js'

packages/react/xr/src/layer.tsx

@@ -14,6 +14,7 @@ import {
   createXRLayerRenderTarget,
 } from '@pmndrs/xr'
 import {
+  addEffect,
   context,
   InjectState,
   MeshProps,
@@ -330,7 +331,12 @@ function useForwardEvents(store: UseBoundStore<StoreApi<RootState>>, ref: RefObj
         return
       }
       cleanup?.()
-      cleanup = forwardObjectEvents(current, () => state.camera, state.scene)
+      const { destroy, update } = forwardObjectEvents(current, () => state.camera, state.scene)
+      const cleanupUpdate = addEffect(update)
+      cleanup = () => {
+        destroy()
+        cleanupUpdate()
+      }
     }
     update(store.getState())
     const unsubscribe = store.subscribe(update)