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

package/src/adapter/resources/webgl-transform-feedback.ts

@@ -0,0 +1,196 @@
+import type {PrimitiveTopology, ShaderLayout, TransformFeedbackProps} from '@luma.gl/core';
+import {log, TransformFeedback, Buffer, BufferRange} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from '../../index';
+import {getGLPrimitive} from '../helpers/webgl-topology-utils';
+
+export class WEBGLTransformFeedback extends TransformFeedback {
+  readonly device: WebGLDevice;
+  readonly gl: WebGL2RenderingContext;
+  readonly handle: WebGLTransformFeedback;
+
+  /**
+   * NOTE: The Model already has this information while drawing, but
+   * TransformFeedback currently needs it internally, to look up
+   * varying information outside of a draw() call.
+   */
+  readonly layout: ShaderLayout;
+  buffers: Record<string, BufferRange> = {};
+  unusedBuffers: Record<string, Buffer> = {};
+  /**
+   * Allows us to avoid a Chrome bug where a buffer that is already bound to a
+   * different target cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+   * This a major workaround, see: https://github.com/KhronosGroup/WebGL/issues/2346
+   */
+  bindOnUse = true;
+  private _bound: boolean = false;
+
+  constructor(device: WebGLDevice, props: TransformFeedbackProps) {
+    super(device, props);
+
+    this.device = device;
+    this.gl = device.gl;
+    this.handle = this.props.handle || this.gl.createTransformFeedback();
+    this.layout = this.props.layout;
+
+    if (props.buffers) {
+      this.setBuffers(props.buffers);
+    }
+
+    Object.seal(this);
+  }
+
+  override destroy(): void {
+    this.gl.deleteTransformFeedback(this.handle);
+    super.destroy();
+  }
+
+  begin(topology: PrimitiveTopology = 'point-list'): void {
+    this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
+    if (this.bindOnUse) {
+      this._bindBuffers();
+    }
+    this.gl.beginTransformFeedback(getGLPrimitive(topology));
+  }
+
+  end(): void {
+    this.gl.endTransformFeedback();
+    if (!this.bindOnUse) {
+      this._unbindBuffers();
+    }
+    this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);
+  }
+
+  // SUBCLASS
+
+  setBuffers(buffers: Record<string, Buffer | BufferRange>): void {
+    this.buffers = {};
+    this.unusedBuffers = {};
+
+    this.bind(() => {
+      for (const bufferName in buffers) {
+        this.setBuffer(bufferName, buffers[bufferName]);
+      }
+    });
+  }
+
+  setBuffer(locationOrName: string | number, bufferOrRange: Buffer | BufferRange): void {
+    const location = this._getVaryingIndex(locationOrName);
+    const {buffer, byteLength, byteOffset} = this._getBufferRange(bufferOrRange);
+
+    if (location < 0) {
+      this.unusedBuffers[locationOrName] = buffer;
+      log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
+      return;
+    }
+
+    this.buffers[location] = {buffer, byteLength, byteOffset};
+
+    // Need to avoid chrome bug where buffer that is already bound to a different target
+    // cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+    if (!this.bindOnUse) {
+      this._bindBuffer(location, buffer, byteOffset, byteLength);
+    }
+  }
+
+  getBuffer(locationOrName: string | number): Buffer | BufferRange | null {
+    if (isIndex(locationOrName)) {
+      return this.buffers[locationOrName] || null;
+    }
+    const location = this._getVaryingIndex(locationOrName);
+    return location >= 0 ? this.buffers[location] : null;
+  }
+
+  bind(funcOrHandle = this.handle) {
+    if (typeof funcOrHandle !== 'function') {
+      this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, funcOrHandle);
+      return this;
+    }
+
+    let value: unknown;
+
+    if (!this._bound) {
+      this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
+      this._bound = true;
+      value = funcOrHandle();
+      this._bound = false;
+      this.gl.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);
+    } else {
+      value = funcOrHandle();
+    }
+
+    return value;
+  }
+
+  unbind() {
+    this.bind(null);
+  }
+
+  // PRIVATE METHODS
+
+  /** Extract offsets for bindBufferRange */
+  protected _getBufferRange(
+    bufferOrRange: Buffer | {buffer: Buffer; byteOffset?: number; byteLength?: number}
+  ): Required<BufferRange> {
+    if (bufferOrRange instanceof WEBGLBuffer) {
+      return {buffer: bufferOrRange, byteOffset: 0, byteLength: bufferOrRange.byteLength};
+    }
+
+    // To use bindBufferRange either offset or size must be specified.
+    // @ts-expect-error Must be a BufferRange.
+    const {buffer, byteOffset = 0, byteLength = bufferOrRange.buffer.byteLength} = bufferOrRange;
+    return {buffer, byteOffset, byteLength};
+  }
+
+  protected _getVaryingIndex(locationOrName: string | number): number {
+    if (isIndex(locationOrName)) {
+      return Number(locationOrName);
+    }
+
+    for (const varying of this.layout.varyings) {
+      if (locationOrName === varying.name) {
+        return varying.location;
+      }
+    }
+
+    return -1;
+  }
+
+  /**
+   * Need to avoid chrome bug where buffer that is already bound to a different target
+   * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+   */
+  protected _bindBuffers(): void {
+    for (const bufferIndex in this.buffers) {
+      const {buffer, byteLength, byteOffset} = this._getBufferRange(this.buffers[bufferIndex]);
+      this._bindBuffer(Number(bufferIndex), buffer, byteOffset, byteLength);
+    }
+  }
+
+  protected _unbindBuffers(): void {
+    for (const bufferIndex in this.buffers) {
+      this.gl.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, Number(bufferIndex), null);
+    }
+  }
+
+  protected _bindBuffer(index: number, buffer: Buffer, byteOffset = 0, byteLength?: number): void {
+    const handle = buffer && (buffer as WEBGLBuffer).handle;
+    if (!handle || byteLength === undefined) {
+      this.gl.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle);
+    } else {
+      this.gl.bindBufferRange(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle, byteOffset, byteLength);
+    }
+  }
+}
+
+/**
+ * Returns true if the given value is an integer, or a string that
+ * trivially converts to an integer (only numeric characters).
+ */
+function isIndex(value: string | number): boolean {
+  if (typeof value === 'number') {
+    return Number.isInteger(value);
+  }
+  return /^\d+$/.test(value);
+}

package/src/adapter/resources/webgl-vertex-array.ts

@@ -0,0 +1,282 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Device, Buffer, VertexArrayProps, TypedArray, NumberArray} from '@luma.gl/core';
+import {VertexArray, getScratchArray, fillArray} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {getBrowser} from '@probe.gl/env';
+
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from '../resources/webgl-buffer';
+
+import {getGLFromVertexType} from '../converters/vertex-formats';
+// import {AccessorObject} from '../..';
+// import {getGLFromVertexType} from '../converters/vertex-formats';
+
+/** VertexArrayObject wrapper */
+export class WEBGLVertexArray extends VertexArray {
+  override get [Symbol.toStringTag](): string {
+    return 'VertexArray';
+  }
+
+  readonly device: WebGLDevice;
+  readonly handle: WebGLVertexArrayObject;
+
+  /** Attribute 0 buffer constant */
+  private buffer: WEBGLBuffer | null = null;
+  private bufferValue = null;
+
+  /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return getBrowser() === 'Chrome';
+  }
+
+  // Create a VertexArray
+  constructor(device: WebGLDevice, props?: VertexArrayProps) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.device.gl.createVertexArray();
+  }
+
+  override destroy(): void {
+    super.destroy();
+    if (this.buffer) {
+      this.buffer?.destroy();
+    }
+    if (this.handle) {
+      this.device.gl.deleteVertexArray(this.handle);
+      // @ts-expect-error read-only/undefined
+      this.handle = undefined!;
+    }
+
+    // Auto-delete elements?
+    // return [this.elements];
+  }
+
+  /**
+  // Set (bind/unbind) an elements buffer, for indexed rendering.
+  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER or null. Constants not supported
+   * 
+   * @param elementBuffer 
+   */
+  setIndexBuffer(indexBuffer: Buffer | null): void {
+    const buffer = indexBuffer as WEBGLBuffer;
+    // Explicitly allow `null` to support clearing the index buffer
+    if (buffer && buffer.glTarget !== GL.ELEMENT_ARRAY_BUFFER) {
+      throw new Error('Use .setBuffer()');
+    }
+    // In WebGL The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject
+    this.device.gl.bindVertexArray(this.handle);
+    // TODO - this initial binding does not seem to take effect? see bindBeforeRender()
+    this.device.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, buffer ? buffer.handle : null);
+    // log.log(1, 'VertexArray.setIndexBuffer', indexBuffer)();
+    // log.log(1, `Binding vertex array ${this.id}`, buffer?.id)();
+
+    this.indexBuffer = buffer;
+  }
+
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location: number, attributeBuffer: Buffer): void {
+    const buffer = attributeBuffer as WEBGLBuffer;
+    // Sanity check target
+    if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
+      throw new Error('Use .setIndexBuffer()');
+    }
+
+    const {size, type, stride, offset, normalized, integer, divisor} = this._getAccessor(location);
+
+    this.device.gl.bindVertexArray(this.handle);
+    // A non-zero buffer object must be bound to the GL_ARRAY_BUFFER target
+    this.device.gl.bindBuffer(GL.ARRAY_BUFFER, buffer.handle);
+
+    // WebGL2 supports *integer* data formats, i.e. GPU will see integer values
+    if (integer) {
+      this.device.gl.vertexAttribIPointer(location, size, type, stride, offset);
+    } else {
+      // Attaches ARRAY_BUFFER with specified buffer format to location
+      this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
+    }
+
+    // Mark as non-constant
+    this.device.gl.enableVertexAttribArray(location);
+    // Set the step mode 0=vertex, 1=instance
+    this.device.gl.vertexAttribDivisor(location, divisor || 0);
+
+    this.attributes[location] = buffer;
+  }
+
+  /** Set a location in vertex attributes array to a constant value, disables the location */
+  override setConstantWebGL(location: number, value: TypedArray): void {
+    this._enable(location, false);
+    this.attributes[location] = value;
+  }
+
+  init = false;
+
+  override bindBeforeRender(): void {
+    this.device.gl.bindVertexArray(this.handle);
+    // TODO - the initial bind does not seem to take effect.
+    if (!this.init) {
+      // log.log(1, `Binding vertex array ${this.id}`, this.indexBuffer?.id)();
+      const webglBuffer = this.indexBuffer as WEBGLBuffer;
+      this.device.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, webglBuffer?.handle || null);
+      this.init = true;
+    }
+    this._applyConstantAttributes();
+  }
+
+  override unbindAfterRender(): void {
+    // log.log(1, `Unbinding vertex array ${this.id}`)();
+    // TODO technically this is not necessary, but we might be interfacing
+    // with code that does not use vertex array objects
+    this.device.gl.bindVertexArray(null);
+    // this.device.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
+  }
+
+  // Internal methods
+
+  /**
+   * Constant attributes need to be reset before every draw call
+   * Any attribute that is disabled in the current vertex array object
+   * is read from the context's global constant value for that attribute location.
+   * @note Constant attributes are only supported in WebGL, not in WebGPU
+   */
+  protected _applyConstantAttributes(): void {
+    for (let location = 0; location < this.maxVertexAttributes; ++location) {
+      const constant = this.attributes[location];
+      // A typed array means this is a constant
+      if (ArrayBuffer.isView(constant)) {
+        this.device.setConstantAttributeWebGL(location, constant);
+      }
+    }
+  }
+
+  /**
+   * Set a location in vertex attributes array to a buffer, enables the location, sets divisor
+   * @note requires vertex array to be bound
+   */
+  // protected _setAttributeLayout(location: number): void {
+  //   const {size, type, stride, offset, normalized, integer, divisor} = this._getAccessor(location);
+
+  //   // WebGL2 supports *integer* data formats, i.e. GPU will see integer values
+  //   if (integer) {
+  //     this.device.gl.vertexAttribIPointer(location, size, type, stride, offset);
+  //   } else {
+  //     // Attaches ARRAY_BUFFER with specified buffer format to location
+  //     this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
+  //   }
+  //   this.device.gl.vertexAttribDivisor(location, divisor || 0);
+  // }
+
+  /** Get an accessor from the  */
+  protected _getAccessor(location: number) {
+    const attributeInfo = this.attributeInfos[location];
+    if (!attributeInfo) {
+      throw new Error(`Unknown attribute location ${location}`);
+    }
+    const glType = getGLFromVertexType(attributeInfo.bufferDataType);
+    return {
+      size: attributeInfo.bufferComponents,
+      type: glType,
+      stride: attributeInfo.byteStride,
+      offset: attributeInfo.byteOffset,
+      normalized: attributeInfo.normalized,
+      // it is the shader attribute declaration, not the vertex memory format,
+      // that determines if the data in the buffer will be treated as integers.
+      //
+      // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
+      // but as far as we can tell, WebGPU does not.
+      integer: attributeInfo.integer,
+      divisor: attributeInfo.stepMode === 'instance' ? 1 : 0
+    };
+  }
+
+  /**
+   * 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?
+   */
+  protected _enable(location: number, enable = true): void {
+    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
+    const canDisableAttributeZero = WEBGLVertexArray.isConstantAttributeZeroSupported(this.device);
+    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+
+    if (enable || canDisableAttribute) {
+      location = Number(location);
+      this.device.gl.bindVertexArray(this.handle);
+      if (enable) {
+        this.device.gl.enableVertexAttribArray(location);
+      } else {
+        this.device.gl.disableVertexAttribArray(location);
+      }
+      this.device.gl.bindVertexArray(null);
+    }
+  }
+
+  /**
+   * 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
+   */
+  getConstantBuffer(elementCount: number, value: TypedArray): Buffer {
+    // Create buffer only when needed, and reuse it (avoids inflating buffer creation statistics)
+
+    const constantValue = normalizeConstantArrayValue(value);
+
+    const byteLength = constantValue.byteLength * elementCount;
+    const length = constantValue.length * elementCount;
+
+    if (this.buffer && byteLength !== this.buffer.byteLength) {
+      throw new Error(
+        `Buffer size is immutable, byte length ${byteLength} !== ${this.buffer.byteLength}.`
+      );
+    }
+    let updateNeeded = !this.buffer;
+
+    this.buffer = this.buffer || this.device.createBuffer({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.write(typedArray);
+      this.bufferValue = value;
+    }
+
+    return this.buffer;
+  }
+}
+
+// HELPER FUNCTIONS
+
+/**
+ * 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: NumberArray) {
+  if (Array.isArray(arrayValue)) {
+    return new Float32Array(arrayValue);
+  }
+  return arrayValue;
+}
+
+/**
+ *
+ */
+function compareConstantArrayValues(v1: NumberArray, v2: NumberArray): 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 true;
+}

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

@@ -1,15 +1,16 @@
-// luma.gl, MIT license
-import type {CanvasContextProps} from '@luma.gl/api';
-import {CanvasContext} from '@luma.gl/api';
-import {getDevicePixelRatio, setDevicePixelRatio} from '../context/context/device-pixels';
-import WebGLDevice from './webgl-device';
-import WEBGLFramebuffer from './resources/webgl-framebuffer';
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-/** 
- * Holds a WebGL Canvas Context which will handle drawing buffer resizing etc 
- * @todo This class is WIP, intended to replace the old gltools-based context size tracking
+import type {CanvasContextProps} from '@luma.gl/core';
+import {CanvasContext} from '@luma.gl/core';
+import {WebGLDevice} from './webgl-device';
+import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
+
+/**
+ * A WebGL Canvas Context which manages the canvas and handles drawing buffer resizing etc
  */
-export default class WebGLCanvasContext extends CanvasContext {
+export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
   presentationSize: [number, number];
   private _framebuffer: WEBGLFramebuffer | null = null;
@@ -19,11 +20,13 @@ export default class WebGLCanvasContext extends CanvasContext {
     super(props);
     this.device = device;
     this.presentationSize = [-1, -1];
+    this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
     this.update();
   }
 
   getCurrentFramebuffer(): WEBGLFramebuffer {
     this.update();
+    // Setting handle to null returns a reference to the default framebuffer
     this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, {handle: null});
     return this._framebuffer;
   }
@@ -31,9 +34,11 @@ export default class WebGLCanvasContext extends CanvasContext {
   /** Resizes and updates render targets if necessary */
   update() {
     const size = this.getPixelSize();
-    const sizeChanged = size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
+    const sizeChanged =
+      size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
     if (sizeChanged) {
       this.presentationSize = size;
+      this.resize();
     }
   }
 
@@ -49,25 +54,21 @@ export default class WebGLCanvasContext extends CanvasContext {
    *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
    * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
    */
-   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
+  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
+    if (!this.device.gl) return;
+
     // Resize browser context .
     if (this.canvas) {
-      const devicePixelRatio = getDevicePixelRatio(options?.useDevicePixels);
-      setDevicePixelRatio(this.device.gl, devicePixelRatio, options);
+      const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
+      this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
-
-    // Resize headless gl context
-    const ext = this.device.gl.getExtension('STACKGL_resize_drawingbuffer');
-    if (ext && options && `width` in options && `height` in options) {
-      ext.resize(options.width, options.height);
-    }
   }
 
   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
+    //   // @ts-expect-error gl.commit is not officially part of WebGL2RenderingContext
     //   this.gl.commit();
     // }
   }