@luma.gl/webgl 9.2.6 → 9.3.0-alpha.4

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { WEBGLTexture } from "./adapter/resources/webgl-texture.js";
 export { WEBGLShader } from "./adapter/resources/webgl-shader.js";
 export { WEBGLSampler } from "./adapter/resources/webgl-sampler.js";
 export { WEBGLFramebuffer } from "./adapter/resources/webgl-framebuffer.js";
+export { WEBGLFence } from "./adapter/resources/webgl-fence.js";
 export { WEBGLRenderPipeline } from "./adapter/resources/webgl-render-pipeline.js";
 export { WEBGLCommandEncoder } from "./adapter/resources/webgl-command-encoder.js";
 export { WEBGLRenderPass } from "./adapter/resources/webgl-render-pass.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,aAAa,EAAC,mCAAgC;AACtD,YAAY,EAAC,YAAY,EAAC,mCAAgC;AAG1D,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAIpF,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,aAAa,EAAC,mCAAgC;AACtD,YAAY,EAAC,YAAY,EAAC,mCAAgC;AAG1D,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AACvE,OAAO,EAAC,UAAU,EAAC,2CAAwC;AAE3D,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAIpF,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/dist/index.js

@@ -13,6 +13,7 @@ export { WEBGLTexture } from "./adapter/resources/webgl-texture.js";
 export { WEBGLShader } from "./adapter/resources/webgl-shader.js";
 export { WEBGLSampler } from "./adapter/resources/webgl-sampler.js";
 export { WEBGLFramebuffer } from "./adapter/resources/webgl-framebuffer.js";
+export { WEBGLFence } from "./adapter/resources/webgl-fence.js";
 export { WEBGLRenderPipeline } from "./adapter/resources/webgl-render-pipeline.js";
 // export {WEBGLComputePipeline} from './adapter/resources/webgl-compute-pipeline';
 export { WEBGLCommandEncoder } from "./adapter/resources/webgl-command-encoder.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAWpC,wBAAwB;AACxB,OAAO,EAAC,aAAa,EAAC,mCAAgC;AAGtD,uBAAuB;AACvB,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAElE,yBAAyB;AACzB,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,mFAAmF;AACnF,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,mFAAmF;AACnF,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AACtE,2EAA2E;AAC3E,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAExE,wBAAwB;AACxB,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAEpF,wBAAwB;AAExB,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAEjG,yBAAyB;AACzB,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAE9E,0BAA0B;AAC1B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAWpC,wBAAwB;AACxB,OAAO,EAAC,aAAa,EAAC,mCAAgC;AAGtD,uBAAuB;AACvB,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAElE,yBAAyB;AACzB,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,mFAAmF;AACnF,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AACvE,OAAO,EAAC,UAAU,EAAC,2CAAwC;AAE3D,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,mFAAmF;AACnF,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AACtE,2EAA2E;AAC3E,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAExE,wBAAwB;AACxB,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAEpF,wBAAwB;AAExB,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAEjG,yBAAyB;AACzB,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAE9E,0BAA0B;AAC1B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/dist/utils/fill-array.js

@@ -8,7 +8,7 @@ export function fillArray(options) {
     const total = count * length;
     let copied = 0;
     for (let i = start; copied < length; copied++) {
-        target[i++] = source[copied];
+        target[i++] = source[copied] ?? 0;
     }
     while (copied < total) {
         // If we have copied less than half, copy everything we got

package/dist/utils/fill-array.js.map

@@ -1 +1 @@
-{"version":3,"file":"fill-array.js","sourceRoot":"","sources":["../../src/utils/fill-array.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,sEAAsE;AACtE,MAAM,UAAU,SAAS,CAAC,OAKzB;IACC,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAC,GAAG,OAAO,CAAC;IACvD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7B,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC7B,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;QAC9C,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,GAAG,KAAK,EAAE,CAAC;QACtB,2DAA2D;QAC3D,uCAAuC;QACvC,IAAI,MAAM,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;YAC5B,MAAM,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC;YACzD,MAAM,IAAI,CAAC,CAAC;QACd,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC;YACjE,MAAM,GAAG,KAAK,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC"}
+{"version":3,"file":"fill-array.js","sourceRoot":"","sources":["../../src/utils/fill-array.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,sEAAsE;AACtE,MAAM,UAAU,SAAS,CAAC,OAKzB;IACC,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAC,GAAG,OAAO,CAAC;IACvD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7B,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC7B,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;QAC9C,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,OAAO,MAAM,GAAG,KAAK,EAAE,CAAC;QACtB,2DAA2D;QAC3D,uCAAuC;QACvC,IAAI,MAAM,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;YAC5B,MAAM,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC;YACzD,MAAM,IAAI,CAAC,CAAC;QACd,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC;YACjE,MAAM,GAAG,KAAK,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC,MAAM,CAAC;AACxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.2.6",
+  "version": "9.3.0-alpha.4",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -40,12 +40,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "~9.2.0"
+    "@luma.gl/core": "9.2.0-alpha.6"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.2.6",
+    "@luma.gl/constants": "9.3.0-alpha.4",
     "@math.gl/types": "^4.1.0",
-    "@probe.gl/env": "^4.0.8"
+    "@probe.gl/env": "^4.1.1"
   },
-  "gitHead": "9c7a3adc09c7b23800df3f916762445ebc1fa924"
+  "gitHead": "7486e7b0377fb6ab961b4499828681bede60f3b1"
 }

package/src/adapter/helpers/get-shader-layout-from-glsl.ts

@@ -10,7 +10,7 @@ import type {
   VaryingBinding,
   AttributeShaderType
 } from '@luma.gl/core';
-import {getVariableShaderTypeInfo} from '@luma.gl/core';
+import {getVariableShaderTypeInfo, assertDefined} from '@luma.gl/core';
 
 import {GL, GLUniformType} from '@luma.gl/constants';
 import {
@@ -252,7 +252,11 @@ function readUniformBlocks(
     // ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
     // const uniformRowMajor = gl.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
-      const activeInfo = gl.getActiveUniform(program, uniformIndices[i]);
+      const uniformIndex = uniformIndices[i];
+      if (uniformIndex === undefined) {
+        continue;
+      }
+      const activeInfo = gl.getActiveUniform(program, uniformIndex);
       if (!activeInfo) {
         throw new Error('activeInfo');
       }
@@ -314,13 +318,11 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
   // if array name then clean the array brackets
   const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
   const matches = UNIFORM_NAME_REGEXP.exec(name);
-  if (!matches || matches.length < 2) {
-    throw new Error(`Failed to parse GLSL uniform name ${name}`);
-  }
-
+  const uniformName = assertDefined(matches?.[1], `Failed to parse GLSL uniform name ${name}`);
   return {
-    name: matches[1],
-    length: matches[2] ? 1 : 0,
-    isArray: Boolean(matches[2])
+    name: uniformName,
+    // TODO - is this a bug, shouldn't we return the value?
+    length: matches?.[2] ? 1 : 0,
+    isArray: Boolean(matches?.[2])
   };
 }

package/src/adapter/helpers/parse-shader-compiler-log.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {CompilerMessage} from '@luma.gl/core';
+import {type CompilerMessage} from '@luma.gl/core';
 
 /**
  * Parse a WebGL-format GLSL compilation log into an array of WebGPU style message records.
@@ -20,21 +20,43 @@ export function parseShaderCompilerLog(errLog: string): readonly CompilerMessage
       continue; // eslint-disable-line no-continue
     }
 
+    const lineWithTrimmedWhitespace = line.trim();
+
     const segments: string[] = line.split(':');
+    const trimmedMessageType = segments[0]?.trim();
 
     // Check for messages with no line information `ERROR: unsupported shader version`
     if (segments.length === 2) {
       const [messageType, message] = segments;
+      if (!messageType || !message) {
+        messages.push({
+          message: lineWithTrimmedWhitespace,
+          type: getMessageType(trimmedMessageType || 'info'),
+          lineNum: 0,
+          linePos: 0
+        });
+        continue; // eslint-disable-line no-continue
+      }
       messages.push({
         message: message.trim(),
         type: getMessageType(messageType),
         lineNum: 0,
         linePos: 0
       });
+
       continue; // eslint-disable-line no-continue
     }
 
     const [messageType, linePosition, lineNumber, ...rest] = segments;
+    if (!messageType || !linePosition || !lineNumber) {
+      messages.push({
+        message: segments.slice(1).join(':').trim() || lineWithTrimmedWhitespace,
+        type: getMessageType(trimmedMessageType || 'info'),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue; // eslint-disable-line no-continue
+    }
 
     let lineNum = parseInt(lineNumber, 10);
     if (isNaN(lineNum)) {

package/src/adapter/resources/webgl-command-buffer.ts

@@ -2,23 +2,19 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {
-  CopyBufferToBufferOptions,
-  CopyBufferToTextureOptions,
-  CopyTextureToBufferOptions,
-  CopyTextureToTextureOptions
-  // ClearTextureOptions,
-  // TextureReadOptions
-} from '@luma.gl/core';
-import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
 import {
-  GL,
-  GLTextureTarget,
-  GLTextureCubeMapTarget
-  // GLTexelDataFormat,
-  // GLPixelType,
-  // GLDataType
-} from '@luma.gl/constants';
+  type CopyBufferToBufferOptions,
+  type CopyBufferToTextureOptions,
+  type CopyTextureToBufferOptions,
+  type CopyTextureToTextureOptions,
+  // type ClearTextureOptions,
+  // type TextureReadOptions
+  CommandBuffer,
+  Texture,
+  Framebuffer,
+  assertDefined
+} from '@luma.gl/core';
+import {GL, type GLTextureTarget, type GLTextureCubeMapTarget} from '@luma.gl/constants';
 
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
@@ -145,7 +141,7 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
     height = options.sourceTexture.height,
     depthOrArrayLayers = 0,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
-    origin = [0, 0],
+    origin = [0, 0, 0],
 
     /** Destination buffer */
     destinationBuffer,
@@ -181,9 +177,9 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
     const webglBuffer = destinationBuffer as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-    const sourceParams = getTextureFormatWebGL(
-      framebuffer.colorAttachments[0].texture.props.format
-    );
+    const colorAttachment0 = assertDefined(framebuffer.colorAttachments[0]);
+
+    const sourceParams = getTextureFormatWebGL(colorAttachment0.texture.props.format);
     const sourceFormat = sourceParams.format;
     const sourceType = sourceParams.type;
 
@@ -256,7 +252,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
     origin = [0, 0],
 
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
-    destinationOrigin = [0, 0],
+    destinationOrigin = [0, 0, 0],
 
     /** Texture to copy to/from. */
     destinationTexture
@@ -275,7 +271,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   } = options;
 
   const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
-  const [sourceX, sourceY] = origin;
+  const [sourceX = 0, sourceY = 0] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
 
   // @ts-expect-error native bindFramebuffer is overridden by our state tracker

package/src/adapter/resources/webgl-fence.ts

@@ -0,0 +1,55 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGLDevice} from '../webgl-device';
+
+/** WebGL fence implemented with gl.fenceSync */
+export class WEBGLFence extends Fence {
+  readonly device: WebGLDevice;
+  readonly gl: WebGL2RenderingContext;
+  readonly handle: WebGLSync;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGLDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.gl = device.gl;
+
+    const sync = this.props.handle || this.gl.fenceSync(this.gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    if (!sync) {
+      throw new Error('Failed to create WebGL fence');
+    }
+    this.handle = sync;
+
+    this.signaled = new Promise(resolve => {
+      const poll = () => {
+        const status = this.gl.clientWaitSync(this.handle, 0, 0);
+        if (status === this.gl.ALREADY_SIGNALED || status === this.gl.CONDITION_SATISFIED) {
+          this._signaled = true;
+          resolve();
+        } else {
+          setTimeout(poll, 1);
+        }
+      };
+      poll();
+    });
+  }
+
+  isSignaled(): boolean {
+    if (this._signaled) {
+      return true;
+    }
+    const status = this.gl.getSyncParameter(this.handle, this.gl.SYNC_STATUS);
+    this._signaled = status === this.gl.SIGNALED;
+    return this._signaled;
+  }
+
+  destroy(): void {
+    if (!this.destroyed) {
+      this.gl.deleteSync(this.handle);
+    }
+  }
+}

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

@@ -24,6 +24,12 @@ export class WEBGLRenderPass extends RenderPass {
     super(device, props);
     this.device = device;
 
+    if (!props?.framebuffer) {
+      // Default-framebuffer rendering bypasses CanvasContext.getCurrentFramebuffer(),
+      // so flush any deferred canvas resize before deriving viewport state.
+      device.getDefaultCanvasContext()._resizeDrawingBufferIfNeeded();
+    }
+
     // If no viewport is provided, apply reasonably defaults
     let viewport: NumberArray4 | undefined;
     if (!props?.parameters?.viewport) {
@@ -50,7 +56,8 @@ export class WEBGLRenderPass extends RenderPass {
         (_, i) => GL.COLOR_ATTACHMENT0 + i
       );
       this.device.gl.drawBuffers(drawBuffers);
-    } else {
+    } else if (!this.props.framebuffer) {
+      // Default framebuffer only supports GL.BACK/GL.NONE draw buffers
       this.device.gl.drawBuffers([GL.BACK]);
     }
 
@@ -110,12 +117,9 @@ export class WEBGLRenderPass extends RenderPass {
     if (parameters.blendConstant) {
       glParameters.blendColor = parameters.blendConstant;
     }
-    if (parameters.stencilReference) {
-      // eslint-disable-next-line no-console
-      console.warn('RenderPassParameters.stencilReference not yet implemented in WebGL');
-      // parameters.stencilFunc = [func, ref, mask];
-      // Does this work?
+    if (parameters.stencilReference !== undefined) {
       glParameters[GL.STENCIL_REF] = parameters.stencilReference;
+      glParameters[GL.STENCIL_BACK_REF] = parameters.stencilReference;
     }
 
     if ('colorMask' in parameters) {

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

@@ -452,8 +452,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           if ((location as GL) === GL.INVALID_INDEX) {
             throw new Error(`Invalid uniform block name ${name}`);
           }
-          gl.uniformBlockBinding(this.handle, uniformBufferIndex, location);
-          // console.debug(binding, location);
+          gl.uniformBlockBinding(this.handle, location, uniformBufferIndex);
           if (value instanceof WEBGLBuffer) {
             gl.bindBufferBase(GL.UNIFORM_BUFFER, uniformBufferIndex, value.handle);
           } else {