@luma.gl/webgl 9.0.0-alpha.10 → 9.0.0-alpha.12

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

@@ -2,13 +2,13 @@
 
 import {
   ShaderLayout,
-  BindingLayout,
+  // BindingLayout,
   UniformBinding,
   UniformBlockBinding,
   ProgramBindings,
   AttributeBinding,
   VaryingBinding,
-  AttributeLayout,
+  // AttributeLayout,
   AccessorObject
 } from '@luma.gl/api';
 import GL from '@luma.gl/constants';
@@ -17,6 +17,7 @@ import Accessor from '../../classic/accessor'; // TODO - should NOT depend on cl
 import {decodeUniformType, decodeAttributeType} from './uniforms';
 import {getVertexFormat} from '../converters/vertex-formats';
 import {isSamplerUniform} from './uniforms';
+
 /**
  * Extract metadata describing binding information for a program's shaders
  * Note: `linkProgram()` needs to have been called
@@ -31,9 +32,11 @@ export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram
   };
 
   for (const attribute of programBindings.attributes) {
+    // TODO - multicolumn attributes like a matrix4 can be up to 16 elts...
+    const size = Math.min(attribute.accessor.size, 4);
     const format =
       // attribute.accessor.format ||
-      getVertexFormat(attribute.accessor.type || GL.FLOAT, attribute.accessor.size);
+      getVertexFormat(attribute.accessor.type || GL.FLOAT, size);
     shaderLayout.attributes.push({
       name: attribute.name,
       location: attribute.location,
@@ -262,19 +265,19 @@ function readUniformBlocks(
 
     const uniformType = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_TYPE); // Array of GLenum indicating the types of the uniforms.
     const uniformArrayLength = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_SIZE); // Array of GLuint indicating the sizes of the uniforms.
-    const uniformBlockIndex = gl2.getActiveUniforms(
-      program,
-      uniformIndices,
-      GL.UNIFORM_BLOCK_INDEX
-    ); // Array of GLint indicating the block indices of the uniforms.
+    // const uniformBlockIndex = gl2.getActiveUniforms(
+    //   program,
+    //   uniformIndices,
+    //   GL.UNIFORM_BLOCK_INDEX
+    // ); // Array of GLint indicating the block indices of the uniforms.
     const uniformOffset = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_OFFSET); // Array of GLint indicating the uniform buffer offsets.
     const uniformStride = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_ARRAY_STRIDE); // Array of GLint indicating the strides between the elements.
-    const uniformMatrixStride = gl2.getActiveUniforms(
-      program,
-      uniformIndices,
-      GL.UNIFORM_MATRIX_STRIDE
-    ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
-    const uniformRowMajor = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
+    // const uniformMatrixStride = gl2.getActiveUniforms(
+    //   program,
+    //   uniformIndices,
+    //   GL.UNIFORM_MATRIX_STRIDE
+    // ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
+    // const uniformRowMajor = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
       const activeInfo = gl2.getActiveUniform(program, uniformIndices[i]);
       if (!activeInfo) {
@@ -370,7 +373,7 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
 * Extract info about all "active" uniform blocks
  * ("Active" just means that unused (inactive) blocks may have been optimized away during linking)
  *
- function getUniformBlockBindings(gl, program): Binding[] {
+ function getUniformBlockBindings(gl: WebGLRenderingContext, program): Binding[] {
   if (!isWebGL2(gl)) {
     return;
   }

package/src/adapter/helpers/set-uniform.ts

@@ -60,7 +60,7 @@ export function setUniform(
     case GL.BOOL: return gl.uniform1iv(location, arrayValue);
     case GL.BOOL_VEC2: return gl.uniform2iv(location, arrayValue);
     case GL.BOOL_VEC3: return gl.uniform3iv(location, arrayValue);
-    case GL.BOOL_VEC4: gl.uniform4iv(location, arrayValue);
+    case GL.BOOL_VEC4: return gl.uniform4iv(location, arrayValue);
 
     // WEBGL2 - unsigned integers
     case GL.UNSIGNED_INT: return gl2.uniform1uiv(location, arrayValue, 1);

package/src/adapter/objects/constants-to-keys.ts

@@ -16,16 +16,18 @@ export function getKeyValue(gl: WebGLRenderingContext, name: string | GL): GL {
 
   // Look up string, after removing any 'GL.' or 'gl.' prefix
   name = name.replace(/^.*\./, '');
+  // @ts-ignore expect-error depends on settings
   const value = gl[name];
   assert(value !== undefined, `Accessing undefined constant GL.${name}`);
   return value;
 }
 
 export function getKey(gl: WebGLRenderingContext, value: any): string {
-  // @ts-expect-error 
+  // @ts-ignore expect-error depends on settings 
   gl = gl.gl || gl;
   value = Number(value);
   for (const key in gl) {
+    // @ts-ignore expect-error depends on settings
     if (gl[key] === value) {
       return `GL.${key}`;
     }
@@ -37,6 +39,7 @@ export function getKeyType(gl: WebGLRenderingContext, value: any): string {
   assert(value !== undefined, 'undefined key');
   value = Number(value);
   for (const key in gl) {
+    // @ts-ignore expect-error depends on settings
     if (gl[key] === value) {
       return `GL.${key}`;
     }

package/src/adapter/objects/webgl-renderbuffer.ts

@@ -35,7 +35,7 @@ const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
  * Renderbuffer objects also natively accommodate Multisampling (MSAA).
  */
 export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
-  get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
+ override get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
 
   get width(): number { return this.props.width; }
   get height(): number { return this.props.height; }
@@ -43,7 +43,7 @@ export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps>
   get samples(): number { return this.props.samples; }
 
   static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
-    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+    return !options?.format || isRenderbufferFormatSupported(gl, options.format);
   }
 
   constructor(device: WebGLDevice, props: RenderbufferProps) {
@@ -89,16 +89,16 @@ export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps>
 
   // RESOURCE IMPLEMENTATION
 
-  _createHandle() {
+  override _createHandle() {
     return this.gl.createRenderbuffer();
   }
 
-  _deleteHandle(): void {
+  override _deleteHandle(): void {
     this.gl.deleteRenderbuffer(this.handle);
     this.trackDeallocatedMemory();
   }
 
-  _bindHandle(handle: WEBGLRenderbuffer): void {
+  override _bindHandle(handle: WEBGLRenderbuffer): void {
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
   }
 }

package/src/adapter/objects/webgl-resource.ts

@@ -13,9 +13,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
 /**
  * Base class for WebGL object wrappers
  */
- export default abstract class WebGLResource<Props> extends Resource<Props> {
-  id: string;
-  userData: any;
+ export default abstract class WebGLResource<Props extends ResourceProps> extends Resource<Props> {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext;
@@ -34,12 +32,10 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     assertWebGLContext(gl);
 
     // extends 
-    // @ts-expect-error
-    const {id, userData = {}} = props || {};
+    const {id} = props || {};
     this.gl = gl;
     this.gl2 = gl as WebGL2RenderingContext;
     this.id = id || uid(this.constructor.name);
-    this.userData = userData;
 
     // Set the handle
     // If handle was provided, use it, otherwise create a new handle
@@ -48,7 +44,6 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     // this.glCount = glGetContextLossCount(this.gl);
 
     // Default VertexArray needs to be created with null handle, so compare against undefined
-    // @ts-expect-error
     this._handle = props?.handle;
     if (this._handle === undefined) {
       this._handle = this._createHandle();
@@ -57,7 +52,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     this.byteLength = 0;
   }
 
-  toString(): string {
+  override toString(): string {
     return `${this.constructor.name}(${this.id})`;
   }
 
@@ -74,11 +69,11 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     return this._handle;
   }
 
-  destroy(): void {
+  override destroy(): void {
     this.delete();
   }
 
-  delete({deleteChildren = false} = {}) {
+  override delete({deleteChildren = false} = {}) {
     // Delete this object, and get refs to any children
     // @ts-expect-error
     const children = this._handle && this._deleteHandle(this._handle);
@@ -130,7 +125,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
    * @param name
    * @return param
    */
-  getParameter(pname: number, props = {}): any {
+  getParameter(pname: number, props: any = {}): any {
     pname = getKeyValue(this.gl, pname);
     assert(pname);
 
@@ -163,7 +158,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
   // Many resources support a getParameter call -
   // getParameters will get all parameters - slow but useful for debugging
   // eslint-disable-next-line complexity
-  getParameters(options: {parameters?, keys?} = {}) {
+  getParameters(options: {parameters?: any, keys?: any} = {}) {
     const {parameters, keys} = options;
 
     // Get parameter definitions for this Resource

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

@@ -17,7 +17,7 @@ export type VertexArrayObjectProps = ResourceProps & {
 
 /** VertexArrayObject wrapper */
 export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
-  get [Symbol.toStringTag](): string {
+ override get [Symbol.toStringTag](): string {
     return 'BaseVertexArrayObject';
   }
 
@@ -26,18 +26,18 @@ export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObj
     super(device, props, {});
   }
 
-  _createHandle() {
+  override _createHandle() {
     return this.gl2.createVertexArray();
   }
 
-  _deleteHandle(): void {
+  override _deleteHandle(): void {
     this.gl2.deleteVertexArray(this.handle);
     // @ts-expect-error
     return [this.elements];
     // return [this.elements, ...this.buffers];
   }
 
-  _bindHandle(handle: WEBGLVertexArrayObject): void {
+  override _bindHandle(handle: WEBGLVertexArrayObject): void {
     this.gl2.bindVertexArray(handle);
   }
 

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

@@ -19,7 +19,7 @@ export default class WEBGLBuffer extends Buffer {
 
   webglUsage: number;
 
-  accessor: {};
+  // accessor: {};
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
@@ -101,7 +101,7 @@ export default class WEBGLBuffer extends Buffer {
     return this;
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.removeStats();
       this.trackDeallocatedMemory();
@@ -111,7 +111,7 @@ export default class WEBGLBuffer extends Buffer {
     }
   }
 
-  write(data: ArrayBufferView, byteOffset: number = 0): void {
+  override write(data: ArrayBufferView, byteOffset: number = 0): void {
     const srcOffset = 0;
     const byteLength = data.byteLength;
 
@@ -135,7 +135,7 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   /** Read data from the buffer */
-  async readAsync(
+  override async readAsync(
     byteOffset: number = 0,
     byteLength?: number
   ): Promise<ArrayBuffer> {

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

@@ -19,7 +19,7 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
     this.device = device;
   }
 
-  destroy() {}
+  override destroy(): void {}
 
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
@@ -41,10 +41,10 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
     this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
   }
 
-  pushDebugGroup(groupLabel: string): void {}
-  popDebugGroup() {}
+  override pushDebugGroup(groupLabel: string): void {}
+  override popDebugGroup() {}
 
-  insertDebugMarker(markerLabel: string): void {}
+  override insertDebugMarker(markerLabel: string): void {}
 
   // writeTimestamp(querySet: Query, queryIndex: number): void {}
 

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

@@ -1,6 +1,6 @@
 // luma.gl, MIT license
 
-import type {FramebufferProps, DepthStencilTextureFormat, ColorTextureFormat} from '@luma.gl/api';
+import type {FramebufferProps, ColorTextureFormat} from '@luma.gl/api';
 import {Framebuffer, Texture, log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import WebGLDevice from '../webgl-device';
@@ -19,7 +19,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
 
   get texture() { return this.colorAttachments[0]; }
   readonly colorAttachments: WebGLTexture[] = [];
-  readonly depthStencilAttachment: WebGLTexture | null = null;  d 
+  readonly depthStencilAttachment: WebGLTexture | null = null;
   protected _ownResources: (WebGLTexture | Renderbuffer)[] = [];
 
   constructor(device: WebGLDevice, props: FramebufferProps) {
@@ -62,7 +62,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
     }
   }
 
-  destroy() {
+  override destroy(): void {
     if (this.handle !== null) {
       for (const resource of this._ownResources) {
         resource.destroy();
@@ -202,6 +202,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
       this._attachTexture(attachmentPoint, attachment, 0, 0);
       return attachment;
     }
+    throw new Error('attach');
   }
 
   protected _attachRenderbuffer(attachment: GL, renderbuffer: Renderbuffer): void {
@@ -251,7 +252,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
 // Helper functions
 
 // Map an index to a cube map face constant
-function mapIndexToCubeMapFace(layer) {
+function mapIndexToCubeMapFace(layer: number | GL): GL {
   // TEXTURE_CUBE_MAP_POSITIVE_X is a big value (0x8515)
   // if smaller assume layer is index, otherwise assume it is already a cube map face constant
   return layer < GL.TEXTURE_CUBE_MAP_POSITIVE_X ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
@@ -259,7 +260,7 @@ function mapIndexToCubeMapFace(layer) {
 
 // Helper METHODS
 // Get a string describing the framebuffer error if installed
-function _getFrameBufferStatus(status) {
+function _getFrameBufferStatus(status: GL) {
   switch (status) {
     case GL.FRAMEBUFFER_COMPLETE:
       return 'success';

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

@@ -5,13 +5,12 @@ import type {
   Binding,
   ShaderLayout,
   PrimitiveTopology,
-  BindingLayout,
+  // 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';
 import {getShaderLayout} from '../helpers/get-shader-layout';
 import {withDeviceParameters, withGLParameters} from '../converters/device-parameters';
@@ -74,7 +73,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.device.gl.deleteProgram(this.handle);
       // this.handle = null;
@@ -108,7 +107,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
         offset: 0,
         normalized,
         integer,
-        divisor: attribute.stepMode === 'instance' ? 1 : 0
+        divisor
       });
     }
   }
@@ -173,12 +172,12 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     const {
       renderPass = this.device.getDefaultRenderPass(),
       vertexCount,
-      indexCount,
+      // indexCount,
       instanceCount,
       firstVertex = 0,
-      firstIndex,
-      firstInstance,
-      baseVertex
+      // firstIndex,
+      // firstInstance,
+      // baseVertex
     } = options;
 
     const drawMode = getDrawMode(this.props.topology);
@@ -278,12 +277,12 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   _areTexturesRenderable() {
     let texturesRenderable = true;
 
-    for (const [name, texture] of Object.entries(this._textureUniforms)) {
+    for (const [, texture] of Object.entries(this._textureUniforms)) {
       texture.update();
       texturesRenderable = texturesRenderable && texture.loaded;
     }
 
-    for (const [name, texture] of Object.entries(this.bindings)) {
+    for (const [, texture] of Object.entries(this.bindings)) {
       // texture.update();
       if (texture.loaded !== undefined) {
         texturesRenderable = texturesRenderable && texture.loaded;
@@ -398,24 +397,25 @@ function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.
   }
 }
 
-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 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;
 }
 
+/* TODO
 function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
   const binding = layout.bindings.find((binding) => binding.name === name);
   if (!binding) {
@@ -423,3 +423,4 @@ function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
   }
   return binding;
 }
+*/

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

@@ -28,7 +28,7 @@ export default class WEBGLSampler extends Sampler {
     }
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.device.gl2.deleteSampler(this.handle);
       // @ts-expect-error
@@ -36,6 +36,10 @@ export default class WEBGLSampler extends Sampler {
     }
   }
 
+  override toString(): string {
+    return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+  }
+
   /** Set sampler parameters on the sampler */
   private _setSamplerParameters(parameters: GLSamplerParameters): void {
     for (const [pname, value] of Object.entries(parameters)) {

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

@@ -28,7 +28,7 @@ import WebGLDevice from '../webgl-device';
     this._compile(this.source);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.removeStats();
       this.device.gl.deleteShader(this.handle);

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

@@ -194,7 +194,7 @@ export default class WEBGLTexture extends Texture {
     Object.seal(this);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.gl.deleteTexture(this.handle);
       this.removeStats();
@@ -204,7 +204,7 @@ export default class WEBGLTexture extends Texture {
     }
   }
 
-  toString(): string {
+  override toString(): string {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
@@ -383,7 +383,7 @@ export default class WEBGLTexture extends Texture {
   }
 
   /** Update external texture (video frame) */
-  update(): this {
+  update(): void {
     if (this._video) {
       const {video, parameters, lastTime} = this._video;
       // @ts-expect-error
@@ -940,7 +940,7 @@ export default class WEBGLTexture extends Texture {
    * Sets sampler parameters on texture
    * @note: Applies NPOT workaround if appropriate
    */
-  _setSamplerParameters(parameters: GLSamplerParameters) {
+  _setSamplerParameters(parameters: GLSamplerParameters): void {
     // Work around WebGL1 sampling restrictions on NPOT textures
     if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
       parameters = updateSamplerParametersForNPOT(parameters);
@@ -972,7 +972,7 @@ export default class WEBGLTexture extends Texture {
       }
     }
     this.gl.bindTexture(this.target, null);
-    return this;
+    return;
   }
 
   /** @deprecated For LegacyTexture subclass */
@@ -1031,6 +1031,4 @@ function isNPOT(width: number, height: number): boolean {
 
 function logParameters(parameters: Record<number, GL | number>) {
   log.log(1, 'texture sampler parameters', parameters)();
-  for (const [pname, pvalue] of Object.entries(parameters)) {
-  }
 }

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

@@ -1,7 +1,6 @@
 // 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';
 
@@ -19,6 +18,7 @@ export default class WebGLCanvasContext extends CanvasContext {
     super(props);
     this.device = device;
     this.presentationSize = [-1, -1];
+    this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
     this.update();
   }
 
@@ -52,8 +52,7 @@ export default class WebGLCanvasContext extends CanvasContext {
    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);
+      this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }