refactor: remove texture info and overlay (#649)

shlomnissan · web-flow · commit 858a23d077f8 · 2026-04-10T15:37:05.000-07:00
Summary:

This PR removes the texture info accessor and the overlay that used it.

The overlay was used for debugging purposes so it's safe to remove it.
The texture info is bad because it exposes renderer information via public API.
It's also added to the WebGL renderer instead of the Renderer base class.
diff --git a/examples/chunk_streaming/chunk_info_overlay.ts b/examples/chunk_streaming/chunk_info_overlay.ts
diff --git a/examples/chunk_streaming/index.html b/examples/chunk_streaming/index.html
@@ -21,18 +21,6 @@
         height: 100%;
       }
 
-      #chunk-info {
-        position: absolute;
-        bottom: 0.5em;
-        right: 0.3em;
-        width: 40%;
-        margin: 1em;
-        padding: 1em;
-        color: white;
-        background-color: rgba(0, 0, 0, 0.5);
-        user-select: none;
-      }
-
       #left-overlays {
         position: absolute;
         bottom: 0.5em;
@@ -76,7 +64,6 @@
 
   <body>
     <canvas id="canvas"></canvas>
-    <div id="chunk-info">Chunks: Loading...</div>
     <div id="left-overlays">
       <div id="time-point"></div>
       <div id="scale-bar-box">
diff --git a/examples/chunk_streaming/main.ts b/examples/chunk_streaming/main.ts
@@ -6,7 +6,6 @@ import {
   OrthographicCamera,
 } from "@";
 import { PanZoomControls } from "@/objects/cameras/controls";
-import { ChunkInfoOverlay } from "./chunk_info_overlay";
 import { ScaleBar } from "./scale_bar";
 import { addDimensionSlider } from "../lil_gui_utils";
 import {
@@ -62,12 +61,6 @@ const imageLayer = new ImageLayer({
 });
 imageLayer.debugMode = true;
 
-const overlaySelector = document.querySelector<HTMLDivElement>("#chunk-info")!;
-const chunkInfoOverlay = new ChunkInfoOverlay({
-  textDiv: overlaySelector,
-  imageLayer: imageLayer,
-});
-
 const timePointDiv = document.querySelector<HTMLDivElement>("#time-point")!;
 const timePointOverlay = {
   update(_idetik: Idetik, _timestamp?: DOMHighResTimeStamp) {
@@ -91,13 +84,12 @@ new Idetik({
       layers: [imageLayer],
     },
   ],
-  overlays: [chunkInfoOverlay, timePointOverlay, scaleBar],
+  overlays: [timePointOverlay, scaleBar],
   showStats: true,
 }).start();
 
 const controls = {
   showWireframes: imageLayer.debugMode,
-  showChunkInfoOverlay: true,
   showTimePointOverlay: true,
   window: initialWindow,
   level: initialLevel,
@@ -147,13 +139,6 @@ overlaysFolder
   .name("Show tile wireframes")
   .onChange((show: boolean) => (imageLayer.debugMode = show));
 
-overlaysFolder
-  .add(controls, "showChunkInfoOverlay")
-  .name("Show chunk information overlay")
-  .onChange((show: boolean) => {
-    overlaySelector.style.display = show ? "block" : "none";
-  });
-
 const contrastFolder = gui.addFolder("Window/Level");
 contrastFolder
   .add(controls, "window", 1, 100, 1)
diff --git a/src/idetik.ts b/src/idetik.ts
@@ -1,6 +1,7 @@
 import { WebGLRenderer } from "./renderers/webgl_renderer";
 import { Logger } from "./utilities/logger";
 import { ChunkManager } from "./core/chunk_manager";
+import { Renderer } from "./core/renderer";
 import { createStats, type Stats } from "./utilities/stats";
 import {
   parseViewportConfigs,
@@ -28,8 +29,8 @@ export type IdetikContext = {
 export class Idetik {
   private readonly chunkManager_: ChunkManager;
   private readonly context_: IdetikContext;
-  private readonly renderer_: WebGLRenderer;
-  private viewports_: Viewport[];
+  private readonly renderer_: Renderer;
+  private readonly viewports_: Viewport[];
   public readonly canvas: HTMLCanvasElement;
   public readonly overlays: Overlay[];
   private readonly stats_?: Stats;
@@ -136,10 +137,6 @@ export class Idetik {
     return this.renderer_.height;
   }
 
-  public get textureInfo() {
-    return this.renderer_.textureInfo;
-  }
-
   public get viewports(): readonly Viewport[] {
     return this.viewports_;
   }
diff --git a/src/renderers/webgl_renderer.ts b/src/renderers/webgl_renderer.ts
@@ -112,10 +112,6 @@ export class WebGLRenderer extends Renderer {
     this.renderedObjects_ = this.renderedObjectsPerFrame_;
   }
 
-  public get textureInfo() {
-    return this.textures_.textureInfo;
-  }
-
   private initStencil() {
     // We use the stencil buffer to mark pixels objects have been drawn,
     // which is used to avoid overdrawing high resolution tiles with lower
diff --git a/src/renderers/webgl_textures.ts b/src/renderers/webgl_textures.ts
@@ -86,13 +86,6 @@ export class WebGLTextures {
     this.textureCount_ = 0;
   }
 
-  public get textureInfo() {
-    return {
-      textures: this.textureCount_,
-      totalBytes: this.gpuTextureBytes_,
-    };
-  }
-
   private alreadyActive(texture: Texture) {
     return this.currentTexture_ === texture && !texture.needsUpdate;
   }

Original file line number	Diff line number	Diff line change
`@@ -86,13 +86,6 @@ export class WebGLTextures {`
`86`	`86`	`this.textureCount_ = 0;`
`87`	`87`	`}`
`88`	`88`
`89`		`- public get textureInfo() {`
`90`		`- return {`
`91`		`- textures: this.textureCount_,`
`92`		`- totalBytes: this.gpuTextureBytes_,`
`93`		`- };`
`94`		`- }`
`95`		`-`
`96`	`89`	`private alreadyActive(texture: Texture) {`
`97`	`90`	`return this.currentTexture_ === texture && !texture.needsUpdate;`
`98`	`91`	`}`