fix leaking geometries and materials

packages/react/src/suspending.tsx

@@ -9,6 +9,9 @@ export type SuspendingImageProperties = ImageProperties & {
   children?: ReactNode
 }
 
+/**
+ * be aware that this component does not dispose the loaded texture
+ */
 export const SuspendingImage: (
   props: SuspendingImageProperties & RefAttributes<ComponentInternals<Omit<ImageProperties, 'src'>>>,
 ) => ReactNode = forwardRef(({ src, ...props }, ref) => {

packages/react/src/video.tsx

@@ -81,6 +81,7 @@ export const Video: (props: VideoProperties & RefAttributes<VideoInternals>) =>
     useEffect(() => {
       const videoTexture = new VideoTexture(element)
       videoTexture.colorSpace = SRGBColorSpace
+      videoTexture.needsUpdate = true
       texture.value = videoTexture
       return () => videoTexture.dispose()
     }, [texture, element])

packages/uikit/src/components/icon.ts

@@ -1,5 +1,5 @@
 import { Signal, effect, signal } from '@preact/signals-core'
-import { Color, Group, Mesh, MeshBasicMaterial, Plane, ShapeGeometry } from 'three'
+import { BufferGeometry, Color, Group, Material, Mesh, MeshBasicMaterial, Plane, ShapeGeometry } from 'three'
 import { Listeners } from '../index.js'
 import { Object3DRef, ParentContext } from '../context.js'
 import { FlexNode, FlexNodeState, YogaProperties, createFlexNodeState } from '../flex/index.js'
@@ -221,6 +221,14 @@ function createIconGroup(
         group.updateMatrix()
         parentContext.root.requestRender()
       }),
+    () => () =>
+      group.children.forEach((child) => {
+        if (!(child instanceof Mesh)) {
+          return
+        }
+        ;(child.geometry as BufferGeometry).dispose()
+        ;(child.material as Material).dispose()
+      }),
     () =>
       effect(() => {
         group.visible = isVisible.value

packages/uikit/src/components/image.ts

@@ -268,48 +268,44 @@ function createImageMesh(
   mesh.spherecast = makeClippedCast(mesh, makePanelSpherecast(mesh), root.object, parentContext.clippingRect, orderInfo)
   setupRenderOrder(mesh, root, orderInfo)
   const objectFit = computedInheritableProperty(propertiesSignal, 'objectFit', defaultImageFit)
-  initializers.push(() =>
-    effect(() => {
-      const texture = textureSignal.value
-      if (texture == null || flexState.size.value == null || flexState.borderInset.value == null) {
-        return
-      }
-      texture.matrix.identity()
-      root.requestRender()
-
-      if (objectFit.value === 'fill' || texture == null) {
-        transformInsideBorder(flexState.borderInset, flexState.size, texture)
-        return
-      }
+  initializers.push(
+    () =>
+      effect(() => {
+        const texture = textureSignal.value
+        if (texture == null || flexState.size.value == null || flexState.borderInset.value == null) {
+          return
+        }
+        texture.matrix.identity()
+        root.requestRender()
 
-      const { width: textureWidth, height: textureHeight } = texture.source.data as { width: number; height: number }
-      const textureRatio = textureWidth / textureHeight
-
-      const [width, height] = flexState.size.value
-      const [top, right, bottom, left] = flexState.borderInset.value
-      const boundsRatioValue = (width - left - right) / (height - top - bottom)
-
-      if (textureRatio > boundsRatioValue) {
-        texture.matrix
-          .translate(-(0.5 * (boundsRatioValue - textureRatio)) / boundsRatioValue, 0)
-          .scale(boundsRatioValue / textureRatio, 1)
-      } else {
-        texture.matrix
-          .translate(0, -(0.5 * (textureRatio - boundsRatioValue)) / textureRatio)
-          .scale(1, textureRatio / boundsRatioValue)
-      }
-      transformInsideBorder(flexState.borderInset, flexState.size, texture)
-    }),
-  )
+        if (objectFit.value === 'fill' || texture == null) {
+          transformInsideBorder(flexState.borderInset, flexState.size, texture)
+          return
+        }
 
-  initializers.push(() =>
-    effect(() => {
-      mesh.visible = isMeshVisible.value
-      parentContext.root.requestRender()
-    }),
-  )
+        const { width: textureWidth, height: textureHeight } = texture.source.data as { width: number; height: number }
+        const textureRatio = textureWidth / textureHeight
 
-  initializers.push(
+        const [width, height] = flexState.size.value
+        const [top, right, bottom, left] = flexState.borderInset.value
+        const boundsRatioValue = (width - left - right) / (height - top - bottom)
+
+        if (textureRatio > boundsRatioValue) {
+          texture.matrix
+            .translate(-(0.5 * (boundsRatioValue - textureRatio)) / boundsRatioValue, 0)
+            .scale(boundsRatioValue / textureRatio, 1)
+        } else {
+          texture.matrix
+            .translate(0, -(0.5 * (textureRatio - boundsRatioValue)) / textureRatio)
+            .scale(1, textureRatio / boundsRatioValue)
+        }
+        transformInsideBorder(flexState.borderInset, flexState.size, texture)
+      }),
+    () =>
+      effect(() => {
+        mesh.visible = isMeshVisible.value
+        parentContext.root.requestRender()
+      }),
     () =>
       effect(() => {
         const map = textureSignal.value ?? null
@@ -405,10 +401,14 @@ function setupImageMaterials(
         const material = createPanelMaterial(panelMaterialClass.value, info)
         material.clippingPlanes = clippingPlanes
         target.material = material
-        return effect(() => {
+        const cleanupDepthTestEffect = effect(() => {
           material.depthTest = root.depthTest.value
           root.requestRender()
         })
+        return () => {
+          cleanupDepthTestEffect()
+          material.dispose()
+        }
       }),
       effect(() => {
         target.renderOrder = root.renderOrder.value

packages/uikit/src/panel/instanced-panel-group.ts

@@ -325,6 +325,12 @@ export class InstancedPanelGroup {
 
   destroy() {
     clearTimeout(this.nextUpdateTimeoutRef)
+    if (this.mesh == null) {
+      return
+    }
+    this.object.current?.remove(this.mesh)
+    this.mesh?.dispose()
+    this.instanceMaterial.dispose()
   }
 }
 

packages/uikit/src/panel/instanced-panel-mesh.ts

@@ -65,6 +65,7 @@ export class InstancedPanelMesh extends Mesh {
 
   dispose() {
     this.dispatchEvent({ type: 'dispose' as keyof Object3DEventMap })
+    this.geometry.dispose()
   }
 
   copy(): this {

packages/uikit/src/text/render/instanced-glyph-group.ts

@@ -24,6 +24,7 @@ export class GlyphGroupManager {
         root.onFrameSet.add(onFrame)
         return () => root.onFrameSet.delete(onFrame)
       },
+      () => () => this.traverse((group) => group.destroy()),
       () =>
         effect(() => {
           const ro = renderOrder.value
@@ -276,6 +277,15 @@ export class InstancedGlyphGroup {
     this.mesh.count = this.glyphs.length
     this.object.current?.add(this.mesh)
   }
+
+  destroy() {
+    if (this.mesh == null) {
+      return
+    }
+    this.object.current?.remove(this.mesh)
+    this.mesh.dispose()
+    this.instanceMaterial.dispose()
+  }
 }
 
 function copyBuffer(

packages/uikit/src/text/render/instanced-glyph-mesh.ts

@@ -31,6 +31,7 @@ export class InstancedGlyphMesh extends Mesh {
 
   dispose() {
     this.dispatchEvent({ type: 'dispose' as keyof Object3DEventMap })
+    this.geometry.dispose()
   }
 
   //functions not needed because intersection (and morphing) is intenionally disabled

packages/uikit/src/vanilla/custom.ts

@@ -14,6 +14,7 @@ export class CustomContainer<T = {}> extends Component<T> {
   private readonly defaultPropertiesSignal: Signal<AllOptionalProperties | undefined>
   private readonly parentContextSignal = createParentContextSignal()
   private readonly unsubscribe: () => void
+  private readonly material = new MeshBasicMaterial()
 
   constructor(properties?: CustomContainerProperties, defaultProperties?: AllOptionalProperties) {
     super()
@@ -22,7 +23,7 @@ export class CustomContainer<T = {}> extends Component<T> {
     this.propertiesSignal = signal(properties)
     this.defaultPropertiesSignal = signal(defaultProperties)
 
-    const mesh = new Mesh(panelGeometry, new MeshBasicMaterial())
+    const mesh = new Mesh(panelGeometry, this.material)
     super.add(mesh)
 
     this.unsubscribe = effect(() => {
@@ -79,5 +80,6 @@ export class CustomContainer<T = {}> extends Component<T> {
   destroy() {
     this.parent?.remove(this)
     this.unsubscribe()
+    this.material.dispose()
   }
 }

packages/uikit/src/vanilla/video.ts

@@ -20,6 +20,7 @@ export class Video<T = {}> extends Image<T> {
     const element = props.src instanceof HTMLVideoElement ? props.src : document.createElement('video')
     updateVideoElement(element, props)
     const texture = new VideoTexture(element)
+    texture.needsUpdate = true
     const aspectRatio = signal<number>(1)
     super({ aspectRatio, ...props, src: texture }, defaultProperties)