feat: generate asset ids in zig, add source maps to JS (#16)

* Move id generation to zig

* free assets memory

* small cleanup

* rename all zig names to sneak case

* remove unnecessary comment

* fix typo, improve allocating vertex array

Author: mateuszJS

eslint.config copy.mjs

@@ -0,0 +1,15 @@
+// @ts-check
+
+import eslint from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import stylisticJs from '@stylistic/eslint-plugin-js'
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+  rules: {
+    'no-multiple-empty-lines': 'error',
+    semi: ['error', 'never'],
+  },
+  plugins: {
+    '@stylistic/js': stylisticJs,
+  },
+})

eslint.config.js

@@ -1,8 +1,6 @@
 import initCreator from '../src/index'
 import SampleImg from './image-sample.png'
 
-let new_asset_id = 1001
-
 const params = new URLSearchParams(document.location.search)
 const isSampleParam = params.has('sample') // is the string "Jonathan"
 
@@ -13,7 +11,6 @@ async function test() {
     isSampleParam
       ? [
           {
-            id: 1000,
             points: [
               {
                 u: 0,
@@ -55,8 +52,7 @@ async function test() {
     const img = new Image()
     img.src = URL.createObjectURL(files[0])
     img.onload = () => {
-      creator.addImage(new_asset_id, img)
-      new_asset_id++
+      creator.addImage(img)
     }
   })
 }

eslint.config.mjs

@@ -1,11 +1,5 @@
-/* eslint-disable no-undef */
-/* eslint-disable @typescript-eslint/no-require-imports */
-const path = require("path");
-
-module.exports = {
-  process(sourceText, sourcePath, options) {
-    return {
-      code: `module.exports = \`${sourceText}\`;`,
-    };
-  },
-};
+export const process = (sourceText, sourcePath, options) => {
+  return {
+    code: `module.exports = \`${sourceText}\`;`,
+  }
+}

integration-tests/index.ts

@@ -51,7 +51,7 @@
     "webpack-dev-server": "^5.2.0",
     "zigar-loader": "^0.14.0"
   },
-  "types": "./lib/types/src/index.d.ts",
+  "types": "./lib/types/index.d.ts",
   "main": "./lib/index.mjs",
   "type": "module",
   "repository": {

jestWgslTransformer.js

@@ -1,19 +1,16 @@
-import mat4 from "utils/mat4"
-import { pointer } from "./pointer"
-import { on_update_pick } from "../logic/index.zig"
+import mat4 from 'utils/mat4'
+import { pointer } from './pointer'
+import { on_update_pick } from '../logic/index.zig'
 
 const NUM_PIXELS = 1
 
 export default class PickManager {
-
   private pickBuffer: GPUBuffer
   private pickTexture: GPUTexture
   private pickDepthTexture: GPUTexture
   private isPreviousPickDone = true
 
-  constructor (
-    private device: GPUDevice,
-  ) {
+  constructor(device: GPUDevice) {
     this.pickBuffer = device.createBuffer({
       size: NUM_PIXELS * 4,
       usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
@@ -31,21 +28,22 @@ export default class PickManager {
       usage: GPUTextureUsage.RENDER_ATTACHMENT,
     })
   }
+
   /**
    * Starts a picking render pass.
    * @param encoder The GPUCommandEncoder to use for the render pass.
    * @returns An object which contains render pass and a callback to end picking.
    */
-  startPicking(encoder: GPUCommandEncoder): { pass: GPURenderPassEncoder, end: VoidFunction } {
+  startPicking(encoder: GPUCommandEncoder): { pass: GPURenderPassEncoder; end: VoidFunction } {
     const descriptor: GPURenderPassDescriptor = {
       // describe which textures we want to raw to and how use them
-      label: "our render to canvas renderPass",
+      label: 'our render to canvas renderPass',
       colorAttachments: [
         {
           view: this.pickTexture.createView(),
-          loadOp: "clear",
+          loadOp: 'clear',
           clearValue: [0, 0, 0, 1],
-          storeOp: "store",
+          storeOp: 'store',
         } as const,
       ],
       // depthStencilAttachment: {
@@ -68,19 +66,22 @@ export default class PickManager {
       pass.end()
 
       if (this.isPreviousPickDone) {
-        encoder.copyTextureToBuffer({
+        encoder.copyTextureToBuffer(
+          {
             texture: this.pickTexture,
-            origin: { x: 0, y: 0 }
-          }, {
+            origin: { x: 0, y: 0 },
+          },
+          {
             buffer: this.pickBuffer,
-          }, {
+          },
+          {
             width: NUM_PIXELS,
           }
         )
       }
     }
 
-    return {pass, end: endPicking}
+    return { pass, end: endPicking }
   }
 
   createMatrix(canvas: HTMLCanvasElement, canvasMatrix: Float32Array) {
@@ -104,10 +105,15 @@ export default class PickManager {
   async asyncPick() {
     if (!this.isPreviousPickDone) return
     this.isPreviousPickDone = false
-    await this.pickBuffer.mapAsync(GPUMapMode.READ, 0, 4 * NUM_PIXELS)
-    const [id] = new Uint32Array(this.pickBuffer.getMappedRange(0, 4 * NUM_PIXELS))
-    on_update_pick(id)
-    this.pickBuffer.unmap()
+    try {
+      await this.pickBuffer.mapAsync(GPUMapMode.READ, 0, 4 * NUM_PIXELS)
+      const [id] = new Uint32Array(this.pickBuffer.getMappedRange(0, 4 * NUM_PIXELS))
+      on_update_pick(id)
+      this.pickBuffer.unmap()
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (err) {
+      /* ignorign errors when map fails because device was destroyed(so buffer too and was unmapped before mapAsync completed)*/
+    }
     this.isPreviousPickDone = true
   }
-}
+}

package.json

@@ -6,18 +6,18 @@ import { createTextureFromSource } from 'WebGPU/getTexture'
 import {
   init_state,
   add_texture,
-  connectOnAssetUpdateCallback,
-  ASSET_ID_TRESHOLD,
+  connect_on_asset_update_callback,
+  destroy_state,
 } from './logic/index.zig'
 import initMouseController from 'WebGPU/pointer'
 import getDefaultPoints from 'utils/getDefaultPoints'
 
-export type SerializedAsset = Omit<Texture, 'texture_id'> & {
+export type SerializedAsset = Omit<AssetZig, 'texture_id'> & {
   url: string
 }
 
 export interface CreatorAPI {
-  addImage: (id: number, img: HTMLImageElement, points?: PointUV[]) => void
+  addImage: (img: HTMLImageElement, points?: PointUV[]) => void
   destroy: VoidFunction
 }
 
@@ -55,10 +55,8 @@ export default async function initCreator(
   initMouseController(canvas)
 
   const textures: TextureSource[] = []
-  runCreator(canvas, context, device, presentationFormat, textures)
-  connectOnAssetUpdateCallback((serializedData: Texture[]) => {
+  connect_on_asset_update_callback((serializedData: AssetZig[]) => {
     const serializedAssetsTextureUrl = [...serializedData].map<SerializedAsset>((asset) => ({
-      id: asset.id,
       points: [...asset.points].map((point) => ({
         x: point.x,
         y: point.y,
@@ -70,31 +68,31 @@ export default async function initCreator(
     onAssetsUpdate(serializedAssetsTextureUrl)
   })
 
-  function addImage(id: number, img: HTMLImageElement, points?: PointUV[]) {
-    if (id < ASSET_ID_TRESHOLD) {
-      throw Error(`ID should be unique and not smaller than ${ASSET_ID_TRESHOLD}.`)
-    }
-
+  function addImage(img: HTMLImageElement, points?: PointUV[]) {
     const newTextureId = textures.length
     textures.push({
       url: img.src,
       texture: createTextureFromSource(device, img, { flipY: true }),
     })
 
-    add_texture(id, points || getDefaultPoints(img, canvas), newTextureId)
+    add_texture(points || getDefaultPoints(img, canvas), newTextureId)
   }
 
   assets.forEach((asset) => {
     const img = new Image()
     img.src = asset.url
     img.onload = () => {
-      addImage(asset.id, img, asset.points)
+      addImage(img, asset.points)
     }
   })
 
+  const stopCreator = runCreator(canvas, context, device, presentationFormat, textures)
+
   return {
     addImage,
     destroy: () => {
+      stopCreator()
+      destroy_state()
       context.unconfigure()
       device.destroy()
     },

src/WebGPU/pick.ts

@@ -6,31 +6,30 @@ interface PointUV {
 }
 
 type ZigF32Array = { typedArray: Float32Array }
-type Texture = {
-  id: number
+type AssetZig = {
   points: PointUV[]
   texture_id: number
 }
 
 declare module '*.zig' {
-  export const ASSET_ID_TRESHOLD: number
   export const init_state: (width: number, height: number) => void
-  export const add_texture: (id: number, points: PointUV[], texture_id: number) => void
+  export const add_texture: (points: PointUV[], texture_id: number) => void
   export const update_points: (id: number, points: PointUV[]) => void
 
   export const on_update_pick: (id: number) => void
   export const on_pointer_down: (x: number, y: number) => void
   export const on_pointer_up: () => void
   export const on_pointer_move: (x: number, y: number) => void
 
-  export const connectWebGPUPrograms: (programs: {
+  export const connect_web_gpu_programs: (programs: {
     draw_texture: (vertexData: ZigF32Array, texture_id: number) => void
     draw_triangle: (vertexData: ZigF32Array) => void
     pick_texture: (vertexData: ZigF32Array, texture_id: number) => void
     pick_triangle: (vertexData: ZigF32Array) => void
   }) => void
-  export const connectOnAssetUpdateCallback: (cb: (data: Texture[]) => void) => void
+  export const connect_on_asset_update_callback: (cb: (data: AssetZig[]) => void) => void
 
   export const canvas_render: VoidFunction
   export const picks_render: VoidFunction
+  export const destroy_state: VoidFunction
 }