@luma.gl/webgl 8.6.0-alpha.3 → 9.0.0-alpha.2

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

@@ -0,0 +1,413 @@
+import type {
+  RenderPipelineProps,
+  RenderPipelineParameters,
+  RenderPass,
+  Buffer,
+  Binding,
+  ShaderLayout,
+  PrimitiveTopology,
+  BindingLayout,
+  AttributeLayout
+} from '@luma.gl/api';
+import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {getWebGLDataType} from '../converters/texture-formats';
+import {getShaderLayout} from '../helpers/get-shader-layout';
+import {withDeviceParameters} from '../converters/device-parameters';
+import {setUniform} from '../helpers/set-uniform';
+// import {copyUniform, checkUniformValues} from '../../classes/uniforms';
+
+import WebGLDevice from '../webgl-device';
+import WEBGLBuffer from './webgl-buffer';
+import WEBGLShader from './webgl-shader';
+import WEBGLTexture from './webgl-texture';
+import WEBGLVertexArrayObject from '../objects/webgl-vertex-array-object';
+
+const LOG_PROGRAM_PERF_PRIORITY = 4;
+
+/** Creates a new render pipeline */
+export default class WEBGLRenderPipeline extends RenderPipeline {
+  device: WebGLDevice;
+  handle: WebGLProgram;
+  vs: WEBGLShader;
+  fs: WEBGLShader;
+  layout: ShaderLayout;
+
+  // configuration: ProgramConfiguration;
+  // Experimental flag to avoid deleting Program object while it is cached
+  varyings: string[];
+  vertexArrayObject: WEBGLVertexArrayObject;
+  _indexBuffer?: Buffer;
+  uniforms: Record<string, any> = {};
+  bindings: Record<string, any> = {};
+  _textureUniforms: Record<string, any> = {};
+  _textureIndexCounter: number = 0;
+  _uniformCount: number = 0;
+  _uniformSetters: Record<string, Function>;
+
+  constructor(device: WebGLDevice, props: RenderPipelineProps) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.props.handle || this.device.gl.createProgram();
+    // @ts-expect-error
+    this.handle.__SPECTOR_Metadata = {id: this.props.id};
+
+    // Create shaders if needed
+    this.vs = cast<WEBGLShader>(props.vs);
+    this.fs = cast<WEBGLShader>(props.fs);
+    // assert(this.vs.stage === 'vertex');
+    // assert(this.fs.stage === 'fragment');
+
+    // Setup varyings if supplied
+    // @ts-expect-error WebGL only
+    const {varyings, bufferMode = GL.SEPARATE_ATTRIBS} = props;
+    if (varyings && varyings.length > 0) {
+      this.device.assertWebGL2();
+      this.varyings = varyings;
+      this.device.gl2.transformFeedbackVaryings(this.handle, varyings, bufferMode);
+    }
+
+    this._compileAndLink();
+
+    this.layout = props.layout || getShaderLayout(this.device.gl, this.handle);
+    this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
+  }
+
+  destroy(): void {
+    if (this.handle) {
+      this.device.gl.deleteProgram(this.handle);
+      this.handle = null;
+    }
+  }
+
+  setIndexBuffer(indexBuffer: Buffer): void {
+    const webglBuffer = cast<WEBGLBuffer>(indexBuffer);
+    this.vertexArrayObject.setElementBuffer(webglBuffer);
+    this._indexBuffer = indexBuffer;
+  }
+
+  /** @todo needed for portable model */
+  setAttributes(attributes: Record<string, Buffer>): void {
+    for (const [name, buffer] of Object.entries(attributes)) {
+      const webglBuffer = cast<WEBGLBuffer>(buffer);
+      const attribute = getAttributeLayout(this.layout, name);
+      if (!attribute) {
+        log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
+        continue;
+      }
+      const decoded = decodeVertexFormat(attribute.format);
+      const {type: typeString, components: size, byteLength: stride, normalized, integer} = decoded;
+      const divisor = attribute.stepMode === 'instance' ? 1 : 0;
+      const type = getWebGLDataType(typeString);
+      this.vertexArrayObject.setBuffer(attribute.location, webglBuffer, {
+        size,
+        type,
+        stride,
+        offset: 0,
+        normalized,
+        integer,
+        divisor: attribute.stepMode === 'instance' ? 1 : 0
+      });
+    }
+  }
+
+  /** @todo needed for portable model */
+  setBindings(bindings: Record<string, Binding>): void {
+    // if (log.priority >= 2) {
+    //   checkUniformValues(uniforms, this.id, this._uniformSetters);
+    // }
+
+    for (const [name, value] of Object.entries(bindings)) {
+      const binding = this.layout.bindings.find((binding) => binding.name === name);
+      if (!binding) {
+        log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
+      }
+      if (!value) {
+        log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
+      }
+      switch (binding.type) {
+        case 'uniform':
+          // @ts-expect-error
+          if (!(value instanceof WEBGLBuffer) && !(value.buffer instanceof WEBGLBuffer)) {
+            throw new Error('buffer value');
+          }
+          break;
+        case 'texture':
+          if (!(value instanceof WEBGLTexture)) {
+            throw new Error('texture value');
+          }
+          break;
+        case 'sampler':
+          log.warn(`Ignoring sampler ${name}`)();
+          break;
+        default:
+          throw new Error(binding.type);
+      }
+
+      this.bindings[name] = value;
+    }
+  }
+
+  setUniforms(uniforms: Record<string, any>) {
+    // TODO - check against layout
+    Object.assign(this.uniforms, uniforms);
+  }
+
+  /** @todo needed for portable model
+   * @note The WebGL API is offers many ways to draw things
+   * This function unifies those ways into a single call using common parameters with sane defaults
+   */
+  draw(options: {
+    renderPass?: RenderPass;
+    vertexCount?: number;
+    indexCount?: number;
+    instanceCount?: number;
+    firstVertex?: number;
+    firstIndex?: number;
+    firstInstance?: number;
+    baseVertex?: number;
+  }): boolean {
+    const {
+      renderPass = this.device.getDefaultRenderPass(),
+      vertexCount,
+      indexCount,
+      instanceCount,
+      firstVertex = 0,
+      firstIndex,
+      firstInstance,
+      baseVertex
+    } = options;
+
+    const drawMode = getDrawMode(this.props.topology);
+    const isIndexed: boolean = Boolean(this._indexBuffer);
+    const indexType = this._indexBuffer?.props.indexType === 'uint16' ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
+    const isInstanced: boolean = options.instanceCount > 0;
+
+    // Avoid WebGL draw call when not rendering any data or values are incomplete
+    // Note: async textures set as uniforms might still be loading.
+    // Now that all uniforms have been updated, check if any texture
+    // in the uniforms is not yet initialized, then we don't draw
+    if (!this._areTexturesRenderable() || options.vertexCount === 0) {
+      // (isInstanced && instanceCount === 0)
+      return false;
+    }
+
+    this.device.gl.useProgram(this.handle);
+
+    this.vertexArrayObject.bind(() => {
+      const parameters = {...this.props.parameters, framebuffer: renderPass.props.framebuffer};
+
+      const primitiveMode = getGLPrimitive(this.props.topology);
+      const transformFeedback: any = null;
+      if (transformFeedback) {
+        transformFeedback.begin(primitiveMode);
+      }
+
+      // We have to apply bindings before every draw call since other draw calls will overwrite
+      this._applyBindings();
+      this._applyUniforms();
+
+      // TODO - double context push/pop
+      withDeviceParameters(this.device, parameters, () => {
+        // TODO - Use polyfilled WebGL2RenderingContext instead of ANGLE extension
+        if (isIndexed && isInstanced) {
+          // ANGLE_instanced_arrays extension
+          this.device.gl2.drawElementsInstanced(
+            drawMode,
+            vertexCount,
+            indexType,
+            firstVertex,
+            instanceCount
+          );
+          // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
+          //   this.device.gl2.drawRangeElements(drawMode, start, end, vertexCount, indexType, offset);
+        } else if (isIndexed) {
+          this.device.gl.drawElements(drawMode, vertexCount, indexType, firstVertex);
+        } else if (isInstanced) {
+          this.device.gl2.drawArraysInstanced(drawMode, firstVertex, vertexCount, instanceCount);
+        } else {
+          this.device.gl.drawArrays(drawMode, firstVertex, vertexCount);
+        }
+      });
+
+      if (transformFeedback) {
+        transformFeedback.end();
+      }
+    });
+
+    return true;
+  }
+
+  // setAttributes(attributes: Record<string, Buffer>): void {}
+  // setBindings(bindings: Record<string, Binding>): void {}
+
+  protected _compileAndLink() {
+    const {gl} = this.device;
+    gl.attachShader(this.handle, this.vs.handle);
+    gl.attachShader(this.handle, this.fs.handle);
+    log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+    gl.linkProgram(this.handle);
+    log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+
+    // Avoid checking program linking error in production
+    // @ts-expect-error
+    if (gl.debug || log.level > 0) {
+      const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
+      if (!linked) {
+        throw new Error(`Error linking: ${gl.getProgramInfoLog(this.handle)}`);
+      }
+
+      gl.validateProgram(this.handle);
+      const validated = gl.getProgramParameter(this.handle, gl.VALIDATE_STATUS);
+      if (!validated) {
+        throw new Error(`Error validating: ${gl.getProgramInfoLog(this.handle)}`);
+      }
+    }
+  }
+
+  // PRIVATE METHODS
+
+  /**
+   * Checks if all texture-values uniforms are renderable (i.e. loaded)
+   * Update a texture if needed (e.g. from video)
+   * Note: This is currently done before every draw call
+   */
+  _areTexturesRenderable() {
+    let texturesRenderable = true;
+
+    for (const [name, texture] of Object.entries(this._textureUniforms)) {
+      texture.update();
+      texturesRenderable = texturesRenderable && texture.loaded;
+    }
+
+    for (const [name, texture] of Object.entries(this.bindings)) {
+      // texture.update();
+      if (texture.loaded !== undefined) {
+        texturesRenderable = texturesRenderable && texture.loaded;
+      }
+    }
+
+    return texturesRenderable;
+  }
+
+  /** Apply any bindings */
+  _applyBindings() {
+    this.device.gl.useProgram(this.handle);
+
+    const {gl2} = this.device;
+
+    let textureUnit = 0;
+    let uniformBufferIndex = 0;
+    for (const binding of this.layout.bindings) {
+      const value = this.bindings[binding.name];
+      if (!value) {
+        throw new Error(`No value for binding ${binding.name} in ${this.id}`);
+      }
+      switch (binding.type) {
+        case 'uniform':
+          // Set buffer
+          const {name} = binding;
+          const location = gl2.getUniformBlockIndex(this.handle, name);
+          if (location === GL.INVALID_INDEX) {
+            throw new Error(`Invalid uniform block name ${name}`);
+          }
+          gl2.uniformBlockBinding(this.handle, uniformBufferIndex, location);
+          // console.debug(binding, location);
+          if (value instanceof WEBGLBuffer) {
+            gl2.bindBufferBase(GL.UNIFORM_BUFFER, uniformBufferIndex, value.handle);
+          } else {
+            gl2.bindBufferRange(
+              GL.UNIFORM_BUFFER,
+              uniformBufferIndex,
+              value.buffer.handle,
+              value.offset || 0,
+              value.size || value.buffer.byteLength - value.offset
+            );
+          }
+          uniformBufferIndex += 1;
+          break;
+
+        case 'texture':
+          if (!(value instanceof WEBGLTexture)) {
+            throw new Error('texture');
+          }
+          const texture: WEBGLTexture = value;
+          gl2.activeTexture(GL.TEXTURE0 + textureUnit);
+          gl2.bindTexture(texture.target, texture.handle);
+          // gl2.bindSampler(textureUnit, sampler.handle);
+          textureUnit += 1;
+          break;
+
+        case 'sampler':
+          // ignore
+          break;
+
+        case 'storage':
+        case 'read-only-storage':
+          throw new Error(`binding type '${binding.type}' not supported in WebGL`);
+      }
+    }
+  }
+
+  _applyUniforms() {
+    for (const uniformLayout of this.layout.uniforms || []) {
+      const {name, location, type, textureUnit} = uniformLayout;
+      const value = this.uniforms[name] || textureUnit;
+      if (value !== undefined) {
+        setUniform(this.device.gl, location, type, value);
+      }
+    }
+  }
+}
+
+/** Get the primitive type for transform feedback */
+function getDrawMode(
+  topology: PrimitiveTopology
+): GL.POINTS | GL.LINES | GL.LINE_STRIP | GL.TRIANGLES | GL.TRIANGLE_STRIP {
+  // prettier-ignore
+  switch (topology) {
+  case 'point-list': return GL.POINTS;
+  case 'line-list': return GL.LINES;
+  case 'line-strip': return GL.LINE_STRIP;
+  case 'triangle-list': return GL.TRIANGLES;
+  case 'triangle-strip': return GL.TRIANGLE_STRIP;
+  default: throw new Error(topology);
+  }
+}
+
+/** Get the primitive type for transform feedback */
+function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
+  // prettier-ignore
+  switch (topology) {
+  case 'point-list': return GL.POINTS;
+  case 'line-list': return GL.LINES;
+  case 'line-strip': return GL.LINES;
+  case 'triangle-list': return GL.TRIANGLES;
+  case 'triangle-strip': return GL.TRIANGLES;
+  default: throw new Error(topology);
+  }
+}
+
+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);
+    byLocation[attribute.location] = buffer;
+  }
+  return byLocation;
+}
+
+function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | undefined {
+  return layout.attributes.find((binding) => binding.name === name);
+}
+
+function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
+  const binding = layout.bindings.find((binding) => binding.name === name);
+  if (!binding) {
+    throw new Error(`Unknown binding ${name}`);
+  }
+  return binding;
+}

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

@@ -0,0 +1,54 @@
+import {Sampler, SamplerProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import type {WebGLSamplerParameters} from '../../types/webgl';
+import {convertSamplerParametersToWebGL} from '../converters/sampler-parameters';
+import type WebGLDevice from '../webgl-device';
+
+/**
+ * Sampler object -
+ * Under WebGL2 we create an actual WebGL sampler
+ * Under WebGL1, we just store the sampler parameters
+ * so that they can be set directly on the texture
+ * https://github.com/WebGLSamples/WebGL2Samples/blob/master/samples/sampler_object.html
+ */
+export default class WEBGLSampler extends Sampler {
+  readonly device: WebGLDevice;
+  readonly handle: WebGLSampler;
+  readonly parameters: WebGLSamplerParameters;
+
+  constructor(device: WebGLDevice, props: SamplerProps) {
+    super(device, props);
+    this.device = device;
+    this.parameters = convertSamplerParametersToWebGL(props);
+    if (this.device.isWebGL2) {
+      this.handle = this.handle || this.device.gl2.createSampler();
+      this._setSamplerParameters(this.parameters);
+    }
+  }
+
+  destroy(): void {
+    if (this.handle) {
+      this.device.gl2.deleteSampler(this.handle);
+      // @ts-expect-error
+      this.handle = undefined;
+    }
+  }
+
+  /** Set sampler parameters on the sampler */
+  private _setSamplerParameters(parameters: WebGLSamplerParameters): void {
+    for (const [pname, value] of Object.entries(parameters)) {
+      // Apparently there are integer/float conversion issues requires two parameter setting functions in JavaScript.
+      // For now, pick the float version for parameters specified as GLfloat.
+      const param = Number(pname);
+      switch (param) {
+        case GL.TEXTURE_MIN_LOD:
+        case GL.TEXTURE_MAX_LOD:
+          this.device.gl2.samplerParameterf(this.handle, param, value);
+          break;
+        default:
+          this.device.gl2.samplerParameteri(this.handle, param, value);
+          break;
+      }
+    }
+  }
+}

package/src/adapter/{webgl-shader.ts → resources/webgl-shader.ts}

@@ -2,68 +2,62 @@
 import {log, uid, Shader, ShaderProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {getShaderInfo, CompilerMessage, formatCompilerLog} from '@luma.gl/shadertools';
-import {parseShaderCompilerLog} from '../webgl-utils/parse-shader-compiler-log';
-import WebGLDevice from '../adapter/webgl-device';
+import {parseShaderCompilerLog} from '../helpers/parse-shader-compiler-log';
+import WebGLDevice from '../webgl-device';
 
 /**
  * An immutable compiled shader program that execute portions of the GPU Pipeline
  */
- export class WEBGLShader extends Shader {
+ export default class WEBGLShader extends Shader {
   readonly device: WebGLDevice;
-  readonly gl: WebGLRenderingContext;
   readonly handle: WebGLShader;
 
-  readonly stage: 'vertex' | 'fragment';
-  readonly source: string;
-
   constructor(device: WebGLDevice, props: ShaderProps) {
     super(device, {id: getShaderIdFromProps(props), ...props});
     this.device = device;
-    this.gl = device.gl;
     switch (this.props.stage) {
       case 'vertex':
-        this.handle = this.props.handle || this.gl.createShader(GL.VERTEX_SHADER);
+        this.handle = this.props.handle || this.device.gl.createShader(GL.VERTEX_SHADER);
         break;
       case 'fragment':
-        this.handle = this.props.handle || this.gl.createShader(GL.FRAGMENT_SHADER);
+        this.handle = this.props.handle || this.device.gl.createShader(GL.FRAGMENT_SHADER);
         break;
       default:
         throw new Error(this.props.stage);
     }
-    this.stage = this.props.stage;
-    this.source = this.props.source;
     this._compile(this.source);
   }
 
   destroy(): void {
     if (this.handle) {
       this.removeStats();
-      this.gl.deleteShader(this.handle);
+      this.device.gl.deleteShader(this.handle);
       // @ts-expect-error
       this.handle = null;
     }
   }
 
   async compilationInfo(): Promise<readonly CompilerMessage[]> {
-    const log = this.gl.getShaderInfoLog(this.handle);
+    const log = this.device.gl.getShaderInfoLog(this.handle);
     return parseShaderCompilerLog(log);
   }
 
   // PRIVATE METHODS
 
-  _compile(source) {
-    const addGLSLVersion = source => source.startsWith('#version ') ? source : `#version 100\n${source}`;
+  _compile(source: string): void {
+    const addGLSLVersion = (source: string) => source.startsWith('#version ') ? source : `#version 100\n${source}`;
     source = addGLSLVersion(source);
 
-    this.gl.shaderSource(this.handle, source);
-    this.gl.compileShader(this.handle);
+    const {gl} = this.device;
+    gl.shaderSource(this.handle, source);
+    gl.compileShader(this.handle);
 
     // TODO - For performance reasons, avoid checking shader compilation errors on production?
     // TODO - Load log even when no error reported, to catch warnings?
     // https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
-    const compileStatus = this.gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
+    const compileStatus = gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
     if (!compileStatus) {
-      const shaderLog = this.gl.getShaderInfoLog(this.handle);
+      const shaderLog = gl.getShaderInfoLog(this.handle);
       const messages = parseShaderCompilerLog(shaderLog).filter(message => message.type === 'error');
       const formattedLog = formatCompilerLog(messages, source);
       const shaderName: string = getShaderInfo(source).name;