fix: globally cached multisampled texture (#238)

Author: mateuszJS

src/WebGPU/getDevice.ts

@@ -12,6 +12,7 @@ export default async function getDevice() {
 
   const device = await adapter.requestDevice({
     requiredFeatures: hasBGRA8unormStorage ? ['bgra8unorm-storage'] : [],
+    label: 'id: ' + Date.now(),
   })
   device.lost.then((info) => {
     console.error(`WebGPU device was lost: ${info.message}`)

src/getCanvasRenderDescriptor.ts

@@ -1,7 +1,12 @@
 import getMultisampleTexture from './getMultisampleTexture'
-import getDepthTexture from './getDepthTexture'
+// import getDepthTexture from './getDepthTexture'
 let multisampleTexture: GPUTexture | undefined
 
+export function destroyCanvasTextures() {
+  multisampleTexture?.destroy()
+  multisampleTexture = undefined
+}
+
 export default function getCanvasRenderDescriptor(context: GPUCanvasContext, device: GPUDevice) {
   // here we need to render that texture into canvas
   const canvasTexture = context.getCurrentTexture()
@@ -19,8 +24,8 @@ export default function getCanvasRenderDescriptor(context: GPUCanvasContext, dev
     label: 'our render to canvas renderPass',
     colorAttachments: [
       {
-        view: multisampleTexture.createView(),
-        resolveTarget: canvasTexture.createView(), // resolveTarget is used to resolve multisample texture into single sample texture
+        view: multisampleTexture.createView({ label: 'multisample texture view' }), // we draw to this texture first
+        resolveTarget: canvasTexture.createView({ label: 'canvas texture view' }), // resolveTarget is used to resolve multisample texture into single sample texture
         clearValue: [0, 0, 0, 1],
         loadOp: 'clear', // before rendering clear the texture to value "clear". Other option is "load" to load existing content of the texture into GPU so we can draw over it
         storeOp: 'store', // to store the result of what we draw, other option is "discard"

src/getDepthTexture.ts

@@ -1,5 +1,10 @@
 let depthTexture: GPUTexture | undefined
 
+export function destroy() {
+  depthTexture?.destroy()
+  depthTexture = undefined
+}
+
 export default function getDepthTexture(device: GPUDevice, width: number, height: number) {
   if (!depthTexture || depthTexture.width !== width || depthTexture.height !== height) {
     depthTexture?.destroy()

src/index.ts

@@ -21,6 +21,7 @@ import {
   ZigAsset,
 } from './types'
 export * from './types'
+import { destroyCanvasTextures } from 'getCanvasRenderDescriptor'
 
 export interface CreatorAPI {
   addImage: (url: string) => void
@@ -291,6 +292,7 @@ export default async function initCreator(
       stopRAF()
       Logic.deinitState()
       context.unconfigure()
+      destroyCanvasTextures()
       device.destroy()
     },
     setTool: (tool) => {