v137 · webgpu
Texture Cache Manager
A GPU texture cache that stores procedurally generated frames. Click a cache slot to recall a frame via GPUTextureView — bound in the external-texture slot (Chrome 137+) — and apply a filter without re-creating the pipeline. Shows hit/miss stats and how one bind group layout serves both cached and live textures.
WebGPU not available — requires Chrome 113+.
Cache
Cache: 0 / 6 slots used — hits: 0 — misses: 0
Cached frames (click to recall):
Cached source texture
Filtered output (via externalTexture slot)
Code: cache lookup + bind group reuse
// Retrieve cached GPUTexture and bind via externalTexture slot (Chrome 137+)
function renderCachedFrame(device, cachedTex, filterPipeline, outputCanvas) {
const view = cachedTex.createView(); // GPUTextureView from cached texture
const bindGroup = device.createBindGroup({
layout: filterPipeline.getBindGroupLayout(0),
entries: [
// Same slot as GPUExternalTexture — now accepts GPUTextureView (v137+)
{ binding: 0, resource: view },
{ binding: 1, resource: sampler }
]
});
// No pipeline re-compilation needed — same layout works for cached frame
const enc = device.createCommandEncoder();
const pass = enc.beginRenderPass({ colorAttachments: [{ view: outView, … }] });
pass.setPipeline(filterPipeline);
pass.setBindGroup(0, bindGroup);
pass.draw(4); pass.end();
device.queue.submit([enc.finish()]);
}
Why this matters: Before Chrome 137, a texture cache that stored frames
as
GPUTexture objects could not reuse a pipeline with an
externalTexture binding layout — you'd need a separate pipeline with a
texture_2d<f32> layout. Now, one pipeline and one bind group layout
handles both live GPUExternalTexture (from video) and cached
GPUTextureView (from stored frames).