fix: naming of assets and textures (#34)

Author: mateuszJS

src/index.ts

@@ -2,7 +2,6 @@ import canvasSizeObserver from 'WebGPU/canvasSizeObserver'
 import getDevice from 'WebGPU/getDevice'
 import initPrograms from 'WebGPU/programs/initPrograms'
 import runCreator from 'run'
-import { createTextureFromSource } from 'WebGPU/getTexture'
 import {
   init_state,
   add_asset,
@@ -17,6 +16,7 @@ import initMouseController from 'WebGPU/pointer'
 import IconsPng from '../msdf/output/icons.png'
 import IconsJson from '../msdf/output/icons.json'
 import getDefaultPoints from 'utils/getDefaultPoints'
+import * as Textures from 'textures'
 
 export type SerializedInputAsset = {
   id?: number // not needed while loading project but useful for undo/redo to maintain selection
@@ -39,11 +39,6 @@ export interface CreatorAPI {
   destroy: VoidFunction
 }
 
-export interface TextureSource {
-  url: string
-  texture?: GPUTexture
-}
-
 export default async function initCreator(
   canvas: HTMLCanvasElement,
   onAssetsUpdate: (assets: SerializedOutputAsset[]) => void,
@@ -57,8 +52,11 @@ export default async function initCreator(
     onProcessingUpdate(loadingTextures > 0 || isMouseEventProcessing)
   }
 
-  /* setup WebGPU stuff */
   const device = await getDevice()
+  Textures.init(device, (texLoadings) => {
+    loadingTextures = texLoadings
+    updateProcessing()
+  })
 
   init_state(canvas.clientWidth, canvas.clientHeight)
   const context = canvas.getContext('webgpu')
@@ -83,37 +81,7 @@ export default async function initCreator(
     updateProcessing()
   })
 
-  const textures: TextureSource[] = []
-
-  function addTexture(url: string, callback?: (width: number, height: number) => void): number {
-    loadingTextures++
-    updateProcessing()
-
-    const textureId = textures.length
-    textures.push({ url })
-
-    const img = new Image()
-    img.src = url
-
-    img.onload = () => {
-      textures[textureId].texture = createTextureFromSource(device, img, { flipY: true })
-      callback?.(img.width, img.height)
-
-      loadingTextures--
-      updateProcessing()
-    }
-
-    img.onerror = () => {
-      console.error(`Failed to load image from ${url}`)
-
-      loadingTextures--
-      updateProcessing()
-    }
-
-    return textureId
-  }
-
-  connect_on_asset_update_callback((serializedData: AssetZig[]) => {
+  connect_on_asset_update_callback((serializedData: ZigAssetOutput[]) => {
     const serializedAssetsTextureUrl = [...serializedData].map<SerializedOutputAsset>((asset) => ({
       id: asset.id,
       textureId: asset.texture_id,
@@ -123,21 +91,21 @@ export default async function initCreator(
         u: point.u,
         v: point.v,
       })),
-      url: textures[asset.texture_id].url,
+      url: Textures.getUrl(asset.texture_id),
     }))
     onAssetsUpdate(serializedAssetsTextureUrl)
   })
 
   connect_on_asset_selection_callback(onAssetSelect)
 
   const addImage: CreatorAPI['addImage'] = (url) => {
-    const textureId = addTexture(url, (width, height) => {
+    const textureId = Textures.add(url, (width, height) => {
       const points = getDefaultPoints(width, height, canvas.clientWidth, canvas.clientHeight)
       add_asset(0 /* no id yet, needs to be generated */, points, textureId)
     })
   }
 
-  addTexture(IconsPng, (width, height) => {
+  Textures.add(IconsPng, (width, height) => {
     import_icons(
       IconsJson.chars.flatMap((char) => [
         char.id,
@@ -151,29 +119,29 @@ export default async function initCreator(
     )
   })
 
-  const stopCreator = runCreator(canvas, context, device, presentationFormat, textures, () => {
+  const stopCreator = runCreator(canvas, context, device, presentationFormat, () => {
     isMouseEventProcessing = false
     updateProcessing()
   })
 
   const resetAssets: CreatorAPI['resetAssets'] = async (assets, withSnapshot = false) => {
     const results = await Promise.allSettled(
-      assets.map<Promise<AssetZig>>(
+      assets.map<Promise<ZigAssetInput>>(
         (asset) =>
           new Promise((resolve, reject) => {
             if (asset.points) {
               return resolve({
                 points: asset.points,
-                texture_id: asset.textureId || addTexture(asset.url),
+                texture_id: asset.textureId || Textures.add(asset.url),
                 id: asset.id || 0,
               })
             }
 
-            const textureId = addTexture(asset.url, (width, height) => {
-              // we wait to add image once points are known because otherwise
-              // if we add img first with "Default" point value and update
-              // it later once texture is loaded, we will get history snapshot with
-              // that "default" points
+            const textureId = Textures.add(asset.url, (width, height) => {
+              // we wait to add image once points are known. Other option was to add image first
+              // with "default" points and then update it once texture is loaded.
+              // However, that would cause issues with undo/redo since we would have history
+              // snapshot with "default" points and then update it to the real points.
               return resolve({
                 points: getDefaultPoints(width, height, canvas.clientWidth, canvas.clientHeight),
                 texture_id: textureId, // if there is no points, then for sure there is no asset.textureId
@@ -184,11 +152,11 @@ export default async function initCreator(
       )
     )
 
-    const zigAssets = results
+    const serializedAssets = results
       .filter((result) => result.status === 'fulfilled')
       .map((result) => result.value)
 
-    reset_assets(zigAssets, withSnapshot)
+    reset_assets(serializedAssets, withSnapshot)
   }
 
   return {

src/loadingTexture.ts

@@ -1,6 +1,6 @@
 export default function getLoadingTexture(device: GPUDevice): GPUTexture {
-  const kTextureWidth = 5
-  const kTextureHeight = 7
+  const textureWidth = 5
+  const textureHeight = 7
   const _ = [255, 0, 0, 255] // red
   const y = [255, 255, 0, 255] // yellow
   const b = [0, 0, 255, 255] // blue
@@ -17,15 +17,15 @@ export default function getLoadingTexture(device: GPUDevice): GPUTexture {
 
   const texture = device.createTexture({
     label: 'yellow F on red',
-    size: [kTextureWidth, kTextureHeight],
+    size: [textureWidth, textureHeight],
     format: 'rgba8unorm',
     usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
   })
   device.queue.writeTexture(
     { texture },
     textureData,
-    { bytesPerRow: kTextureWidth * 4 },
-    { width: kTextureWidth, height: kTextureHeight }
+    { bytesPerRow: textureWidth * 4 },
+    { width: textureWidth, height: textureHeight }
   )
 
   return texture

src/logic/texture.zig renamed to src/logic/asset.zig

@@ -7,29 +7,23 @@ const SHADER_TRIANGLE_INDICIES = [_]usize{
     2, 3, 0,
 };
 
-pub const AssetZig = struct {
-    points: [4]PointUV,
-    texture_id: u32,
-    id: u32,
-};
-
-pub const TEXTURE_VERTEX_BUFFER_SIZE: usize = 6 * 6; // 6 vertices, each with 6 attributes (x, y, z, w, u, v)
-pub const TEXTURE_PICK_VERTEX_BUFFER_SIZE: usize = 7 * 6; // 6 vertices, each with 7 attributes (x, y, z, w, u, v, id)
-
-pub const Texture = struct {
+pub const Asset = struct {
     id: u32,
     points: [4]PointUV,
     texture_id: u32,
 
-    pub fn new(id: u32, points: [4]PointUV, texture_id: u32) Texture {
-        return Texture{
+    pub const VERTEX_BUFFER_SIZE: usize = 6 * 6; // 6 vertices, each with 6 attributes (x, y, z, w, u, v)
+    pub const PICK_VERTEX_BUFFER_SIZE: usize = 7 * 6; // 6 vertices, each with 7 attributes (x, y, z, w, u, v, id)
+
+    pub fn new(id: u32, points: [4]PointUV, texture_id: u32) Asset {
+        return Asset{
             .id = id,
             .points = points,
             .texture_id = texture_id,
         };
     }
 
-    pub fn get_vertex_data(self: Texture, buffer: *[TEXTURE_VERTEX_BUFFER_SIZE]f32) void {
+    pub fn get_vertex_data(self: Asset, buffer: *[VERTEX_BUFFER_SIZE]f32) void {
         var i: usize = 0;
 
         for (SHADER_TRIANGLE_INDICIES) |index| {
@@ -44,7 +38,7 @@ pub const Texture = struct {
         }
     }
 
-    pub fn get_vertex_pick_data(self: Texture, buffer: *[TEXTURE_PICK_VERTEX_BUFFER_SIZE]f32) void {
+    pub fn get_vertex_pick_data(self: Asset, buffer: *[PICK_VERTEX_BUFFER_SIZE]f32) void {
         var i: usize = 0;
 
         for (SHADER_TRIANGLE_INDICIES) |index| {
@@ -60,17 +54,23 @@ pub const Texture = struct {
         }
     }
 
-    pub fn update_coords(self: *Texture, new_points: [4]Types.PointUV) void {
+    pub fn update_coords(self: *Asset, new_points: [4]Types.PointUV) void {
         for (&self.points, 0..) |*item, i| {
             item.* = new_points[i];
         }
     }
 
-    pub fn serialize(self: Texture) AssetZig {
-        return AssetZig{
+    pub fn serialize(self: Asset) SerializedAsset {
+        return SerializedAsset{
             .points = self.points,
             .texture_id = self.texture_id,
             .id = self.id,
         };
     }
 };
+
+pub const SerializedAsset = struct {
+    points: [4]PointUV,
+    texture_id: u32,
+    id: u32,
+};

src/logic/index.d.ts

@@ -11,7 +11,12 @@ interface PointUV {
 }
 
 type ZigF32Array = { typedArray: Float32Array }
-type AssetZig = {
+type ZigAssetInput = {
+  id: number
+  points: PointUV[]
+  texture_id: number
+}
+type ZigAssetOutput = {
   id: number
   points: PointUV[]
   texture_id: number
@@ -21,7 +26,7 @@ declare module '*.zig' {
   export const init_state: (width: number, height: number) => void
   export const add_asset: (maybe_asset_id: number, points: PointUV[], texture_id: number) => void
   export const remove_asset: () => void
-  export const reset_assets: (assets: AssetZig[], with_snapshot: boolean) => void
+  export const reset_assets: (assets: ZigAssetInput[], with_snapshot: boolean) => void
 
   export const on_update_pick: (id: number) => void
   export const on_pointer_down: (x: number, y: number) => void
@@ -36,7 +41,7 @@ declare module '*.zig' {
     pick_texture: (vertexData: ZigF32Array, texture_id: number) => void
     pick_triangle: (vertexData: ZigF32Array) => void
   }) => void
-  export const connect_on_asset_update_callback: (cb: (data: AssetZig[]) => void) => void
+  export const connect_on_asset_update_callback: (cb: (data: ZigAssetOutput[]) => void) => void
   export const connect_on_asset_selection_callback: (cb: (data: number) => void) => void
 
   export const canvas_render: VoidFunction