refactor: add texture upload/dispose api to renderer (#692)

Summary:

adds abstract uploadTexture and disposeTexture to the renderer base and
implements them in both backends. this is going to be used for uploading textures
directly to the gpu without having to do it lazily through the existing render path

Author: shlomnissan

src/core/renderer.ts

@@ -2,6 +2,7 @@ import { Camera } from "../objects/cameras/camera";
 import { Color, ColorLike } from "../math/color";
 import { Layer } from "./layer";
 import { Viewport } from "./viewport";
+import { Texture } from "../objects/textures/texture";
 
 export abstract class Renderer {
   private readonly canvas_: HTMLCanvasElement | null;
@@ -64,6 +65,10 @@ export abstract class Renderer {
 
   public abstract get gpuTextureCount(): number;
 
+  public abstract uploadTexture(texture: Texture): void;
+
+  public abstract disposeTexture(texture: Texture): void;
+
   public set backgroundColor(color: ColorLike) {
     this.backgroundColor_ = Color.from(color);
   }

src/renderers/webgl_renderer.ts

@@ -13,6 +13,7 @@ import { Geometry, Primitive } from "../core/geometry";
 import { Box2 } from "../math/box2";
 import { Viewport } from "../core/viewport";
 import { Camera } from "../objects/cameras/camera";
+import { Texture } from "../objects/textures/texture";
 
 import { mat4, vec2, vec3, vec4 } from "gl-matrix";
 import { Frustum } from "../math/frustum";
@@ -166,7 +167,7 @@ export class WebGLRenderer extends Renderer {
   protected renderObject(layer: Layer, objectIndex: number, camera: Camera) {
     const object = layer.objects[objectIndex];
     object.popStaleTextures().forEach((texture) => {
-      this.textures_.disposeTexture(texture);
+      this.textures_.dispose(texture);
     });
 
     if (!object.programName) return;
@@ -276,6 +277,14 @@ export class WebGLRenderer extends Renderer {
     }
   }
 
+  public override uploadTexture(texture: Texture) {
+    this.textures_.uploadTexture(texture);
+  }
+
+  public override disposeTexture(texture: Texture) {
+    this.textures_.dispose(texture);
+  }
+
   private glGetPrimitive(type: Primitive) {
     switch (type) {
       case "points":

src/renderers/webgl_textures.ts

@@ -47,25 +47,13 @@ export class WebGLTextures {
         `Texture index ${index} must be in [0, ${this.maxTextureUnits_ - 1}]`
       );
     }
-    this.gl_.activeTexture(this.gl_.TEXTURE0 + index);
-
-    const textureType = this.getTextureType(texture);
-    const info = this.getDataFormatInfo(texture.dataFormat, texture.dataType);
-
-    if (!this.textures_.has(texture)) {
-      this.generateTexture(texture, info, textureType);
-    }
 
     const textureId = this.textures_.get(texture);
-    if (!textureId) {
-      throw new Error("Failed to retrieve texture ID");
-    }
-
-    this.gl_.bindTexture(textureType, textureId);
-    if (texture.needsUpdate && texture.data !== null) {
-      this.configureTextureParameters(texture, textureType);
-      this.uploadTextureData(texture, info, textureType);
-      texture.needsUpdate = false;
+    if (textureId && !texture.needsUpdate) {
+      this.gl_.activeTexture(this.gl_.TEXTURE0 + index);
+      this.gl_.bindTexture(this.getTextureType(texture), textureId);
+    } else {
+      this.uploadTexture(texture, index);
     }
 
     this.currentTexture_ = texture;
@@ -123,7 +111,35 @@ export class WebGLTextures {
     }
   }
 
-  public disposeTexture(texture: Texture) {
+  public uploadTexture(texture: Texture, index = 0) {
+    if (this.textures_.has(texture) && !texture.needsUpdate) return;
+
+    if (texture.data === null) {
+      throw new Error("Cannot upload a texture that has no CPU data");
+    }
+
+    const textureType = this.getTextureType(texture);
+    const info = this.getDataFormatInfo(texture.dataFormat, texture.dataType);
+
+    this.gl_.activeTexture(this.gl_.TEXTURE0 + index);
+
+    if (!this.textures_.has(texture)) {
+      this.generateTexture(texture, info, textureType);
+    }
+
+    const textureId = this.textures_.get(texture);
+    if (!textureId) {
+      throw new Error("Failed to retrieve texture ID");
+    }
+
+    this.gl_.bindTexture(textureType, textureId);
+    this.configureTextureParameters(texture, textureType);
+    this.uploadTextureData(texture, info, textureType);
+
+    texture.needsUpdate = false;
+  }
+
+  public dispose(texture: Texture) {
     const id = this.textures_.get(texture);
     if (id) {
       this.gl_.deleteTexture(id);
@@ -142,7 +158,7 @@ export class WebGLTextures {
 
   public disposeAll() {
     for (const texture of Array.from(this.textures_.keys())) {
-      this.disposeTexture(texture);
+      this.dispose(texture);
     }
     this.gpuTextureBytes_ = 0;
     this.textureCount_ = 0;

src/renderers/webgpu/webgpu_renderer.ts

@@ -391,6 +391,14 @@ class WebGPURenderer extends Renderer {
     // in beginRenderPass(). There is no imperative clear command.
   }
 
+  public override uploadTexture(texture: Texture) {
+    this.texturePool_.get(texture);
+  }
+
+  public override disposeTexture(texture: Texture) {
+    this.texturePool_.dispose(texture);
+  }
+
   private setUniformsForObject(
     object: RenderableObject,
     pipeline: WebGPUPipeline,

src/renderers/webgpu/webgpu_texture_pool.ts

@@ -20,32 +20,34 @@ export default class WebGPUTexturePool {
     this.textures_ = [];
   }
 
-  public get(entry: Texture) {
-    const cached = this.textures_.find((t) => t.entry === entry);
-    if (cached) {
-      if (entry.needsUpdate) {
-        this.upload(entry, cached.texture);
-      }
-      return cached.texture;
+  public get(entry: Texture): GPUTexture {
+    let cached = this.textures_.find((t) => t.entry === entry);
+    if (cached && !entry.needsUpdate) return cached.texture;
+
+    if (entry.data === null) {
+      throw new Error("Cannot upload a texture that has no CPU data");
     }
 
-    const texture = this.device_.createTexture({
-      size: textureSize(entry),
-      dimension: entry instanceof Texture3D ? "3d" : "2d",
-      format: textureGPUFormat(entry),
-      usage:
-        GPUTextureUsage.TEXTURE_BINDING |
-        GPUTextureUsage.COPY_DST |
-        GPUTextureUsage.COPY_SRC,
-    });
+    if (!cached) {
+      const texture = this.device_.createTexture({
+        size: textureSize(entry),
+        dimension: entry instanceof Texture3D ? "3d" : "2d",
+        format: textureGPUFormat(entry),
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.COPY_SRC,
+      });
+      this.textures_.push({ entry: entry, texture: texture });
+      cached = this.textures_[this.textures_.length - 1];
+    }
 
-    this.upload(entry, texture);
-    this.textures_.push({ entry: entry, texture: texture });
+    this.upload(entry, cached.texture);
 
     entry.readTexel = (x, y, z) =>
-      this.readTexel(texture, entry.dataType, x, y, z);
+      this.readTexel(cached.texture, entry.dataType, x, y, z);
 
-    return texture;
+    return cached.texture;
   }
 
   private async readTexel(