@luma.gl/webgl 9.0.0-alpha.9 → 9.0.0-beta.10

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -1,48 +1,52 @@
-import type {
-  RenderPipelineProps,
-  RenderPass,
-  Buffer,
-  Binding,
-  ShaderLayout,
-  PrimitiveTopology,
-  BindingLayout,
-  AttributeLayout
-} from '@luma.gl/api';
-import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-
-import type {GLParameters} from '../../types/webgl';
-import {getWebGLDataType} from '../converters/texture-formats';
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {UniformValue, RenderPipelineProps, Binding} from '@luma.gl/core';
+import type {ShaderLayout} from '@luma.gl/core';
+import type {RenderPass, VertexArray} from '@luma.gl/core';
+import {RenderPipeline, cast, splitUniformsAndBindings, log} from '@luma.gl/core';
+import {mergeShaderLayout} from '@luma.gl/core';
+// import {mergeShaderLayout, getAttributeInfosFromLayouts} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+
 import {getShaderLayout} from '../helpers/get-shader-layout';
-import {withDeviceParameters, withGLParameters} from '../converters/device-parameters';
+import {withDeviceAndGLParameters} from '../converters/device-parameters';
 import {setUniform} from '../helpers/set-uniform';
 // import {copyUniform, checkUniformValues} from '../../classes/uniforms';
 
-import WebGLDevice from '../webgl-device';
-import WEBGLBuffer from './webgl-buffer';
-import WEBGLShader from './webgl-shader';
-import WEBGLTexture from './webgl-texture';
-import WEBGLVertexArrayObject from '../objects/webgl-vertex-array-object';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from './webgl-buffer';
+import {WEBGLShader} from './webgl-shader';
+import {WEBGLFramebuffer} from './webgl-framebuffer';
+import {WEBGLTexture} from './webgl-texture';
+import {WEBGLTextureView} from './webgl-texture-view';
+import {WEBGLRenderPass} from './webgl-render-pass';
+import {WEBGLTransformFeedback} from './webgl-transform-feedback';
+import {getGLDrawMode} from '../helpers/webgl-topology-utils';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 /** Creates a new render pipeline */
-export default class WEBGLRenderPipeline extends RenderPipeline {
+export class WEBGLRenderPipeline extends RenderPipeline {
+  /** The WebGL device that created this render pipeline */
   device: WebGLDevice;
+  /** Handle to underlying WebGL program */
   handle: WebGLProgram;
+  /** vertex shader */
   vs: WEBGLShader;
+  /** fragment shader */
   fs: WEBGLShader;
-  layout: ShaderLayout;
-
-  // configuration: ProgramConfiguration;
-  // Experimental flag to avoid deleting Program object while it is cached
+  /** The layout extracted from shader by WebGL introspection APIs */
+  introspectedLayout: ShaderLayout;
+
+  /** Uniforms set on this model */
+  uniforms: Record<string, UniformValue> = {};
+  /** Bindings set on this model */
+  bindings: Record<string, Binding> = {};
+  /** WebGL varyings */
   varyings: string[] | null = null;
-  vertexArrayObject: WEBGLVertexArrayObject;
-  _indexBuffer?: Buffer;
-  uniforms: Record<string, any> = {};
-  bindings: Record<string, any> = {};
-  _textureUniforms: Record<string, any> = {};
-  _textureIndexCounter: number = 0;
+
   _uniformCount: number = 0;
   _uniformSetters: Record<string, Function> = {}; // TODO are these used?
 
@@ -50,8 +54,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     super(device, props);
     this.device = device;
     this.handle = this.props.handle || this.device.gl.createProgram();
-    // @ts-expect-error
-    this.handle.__SPECTOR_Metadata = {id: this.props.id};
+    this.device.setSpectorMetadata(this.handle, {id: this.props.id});
 
     // Create shaders if needed
     this.vs = cast<WEBGLShader>(props.vs);
@@ -63,18 +66,32 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     // @ts-expect-error WebGL only
     const {varyings, bufferMode = GL.SEPARATE_ATTRIBS} = props;
     if (varyings && varyings.length > 0) {
-      this.device.assertWebGL2();
       this.varyings = varyings;
-      this.device.gl2?.transformFeedbackVaryings(this.handle, varyings, bufferMode);
+      this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
     }
 
-    this._compileAndLink();
+    this._linkShaders();
 
-    this.layout = props.layout || getShaderLayout(this.device.gl, this.handle);
-    this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
+    log.time(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
+    log.timeEnd(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+
+    // Merge provided layout with introspected layout
+    this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
+
+    // WebGPU has more restrictive topology support than WebGL
+    switch (this.props.topology) {
+      case 'triangle-fan-webgl':
+      case 'line-loop-webgl':
+        log.warn(
+          `Primitive topology ${this.props.topology} is deprecated and will be removed in v9.1`
+        );
+        break;
+      default:
+    }
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.device.gl.deleteProgram(this.handle);
       // this.handle = null;
@@ -82,51 +99,35 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  setIndexBuffer(indexBuffer: Buffer): void {
-    const webglBuffer = cast<WEBGLBuffer>(indexBuffer);
-    this.vertexArrayObject.setElementBuffer(webglBuffer);
-    this._indexBuffer = indexBuffer;
-  }
-
-  /** @todo needed for portable model */
-  setAttributes(attributes: Record<string, Buffer>): void {
-    for (const [name, buffer] of Object.entries(attributes)) {
-      const webglBuffer = cast<WEBGLBuffer>(buffer);
-      const attribute = getAttributeLayout(this.layout, name);
-      if (!attribute) {
-        log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
-        continue;
-      }
-      const decoded = decodeVertexFormat(attribute.format);
-      const {type: typeString, components: size, byteLength: stride, normalized, integer} = decoded;
-      const divisor = attribute.stepMode === 'instance' ? 1 : 0;
-      const type = getWebGLDataType(typeString);
-      this.vertexArrayObject.setBuffer(attribute.location, webglBuffer, {
-        size,
-        type,
-        stride,
-        offset: 0,
-        normalized,
-        integer,
-        divisor: attribute.stepMode === 'instance' ? 1 : 0
-      });
-    }
-  }
-
-  /** @todo needed for portable model */
+  /**
+   * Bindings include: textures, samplers and uniform buffers
+   * @todo needed for portable model
+   */
   setBindings(bindings: Record<string, Binding>): void {
     // if (log.priority >= 2) {
     //   checkUniformValues(uniforms, this.id, this._uniformSetters);
     // }
 
     for (const [name, value] of Object.entries(bindings)) {
-      const binding = this.layout.bindings.find((binding) => binding.name === name);
+      // Accept both `xyz` and `xyzUniforms` as valid names for `xyzUniforms` uniform block
+      // This convention allows shaders to name uniform blocks as `uniform appUniforms {} app;`
+      // and reference them as `app` from both GLSL and JS.
+      // TODO - this is rather hacky - we could also remap the name directly in the shader layout.
+      const binding =
+        this.shaderLayout.bindings.find(binding => binding.name === name) ||
+        this.shaderLayout.bindings.find(binding => binding.name === `${name}Uniforms`);
+
       if (!binding) {
-        log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
-        continue;
+        const validBindings = this.shaderLayout.bindings
+          .map(binding => `"${binding.name}"`)
+          .join(', ');
+        log.warn(
+          `Unknown binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`
+        )();
+        continue; // eslint-disable-line no-continue
       }
       if (!value) {
-        log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
+        log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
       }
       switch (binding.type) {
         case 'uniform':
@@ -136,7 +137,13 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
           }
           break;
         case 'texture':
-          if (!(value instanceof WEBGLTexture)) {
+          if (
+            !(
+              value instanceof WEBGLTextureView ||
+              value instanceof WEBGLTexture ||
+              value instanceof WEBGLFramebuffer
+            )
+          ) {
             throw new Error('texture value');
           }
           break;
@@ -151,17 +158,14 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  setUniforms(uniforms: Record<string, any>) {
-    // TODO - check against layout
-    Object.assign(this.uniforms, uniforms);
-  }
-
   /** @todo needed for portable model
    * @note The WebGL API is offers many ways to draw things
    * This function unifies those ways into a single call using common parameters with sane defaults
    */
   draw(options: {
-    renderPass?: RenderPass;
+    renderPass: RenderPass;
+    /** vertex attributes */
+    vertexArray: VertexArray;
     vertexCount?: number;
     indexCount?: number;
     instanceCount?: number;
@@ -169,82 +173,122 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     firstIndex?: number;
     firstInstance?: number;
     baseVertex?: number;
+    transformFeedback?: WEBGLTransformFeedback;
   }): boolean {
     const {
-      renderPass = this.device.getDefaultRenderPass(),
+      renderPass,
+      vertexArray,
       vertexCount,
-      indexCount,
+      // indexCount,
       instanceCount,
       firstVertex = 0,
-      firstIndex,
-      firstInstance,
-      baseVertex
+      // firstIndex,
+      // firstInstance,
+      // baseVertex,
+      transformFeedback
     } = options;
 
-    const drawMode = getDrawMode(this.props.topology);
-    const isIndexed: boolean = Boolean(this._indexBuffer);
-    const indexType = this._indexBuffer?.props.indexType === 'uint16' ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
-    const isInstanced: boolean = Number(options.instanceCount) > 0;
+    const glDrawMode = getGLDrawMode(this.props.topology);
+    const isIndexed: boolean = Boolean(vertexArray.indexBuffer);
+    const glIndexType = (vertexArray.indexBuffer as WEBGLBuffer)?.glIndexType;
+    const isInstanced: boolean = Number(instanceCount) > 0;
+
+    // If we are using async linking, we need to wait until linking completes
+    if (this.linkStatus !== 'success') {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+      return false;
+    }
 
     // Avoid WebGL draw call when not rendering any data or values are incomplete
     // Note: async textures set as uniforms might still be loading.
     // Now that all uniforms have been updated, check if any texture
     // in the uniforms is not yet initialized, then we don't draw
-    if (!this._areTexturesRenderable() || options.vertexCount === 0) {
-      // (isInstanced && instanceCount === 0)
+    if (!this._areTexturesRenderable() || vertexCount === 0) {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
       return false;
     }
 
+    // (isInstanced && instanceCount === 0)
+    if (vertexCount === 0) {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - no vertices to draw`)();
+      return true;
+    }
+
     this.device.gl.useProgram(this.handle);
 
-    this.vertexArrayObject.bind(() => {
-      const primitiveMode = getGLPrimitive(this.props.topology);
-      const transformFeedback: any = null;
-      if (transformFeedback) {
-        transformFeedback.begin(primitiveMode);
-      }
+    // Note: Rebinds constant attributes before each draw call
+    vertexArray.bindBeforeRender(renderPass);
 
-      // We have to apply bindings before every draw call since other draw calls will overwrite
-      this._applyBindings();
-      this._applyUniforms();
-
-      // TODO - double context push/pop
-      withDeviceParameters(this.device, this.props.parameters, () => {
-        withGLParameters(this.device, {framebuffer: renderPass.props.framebuffer}, () => {
-          // TODO - Use polyfilled WebGL2RenderingContext instead of ANGLE extension
-          if (isIndexed && isInstanced) {
-            // ANGLE_instanced_arrays extension
-            this.device.gl2?.drawElementsInstanced(
-              drawMode,
-              vertexCount || 0, // indexCount?
-              indexType,
-              firstVertex,
-              instanceCount || 0
-            );
-            // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
-            //   this.device.gl2.drawRangeElements(drawMode, start, end, vertexCount, indexType, offset);
-          } else if (isIndexed) {
-            this.device.gl.drawElements(drawMode, vertexCount || 0, indexType, firstVertex); // indexCount?
-          } else if (isInstanced) {
-            this.device.gl2?.drawArraysInstanced(drawMode, firstVertex, vertexCount || 0, instanceCount || 0);
-          } else {
-            this.device.gl.drawArrays(drawMode, firstVertex, vertexCount || 0);
-          }
-        });
+    if (transformFeedback) {
+      transformFeedback.begin(this.props.topology);
+    }
+
+    // We have to apply bindings before every draw call since other draw calls will overwrite
+    this._applyBindings();
+    this._applyUniforms();
+
+    const webglRenderPass = renderPass as WEBGLRenderPass;
+
+    withDeviceAndGLParameters(
+      this.device,
+      this.props.parameters,
+      webglRenderPass.glParameters,
+      () => {
+        if (isIndexed && isInstanced) {
+          this.device.gl.drawElementsInstanced(
+            glDrawMode,
+            vertexCount || 0, // indexCount?
+            glIndexType,
+            firstVertex,
+            instanceCount || 0
+          );
+          // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
+          //   this.device.gldrawRangeElements(glDrawMode, start, end, vertexCount, glIndexType, offset);
+        } else if (isIndexed) {
+          this.device.gl.drawElements(glDrawMode, vertexCount || 0, glIndexType, firstVertex); // indexCount?
+        } else if (isInstanced) {
+          this.device.gl.drawArraysInstanced(
+            glDrawMode,
+            firstVertex,
+            vertexCount || 0,
+            instanceCount || 0
+          );
+        } else {
+          this.device.gl.drawArrays(glDrawMode, firstVertex, vertexCount || 0);
+        }
 
         if (transformFeedback) {
           transformFeedback.end();
         }
-      });
-    });
+      }
+    );
+
+    vertexArray.unbindAfterRender(renderPass);
 
     return true;
   }
 
+  // DEPRECATED METHODS
+
+  override setUniformsWebGL(uniforms: Record<string, UniformValue>) {
+    const {bindings} = splitUniformsAndBindings(uniforms);
+    Object.keys(bindings).forEach(name => {
+      log.warn(
+        `Unsupported value "${JSON.stringify(
+          bindings[name]
+        )}" used in setUniforms() for key ${name}. Use setBindings() instead?`
+      )();
+    });
+    // TODO - check against layout
+    Object.assign(this.uniforms, uniforms);
+  }
+
+  // PRIVATE METHODS
+
   // setAttributes(attributes: Record<string, Buffer>): void {}
   // setBindings(bindings: Record<string, Binding>): void {}
 
-  protected _compileAndLink() {
+  protected async _linkShaders() {
     const {gl} = this.device;
     gl.attachShader(this.handle, this.vs.handle);
     gl.attachShader(this.handle, this.fs.handle);
@@ -252,23 +296,89 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     gl.linkProgram(this.handle);
     log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
 
-    // Avoid checking program linking error in production
-    // @ts-expect-error
-    if (gl.debug || log.level > 0) {
-      const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
-      if (!linked) {
-        throw new Error(`Error linking: ${gl.getProgramInfoLog(this.handle)}`);
-      }
+    // TODO Avoid checking program linking error in production
+    if (log.level === 0) {
+      // return;
+    }
 
-      gl.validateProgram(this.handle);
-      const validated = gl.getProgramParameter(this.handle, gl.VALIDATE_STATUS);
-      if (!validated) {
-        throw new Error(`Error validating: ${gl.getProgramInfoLog(this.handle)}`);
-      }
+    if (!this.device.features.has('compilation-status-async-webgl')) {
+      const status = this._getLinkStatus();
+      this._reportLinkStatus(status);
+      return;
     }
+
+    // async case
+    log.once(1, 'RenderPipeline linking is asynchronous')();
+    await this._waitForLinkComplete();
+    log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+    const status = this._getLinkStatus();
+    this._reportLinkStatus(status);
   }
 
-  // PRIVATE METHODS
+  /** Report link status. First, check for shader compilation failures if linking fails */
+  _reportLinkStatus(status: 'success' | 'linking' | 'validation') {
+    switch (status) {
+      case 'success':
+        return;
+
+      default:
+        // First check for shader compilation failures if linking fails
+        if (this.vs.compilationStatus === 'error') {
+          this.vs.debugShader();
+          throw new Error(`Error during compilation of shader ${this.vs.id}`);
+        }
+        if (this.fs?.compilationStatus === 'error') {
+          this.vs.debugShader();
+          throw new Error(`Error during compilation of shader ${this.fs.id}`);
+        }
+        throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+    }
+  }
+
+  /**
+   * Get the shader compilation status
+   * TODO - Load log even when no error reported, to catch warnings?
+   * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
+   */
+  _getLinkStatus(): 'success' | 'linking' | 'validation' {
+    const {gl} = this.device;
+    const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
+    if (!linked) {
+      this.linkStatus = 'error';
+      return 'linking';
+    }
+
+    gl.validateProgram(this.handle);
+    const validated = gl.getProgramParameter(this.handle, gl.VALIDATE_STATUS);
+    if (!validated) {
+      this.linkStatus = 'error';
+      return 'validation';
+    }
+
+    this.linkStatus = 'success';
+    return 'success';
+  }
+
+  /** Use KHR_parallel_shader_compile extension if available */
+  async _waitForLinkComplete(): Promise<void> {
+    const waitMs = async (ms: number) => await new Promise(resolve => setTimeout(resolve, ms));
+    const DELAY_MS = 10; // Shader compilation is typically quite fast (with some exceptions)
+
+    // If status polling is not available, we can't wait for completion. Just wait a little to minimize blocking
+    if (!this.device.features.has('compilation-status-async-webgl')) {
+      await waitMs(DELAY_MS);
+      return;
+    }
+
+    const {gl} = this.device;
+    for (;;) {
+      const complete = gl.getProgramParameter(this.handle, GL.COMPLETION_STATUS_KHR);
+      if (complete) {
+        return;
+      }
+      await waitMs(DELAY_MS);
+    }
+  }
 
   /**
    * Checks if all texture-values uniforms are renderable (i.e. loaded)
@@ -278,14 +388,9 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   _areTexturesRenderable() {
     let texturesRenderable = true;
 
-    for (const [name, texture] of Object.entries(this._textureUniforms)) {
-      texture.update();
-      texturesRenderable = texturesRenderable && texture.loaded;
-    }
-
-    for (const [name, texture] of Object.entries(this.bindings)) {
-      // texture.update();
-      if (texture.loaded !== undefined) {
+    for (const [, texture] of Object.entries(this.bindings)) {
+      if (texture instanceof WEBGLTexture) {
+        texture.update();
         texturesRenderable = texturesRenderable && texture.loaded;
       }
     }
@@ -293,19 +398,22 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     return texturesRenderable;
   }
 
-  /** Apply any bindings */
+  /** Apply any bindings (before each draw call) */
   _applyBindings() {
-    this.device.gl.useProgram(this.handle);
-
-    const {gl2} = this.device;
-    if (!gl2) {
-      throw new Error('bindings');
+    // If we are using async linking, we need to wait until linking completes
+    if (this.linkStatus !== 'success') {
+      return;
     }
 
+    const {gl} = this.device;
+    gl.useProgram(this.handle);
+
     let textureUnit = 0;
     let uniformBufferIndex = 0;
-    for (const binding of this.layout.bindings) {
-      const value = this.bindings[binding.name];
+    for (const binding of this.shaderLayout.bindings) {
+      // Accept both `xyz` and `xyzUniforms` as valid names for `xyzUniforms` uniform block
+      const value =
+        this.bindings[binding.name] || this.bindings[binding.name.replace(/Uniforms$/, '')];
       if (!value) {
         throw new Error(`No value for binding ${binding.name} in ${this.id}`);
       }
@@ -313,20 +421,23 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
         case 'uniform':
           // Set buffer
           const {name} = binding;
-          const location = gl2.getUniformBlockIndex(this.handle, name);
-          if (location === GL.INVALID_INDEX) {
+          const location = gl.getUniformBlockIndex(this.handle, name);
+          if ((location as GL) === GL.INVALID_INDEX) {
             throw new Error(`Invalid uniform block name ${name}`);
           }
-          gl2.uniformBlockBinding(this.handle, uniformBufferIndex, location);
+          gl.uniformBlockBinding(this.handle, uniformBufferIndex, location);
           // console.debug(binding, location);
           if (value instanceof WEBGLBuffer) {
-            gl2.bindBufferBase(GL.UNIFORM_BUFFER, uniformBufferIndex, value.handle);
+            gl.bindBufferBase(GL.UNIFORM_BUFFER, uniformBufferIndex, value.handle);
           } else {
-            gl2.bindBufferRange(
+            gl.bindBufferRange(
               GL.UNIFORM_BUFFER,
               uniformBufferIndex,
+              // @ts-expect-error
               value.buffer.handle,
+              // @ts-expect-error
               value.offset || 0,
+              // @ts-expect-error
               value.size || value.buffer.byteLength - value.offset
             );
           }
@@ -334,13 +445,35 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
           break;
 
         case 'texture':
-          if (!(value instanceof WEBGLTexture)) {
+          if (
+            !(
+              value instanceof WEBGLTextureView ||
+              value instanceof WEBGLTexture ||
+              value instanceof WEBGLFramebuffer
+            )
+          ) {
             throw new Error('texture');
           }
-          const texture: WEBGLTexture = value;
-          gl2.activeTexture(GL.TEXTURE0 + textureUnit);
-          gl2.bindTexture(texture.target, texture.handle);
-          // gl2.bindSampler(textureUnit, sampler.handle);
+          let texture: WEBGLTexture;
+          if (value instanceof WEBGLTextureView) {
+            texture = value.texture;
+          } else if (value instanceof WEBGLTexture) {
+            texture = value;
+          } else if (
+            value instanceof WEBGLFramebuffer &&
+            value.colorAttachments[0] instanceof WEBGLTextureView
+          ) {
+            log.warn(
+              'Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead'
+            )();
+            texture = value.colorAttachments[0].texture;
+          } else {
+            throw new Error('No texture');
+          }
+
+          gl.activeTexture(GL.TEXTURE0 + textureUnit);
+          gl.bindTexture(texture.target, texture.handle);
+          // gl.bindSampler(textureUnit, sampler.handle);
           textureUnit += 1;
           break;
 
@@ -355,71 +488,17 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
+  /**
+   * Due to program sharing, uniforms need to be reset before every draw call
+   * (though caching will avoid redundant WebGL calls)
+   */
   _applyUniforms() {
-    for (const uniformLayout of this.layout.uniforms || []) {
+    for (const uniformLayout of this.shaderLayout.uniforms || []) {
       const {name, location, type, textureUnit} = uniformLayout;
-      const value = this.uniforms[name] || textureUnit;
+      const value = this.uniforms[name] ?? textureUnit;
       if (value !== undefined) {
         setUniform(this.device.gl, location, type, value);
       }
     }
   }
 }
-
-/** Get the primitive type for transform feedback */
-function getDrawMode(
-  topology: PrimitiveTopology
-): GL.POINTS | GL.LINES | GL.LINE_STRIP | GL.LINE_LOOP | GL.TRIANGLES | GL.TRIANGLE_STRIP | GL.TRIANGLE_FAN {
-  // prettier-ignore
-  switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINE_STRIP;
-  case 'line-loop': return GL.LINE_LOOP;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLE_STRIP;
-  case 'triangle-fan': return GL.TRIANGLE_FAN;
-  default: throw new Error(topology);
-  }
-}
-
-/** Get the primitive type for transform feedback */
-function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
-  // prettier-ignore
-  switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINES;
-  case 'line-loop': return GL.LINES;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLES;
-  case 'triangle-fan': return GL.TRIANGLES;
-  default: throw new Error(topology);
-  }
-}
-
-function getAttributesByLocation(
-  attributes: Record<string, Buffer>,
-  layout: ShaderLayout
-): Record<number, Buffer> {
-  const byLocation: Record<number, Buffer> = {};
-  for (const [name, buffer] of Object.entries(attributes)) {
-    const attribute = getAttributeLayout(layout, name);
-    if (attribute) {
-      byLocation[attribute.location] = buffer;
-    }
-  }
-  return byLocation;
-}
-
-function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | null {
-  return layout.attributes.find((binding) => binding.name === name) || null;
-}
-
-function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
-  const binding = layout.bindings.find((binding) => binding.name === name);
-  if (!binding) {
-    throw new Error(`Unknown binding ${name}`);
-  }
-  return binding;
-}