@luma.gl/webgl 9.0.0-alpha.4 → 9.0.0-alpha.40

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

@@ -0,0 +1,279 @@
+// luma.gl, MIT license
+// 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 {BufferWithAccessor} from '../../classic/buffer-with-accessor';
+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: BufferWithAccessor | null = null;
+  private bufferValue = null;
+
+  /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return device.info.type === 'webgl2' || getBrowser() === 'Chrome';
+  }
+
+  // Create a VertexArray
+  constructor(device: WebGLDevice, props?: VertexArrayProps) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.device.gl2.createVertexArray();
+  }
+
+  override destroy(): void {
+    super.destroy();
+    if (this.buffer) {
+      this.buffer?.destroy();
+    }
+    if (this.handle) {
+      this.device.gl2.deleteVertexArray(this.handle);
+      // @ts-expect-error read-only/undefined
+      this.handle = undefined!;
+    }
+
+    // Auto-delete elements?
+    // return [this.elements];
+  }
+
+  /**
+  // Set (bind) an elements buffer, for indexed rendering.
+  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
+   * 
+   * @param elementBuffer 
+   */
+  setIndexBuffer(indexBuffer: Buffer | null): void {
+    const buffer = indexBuffer as WEBGLBuffer;
+    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.gl2.bindVertexArray(this.handle);
+    // TODO - this initial binding does not seem to take effect? see bindBeforeRender()
+    this.device.gl2.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.gl2.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.assertWebGL2();
+      this.device.gl2.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.gl2.vertexAttribDivisor(location, divisor || 0);
+
+    this.attributes[location] = buffer;
+  }
+
+  /** Set a location in vertex attributes array to a constant value, disables the location */
+  override setConstant(location: number, value: TypedArray): void {
+    this._enable(location, false);
+    this.attributes[location] = value;
+  }
+
+  init = false;
+
+  override bindBeforeRender(): void {
+    this.device.gl2.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.gl2.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.gl2.bindVertexArray(null);
+    // this.device.gl2.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.setConstantAttribute(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.assertWebGL2();
+  //     this.device.gl2.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.gl2.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.gl2.bindVertexArray(this.handle);
+      if (enable) {
+        this.device.gl.enableVertexAttribArray(location);
+      } else {
+        this.device.gl.disableVertexAttribArray(location);
+      }
+      this.device.gl2.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;
+
+    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;
+  }
+}
+
+// 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,29 +1,31 @@
 // 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';
+// Copyright (c) vis.gl contributors
+
+import type {CanvasContextProps} from '@luma.gl/core';
+import {CanvasContext} from '@luma.gl/core';
+import {WebGLDevice} from './webgl-device';
+import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
 
 /** 
- * 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
+ * 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;
+  private _framebuffer: WEBGLFramebuffer | null = null;
 
   constructor(device: WebGLDevice, props: CanvasContextProps) {
     // Note: Base class creates / looks up the canvas (unless under Node.js)
     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;
   }
@@ -49,23 +51,23 @@ 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 {
     // 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) {
+    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
     //   this.gl.commit();