@luma.gl/webgl 9.0.0-alpha.25 → 9.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.25",
+  "version": "9.0.0-alpha.27",
   "description": "WebGL2 adapter for the luma.gl API",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.25",
-    "@luma.gl/constants": "9.0.0-alpha.25",
+    "@luma.gl/api": "9.0.0-alpha.27",
+    "@luma.gl/constants": "9.0.0-alpha.27",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.25"
+    "@luma.gl/test-utils": "9.0.0-alpha.27"
   },
-  "gitHead": "a91e00399e59c1b5310bdfd842648238c5abf908"
+  "gitHead": "4052244031cb80c27fa0e3fd4c3d5514daa08b78"
 }

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -1,18 +1,23 @@
-import {assert, ResourceProps} from '@luma.gl/api';
+import type {Device, Buffer, ResourceProps, TypedArray, NumericArray} from '@luma.gl/api';
+import {Resource, assert, getScratchArray, fillArray} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
 import {WebGLDevice} from '../webgl-device';
 import {WebGLResource} from './webgl-resource';
-
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 
+import {BufferWithAccessor} from '../../classic/buffer-with-accessor';
+
 const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
 
 /**
  * VertexArrayObject properties
+ * @param constantAttributeZero Attribute 0 can not be disable on most desktop OpenGL based browsers
+ * and on iOS Safari browser.
  */
 export type VertexArrayObjectProps = ResourceProps & {
+  constantAttributeZero?: boolean;
 };
 
 /** VertexArrayObject wrapper */
@@ -21,11 +26,26 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     return 'BaseVertexArrayObject';
   }
 
-  constructor(device: WebGLDevice, props?: VertexArrayObjectProps) {
-    // @ts-expect-error
-    super(device, props, {});
+  /** Buffer constant */
+  private buffer: BufferWithAccessor | null = null;
+  private bufferValue = null;
+
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return device.info.type === 'webgl2' || getBrowser() === 'Chrome';
   }
 
+  // Create a VertexArray
+  constructor(device: Device, props?: VertexArrayObjectProps) {
+    super(device, props, {...Resource.defaultProps, constantAttributeZero: false});
+    Object.seal(this);
+  }
+
+  override destroy(): void {
+    super.destroy();
+    if (this.buffer) {
+      this.buffer?.destroy();
+    }  }
+
   override _createHandle() {
     return this.gl2.createVertexArray();
   }
@@ -41,6 +61,26 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     this.gl2.bindVertexArray(handle);
   }
 
+  /**
+   * Enabling an attribute location makes it reference the currently bound buffer
+   *  Disabling an attribute location makes it reference the global constant value
+   * TODO - handle single values for size 1 attributes?
+   * TODO - convert classic arrays based on known type?
+   */
+  enable(location: number, enable = true): void {
+    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
+    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
+    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+
+    if (enable || canDisableAttribute) {
+      location = Number(location);
+      this.bind(() =>
+        enable
+          ? this.gl.enableVertexAttribArray(location)
+          : this.gl.disableVertexAttribArray(location)
+      );
+    }  }
+
   // Set (bind) an elements buffer, for indexed rendering.
   // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
   setElementBuffer(elementBuffer: WEBGLBuffer | null = null, opts = {}) {
@@ -50,15 +90,14 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     this.bind(() => {
       this.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, elementBuffer ? elementBuffer.handle : null);
     });
-
-    return this;
   }
 
   /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
-  setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): this {
+  setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): void {
     // Check target
     if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
-      return this.setElementBuffer(buffer, accessor);
+      this.setElementBuffer(buffer, accessor);
+      return;
     }
 
     const {size, type, stride, offset, normalized, integer, divisor} = accessor;
@@ -83,29 +122,154 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
 
       // NOTE We don't unbind buffer here, typically another buffer will be bound just after
     });
+  }
 
-    return this;
+  /**
+   * Set an attribute to a constant value
+   * @param device
+   * @param location
+   * @param array
+   * 
+   * @note Constants are stored globally on the WebGL context, not the VAO
+   * so they need to be updated before every render
+   * @todo - use known type (in configuration or passed in) to allow non-typed arrays?
+   * @todo - remember/cache values to avoid setting them unnecessarily?
+   */
+  setConstant(location: any, array: TypedArray): void {
+    switch (array.constructor) {
+      case Float32Array:
+        setConstantFloatArray(this.device, location, array as Float32Array);
+        break;
+      case Int32Array:
+        setConstantIntArray(this.device, location, array as Int32Array);
+        break;
+      case Uint32Array:
+        setConstantUintArray(this.device, location, array as Uint32Array);
+        break;
+      default:
+        assert(false);
+    }
   }
 
   /**
-   * Enabling an attribute location makes it reference the currently bound buffer
-   *  Disabling an attribute location makes it reference the global constant value
-   * TODO - handle single values for size 1 attributes?
-   * TODO - convert classic arrays based on known type?
+   * Provide a means to create a buffer that is equivalent to a constant.
+   * NOTE: Desktop OpenGL cannot disable attribute 0.
+   * https://stackoverflow.com/questions/20305231/webgl-warning-attribute-0-is-disabled-
+   * this-has-significant-performance-penalty
    */
-  enable(location: number, enable = true): this {
-    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
-    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
-    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+  getConstantBuffer(elementCount: number, value): Buffer {
+    // Create buffer only when needed, and reuse it (avoids inflating buffer creation statistics)
 
-    if (enable || canDisableAttribute) {
-      location = Number(location);
-      this.bind(() =>
-        enable
-          ? this.gl.enableVertexAttribArray(location)
-          : this.gl.disableVertexAttribArray(location)
-      );
+    const constantValue = normalizeConstantArrayValue(value);
+
+    const byteLength = constantValue.byteLength * elementCount;
+    const length = constantValue.length * elementCount;
+
+    let updateNeeded = !this.buffer;
+
+    this.buffer = this.buffer || this.device.createBuffer({byteLength}) as BufferWithAccessor;
+    updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
+
+    // Reallocate and update contents if needed
+    updateNeeded =
+      updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
+
+    if (updateNeeded) {
+      // Create a typed array that is big enough, and fill it with the required data
+      const typedArray = getScratchArray(value.constructor, length);
+      fillArray({target: typedArray, source: constantValue, start: 0, count: length});
+      this.buffer.subData(typedArray);
+      this.bufferValue = value;
+    }
+
+    return this.buffer;
+  }
+}
+
+function setConstantFloatArray(device: WebGLDevice, location: number, array: Float32Array): void {
+  switch (array.length) {
+    case 1:
+      device.gl.vertexAttrib1fv(location, array);
+      break;
+    case 2:
+      device.gl.vertexAttrib2fv(location, array);
+      break;
+    case 3:
+      device.gl.vertexAttrib3fv(location, array);
+      break;
+    case 4:
+      device.gl.vertexAttrib4fv(location, array);
+      break;
+    default:
+      assert(false);
+  }
+}
+
+function setConstantIntArray(device: WebGLDevice, location: number, array: Int32Array): void {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4iv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1iv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2iv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3iv(location, array);
+  //     break;
+  //   case 4:
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+function setConstantUintArray(device: WebGLDevice, location: number, array: Uint32Array) {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4uiv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1uiv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2uiv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3uiv(location, array);
+  //     break;
+  //   case 4:
+  //     gl.vertexAttribI4uiv(location, array);
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+// HELPERS
+
+/**
+ * TODO - convert Arrays based on known type? (read type from accessor, don't assume Float32Array)
+ * TODO - handle single values for size 1 attributes?
+ */
+function normalizeConstantArrayValue(arrayValue: NumericArray) {
+  if (Array.isArray(arrayValue)) {
+    return new Float32Array(arrayValue);
+  }
+  return arrayValue;
+}
+
+/**
+ * 
+ */
+function compareConstantArrayValues(v1: NumericArray, v2: NumericArray): boolean {
+  if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
+    return false;
+  }
+  for (let i = 0; i < v1.length; ++i) {
+    if (v1[i] !== v2[i]) {
+      return false;
     }
-    return this;
   }
+  return true;
 }

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

@@ -6,7 +6,8 @@ import type {
   ShaderLayout,
   PrimitiveTopology,
   // BindingLayout,
-  AttributeLayout
+  AttributeLayout,
+  TypedArray
 } from '@luma.gl/api';
 import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
@@ -112,7 +113,27 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  /** @todo needed for portable model */
+  /**
+   * Constant attributes are only supported in WebGL, not in WebGPU
+   * Any attribute that is disabled in the current vertex array object
+   * is read from the context's global constant value for that attribute location.
+   * @param attributes 
+   */
+  setConstantAttributes(attributes: Record<string, TypedArray>): void {
+    for (const [name, value] of Object.entries(attributes)) {
+      const attribute = getAttributeLayout(this.layout, name);
+      if (!attribute) {
+        log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
+        continue; // eslint-disable-line no-continue
+      }
+      this.vertexArrayObject.setConstant(attribute.location, value);
+    }
+  }
+
+  /** 
+   * 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);

package/src/adapter/webgl-canvas-context.ts

@@ -52,6 +52,7 @@ export class WebGLCanvasContext extends CanvasContext {
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     // Resize browser context .
     if (this.canvas) {
+      const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
       this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
@@ -64,7 +65,7 @@ export class WebGLCanvasContext extends CanvasContext {
   }
 
   commit() {
-    // gl.commit was ultimately removed from standard??
+    // gl.commit was ultimately removed from the WebGL standard??
     // if (this.offScreen && this.gl.commit) {
     //   // @ts-expect-error gl.commit is not officially part of WebGLRenderingContext
     //   this.gl.commit();

package/src/classic/copy-and-blit.ts

@@ -80,6 +80,7 @@ export function readPixelsToArray(
 /**
  * Copies data from a Framebuffer or a Texture object into a Buffer object.
  * NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
+ * @deprecated Use CommandEncoder
  * @param source
  * @param options
  */
@@ -141,6 +142,125 @@ export function readPixelsToBuffer(
   return target;
 }
 
+/**
+ * Copy a rectangle from a Framebuffer or Texture object into a texture (at an offset)
+ * @deprecated Use CommandEncoder
+ */
+// eslint-disable-next-line complexity, max-statements
+export function copyToTexture(
+  source: Framebuffer | Texture,
+  target: Texture | GL,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+
+    targetX?: number;
+    targetY?: number;
+    targetZ?: number;
+    targetMipmaplevel?: number;
+    targetInternalFormat?: number;
+
+    width?: number; // defaults to target width
+    height?: number; // defaults to target height
+  }
+): Texture {
+  const {
+    sourceX = 0,
+    sourceY = 0,
+    // attachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
+    targetMipmaplevel = 0,
+    targetInternalFormat = GL.RGBA
+  } = options || {};
+  let {
+    targetX,
+    targetY,
+    targetZ,
+    width, // defaults to target width
+    height // defaults to target height
+  } = options || {};
+
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  assert(framebuffer);
+  const webglFramebuffer = framebuffer as WEBGLFramebuffer;
+  const {device, handle} = webglFramebuffer;
+  const isSubCopy =
+    typeof targetX !== 'undefined' ||
+    typeof targetY !== 'undefined' ||
+    typeof targetZ !== 'undefined';
+  targetX = targetX || 0;
+  targetY = targetY || 0;
+  targetZ = targetZ || 0;
+  const prevHandle = device.gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  // TODO - support gl.readBuffer (WebGL2 only)
+  // const prevBuffer = gl.readBuffer(attachment);
+  assert(target);
+  let texture = null;
+  let textureTarget: GL;
+  if (target instanceof Texture) {
+    texture = target;
+    width = Number.isFinite(width) ? width : texture.width;
+    height = Number.isFinite(height) ? height : texture.height;
+    texture.bind(0);
+    textureTarget = texture.target;
+  } else {
+    textureTarget = target;
+  }
+
+  if (!isSubCopy) {
+    device.gl.copyTexImage2D(
+      textureTarget,
+      targetMipmaplevel,
+      targetInternalFormat,
+      sourceX,
+      sourceY,
+      width,
+      height,
+      0 /* border must be 0 */
+    );
+  } else {
+    switch (textureTarget) {
+      case GL.TEXTURE_2D:
+      case GL.TEXTURE_CUBE_MAP:
+        device.gl.copyTexSubImage2D(
+          textureTarget,
+          targetMipmaplevel,
+          targetX,
+          targetY,
+          sourceX,
+          sourceY,
+          width,
+          height
+        );
+        break;
+      case GL.TEXTURE_2D_ARRAY:
+      case GL.TEXTURE_3D:
+        device.assertWebGL2();
+        device.gl2.copyTexSubImage3D(
+          textureTarget,
+          targetMipmaplevel,
+          targetX,
+          targetY,
+          targetZ,
+          sourceX,
+          sourceY,
+          width,
+          height
+        );
+        break;
+      default:
+    }
+  }
+  if (texture) {
+    texture.unbind();
+  }
+  // @ts-expect-error
+  gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+  return texture;
+}
+
 function getFramebuffer(source: Texture | Framebuffer): {
   framebuffer: Framebuffer;
   deleteFramebuffer: boolean;

package/src/index.ts

@@ -81,4 +81,4 @@ export {TEXTURE_FORMATS as _TEXTURE_FORMATS} from './adapter/converters/texture-
 
 // DEPRECATED EXPORTS
 export {clear} from './classic/clear';
-export {readPixelsToBuffer, readPixelsToArray} from './classic/copy-and-blit';
+export {readPixelsToBuffer, readPixelsToArray, copyToTexture} from './classic/copy-and-blit';