@luma.gl/webgl 8.5.8 → 8.6.0-alpha.2

package/src/webgl-utils/parse-shader-compiler-log.ts

@@ -0,0 +1,48 @@
+// luma.gl, MIT license
+import type {CompilerMessage} from '@luma.gl/shadertools';
+
+const MESSAGE_TYPES = ['warning', 'error', 'info'];
+
+/**
+ * Parse a WebGL-format GLSL compilation log into an array of WebGPU style message records.
+ * This follows documented WebGL conventions for compilation logs.
+ * Based on https://github.com/wwwtyro/gl-format-compiler-error (public domain)
+ */
+export function parseShaderCompilerLog(errLog: string) : readonly CompilerMessage[] {
+  // Parse the error - note: browser and driver dependent
+  const lines = errLog.split(/\r?\n/);
+
+  const messages: CompilerMessage[] = [];
+
+  for (const line of lines) {
+    if (line.length <= 1) {
+      continue;
+    }
+
+    const segments: string[] = line.split(':');
+    const [messageType, linePosition, lineNumber, ...rest] = segments;
+
+    let lineNum = parseInt(lineNumber, 10);
+    if (isNaN(lineNum)) {
+      lineNum = 0;
+    }
+
+    let linePos = parseInt(linePosition, 10);
+    if (isNaN(linePos)) {
+      linePos = 0;
+    }
+
+    // Ensure supported type
+    const lowerCaseType = messageType.toLowerCase();
+    const type = (MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : 'info') as 'warning' | 'error' | 'info';
+
+    messages.push({
+      message: rest.join(':').trim(),
+      type,
+      lineNum,
+      linePos // TODO
+    })
+  }
+
+  return messages;
+}

package/src/webgl-utils/{request-animation-frame.js → request-animation-frame.ts}

@@ -1,12 +1,13 @@
 // Node.js polyfills for requestAnimationFrame and cancelAnimationFrame
+// / <reference types="@types/node" />
 
-export function requestAnimationFrame(callback) {
+export function requestAnimationFrame(callback): number | NodeJS.Timeout {
   return typeof window !== 'undefined' && window.requestAnimationFrame
     ? window.requestAnimationFrame(callback)
     : setTimeout(callback, 1000 / 60);
 }
 
-export function cancelAnimationFrame(timerId) {
+export function cancelAnimationFrame(timerId): void {
   return typeof window !== 'undefined' && window.cancelAnimationFrame
     ? window.cancelAnimationFrame(timerId)
     : clearTimeout(timerId);

package/src/webgl-utils/{texture-utils.js → texture-utils.ts}

@@ -1,14 +1,16 @@
 // TODO: Two subdirectories must not depend on each other (classes vs utils)!
+import {assert} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import Texture from '../classes/texture';
 import Texture2D from '../classes/texture-2d';
 import TextureCube from '../classes/texture-cube';
 import Texture3D from '../classes/texture-3d';
-import Framebuffer from '../classes/framebuffer';
-import GL from '@luma.gl/constants';
-import {assert} from '../utils/assert';
+import Framebuffer, {FramebufferProps} from '../classes/framebuffer';
+
+type TextureType = Texture2D | TextureCube | Texture3D;
 
-// Clone a new texture object from a reference texture object.
-/** @type {import('./texture-utils').cloneTextureFrom} */
-export function cloneTextureFrom(refTexture, overrides) {
+/** Clone a new texture object from a reference texture object. */
+export function cloneTextureFrom<T extends TextureType>(refTexture: T, overrides?: any): T {
   assert(
     refTexture instanceof Texture2D ||
       refTexture instanceof TextureCube ||
@@ -33,13 +35,15 @@ export function cloneTextureFrom(refTexture, overrides) {
   );
 
   // TODO: move this to `Texture` class as instance method and use this.constructor
+  // @ts-expect-error
   return new TextureType(gl, textureOptions);
 }
 
-// Wraps a given texture into a framebuffer object, that can be further used
-// to read data from the texture object.
-/** @type {import('./texture-utils').toFramebuffer} */
-export function toFramebuffer(texture, opts) {
+/**
+ * Wraps a given texture into a framebuffer object, that can be further used
+ * to read data from the texture object.
+ */ 
+export function toFramebuffer(texture: Texture, opts?: FramebufferProps): Framebuffer {
   const {gl, width, height, id} = texture;
   const framebuffer = new Framebuffer(
     gl,

package/src/webgl-utils/typed-array-utils.ts

@@ -0,0 +1,137 @@
+import GL from '@luma.gl/constants';
+
+const ERR_TYPE_DEDUCTION = 'Failed to deduce GL constant from typed array';
+
+type TypedArrayConstructor =
+  | Float32ArrayConstructor
+  | Uint16ArrayConstructor
+  | Uint32ArrayConstructor
+  | Uint8ArrayConstructor
+  | Uint8ClampedArrayConstructor
+  | Int8ArrayConstructor
+  | Int16ArrayConstructor
+  | Int32ArrayConstructor;
+
+/**
+ * Converts TYPED ARRAYS to corresponding GL constant
+ * Used to auto deduce gl parameter types
+ * @param {*} arrayOrType
+ * @returns
+ */
+export function getGLTypeFromTypedArray(arrayOrType) {
+  // If typed array, look up constructor
+  const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+  switch (type) {
+    case Float32Array:
+      return GL.FLOAT;
+    case Uint16Array:
+      return GL.UNSIGNED_SHORT;
+    case Uint32Array:
+      return GL.UNSIGNED_INT;
+    case Uint8Array:
+      return GL.UNSIGNED_BYTE;
+    case Uint8ClampedArray:
+      return GL.UNSIGNED_BYTE;
+    case Int8Array:
+      return GL.BYTE;
+    case Int16Array:
+      return GL.SHORT;
+    case Int32Array:
+      return GL.INT;
+    default:
+      throw new Error(ERR_TYPE_DEDUCTION);
+  }
+}
+
+/**
+ * Converts GL constant to corresponding TYPED ARRAY
+ * Used to auto deduce gl parameter types
+ * @param {*} glType
+ * @param {*} param1
+ * @returns
+ */
+// eslint-disable-next-line complexity
+export function getTypedArrayFromGLType(
+  glType: any,
+  options?: {
+    clamped?: boolean;
+  }
+): TypedArrayConstructor {
+  const {clamped = true} = options || {};
+  // Sorted in some order of likelihood to reduce amount of comparisons
+  switch (glType) {
+    case GL.FLOAT:
+      return Float32Array;
+    case GL.UNSIGNED_SHORT:
+    case GL.UNSIGNED_SHORT_5_6_5:
+    case GL.UNSIGNED_SHORT_4_4_4_4:
+    case GL.UNSIGNED_SHORT_5_5_5_1:
+      return Uint16Array;
+    case GL.UNSIGNED_INT:
+      return Uint32Array;
+    case GL.UNSIGNED_BYTE:
+      return clamped ? Uint8ClampedArray : Uint8Array;
+    case GL.BYTE:
+      return Int8Array;
+    case GL.SHORT:
+      return Int16Array;
+    case GL.INT:
+      return Int32Array;
+    default:
+      throw new Error('Failed to deduce typed array type from GL constant');
+  }
+}
+
+/**
+ * Flip rows (can be used on arrays returned from `Framebuffer.readPixels`)
+ * https: *stackoverflow.com/questions/41969562/
+ * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ * @param {*} param0
+ */
+ export function flipRows(options: {
+  data: any;
+  width: any;
+  height: any;
+  bytesPerPixel?: number;
+  temp?: any;
+}): void {
+  const {data, width, height, bytesPerPixel = 4, temp} = options;
+  const bytesPerRow = width * bytesPerPixel;
+
+  // make a temp buffer to hold one row
+  const tempBuffer = temp || new Uint8Array(bytesPerRow);
+  for (let y = 0; y < height / 2; ++y) {
+    const topOffset = y * bytesPerRow;
+    const bottomOffset = (height - y - 1) * bytesPerRow;
+    // make copy of a row on the top half
+    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
+    // copy a row from the bottom half to the top
+    data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+    // copy the copy of the top half row to the bottom half
+    data.set(tempBuffer, bottomOffset);
+  }
+}
+
+
+export function scalePixels(options: {
+  data: any;
+  width: any;
+  height: any;
+}): {
+  data: Uint8Array;
+  width: number;
+  height: number;
+} {
+  const {data, width, height} = options;
+  const newWidth = Math.round(width / 2);
+  const newHeight = Math.round(height / 2);
+  const newData = new Uint8Array(newWidth * newHeight * 4);
+  for (let y = 0; y < newHeight; y++) {
+    for (let x = 0; x < newWidth; x++) {
+      for (let c = 0; c < 4; c++) {
+        newData[(y * newWidth + x) * 4 + c] = data[(y * 2 * width + x * 2) * 4 + c];
+      }
+    }
+  }
+  return {data: newData, width: newWidth, height: newHeight};
+}

package/src/webgl-utils/webgl-info.ts.disabled

@@ -0,0 +1,135 @@
+// Feature detection for WebGL
+//
+// Provides a function that enables simple checking of which WebGL features are
+// available in an WebGL1 or WebGL2 environment.
+
+/* eslint-disable no-inline-comments, max-len */
+import isOldIE from './is-old-ie';
+import {assert} from './assert';
+
+const GL_VENDOR = 0x1f00;
+const GL_RENDERER = 0x1f01;
+const GL_VERSION = 0x1f02;
+const GL_SHADING_LANGUAGE_VERSION = 0x8b8c;
+
+// Defines luma.gl "feature" names and semantics
+const WEBGL_FEATURES = {
+  // GLSL extensions
+  GLSL_FRAG_DATA: ['WEBGL_draw_buffers', true], // TODO - name makes no sense in GLSL 3.00
+  GLSL_FRAG_DEPTH: ['EXT_frag_depth', true],
+  GLSL_DERIVATIVES: ['OES_standard_derivatives', true],
+  GLSL_TEXTURE_LOD: ['EXT_shader_texture_lod', true]
+};
+
+// Create a key-mirrored FEATURES array
+export const FEATURES = {
+  GLSL_FRAG_DATA: 'GLSL_FRAG_DATA',
+  GLSL_FRAG_DEPTH: 'GLSL_FRAG_DEPTH',
+  GLSL_DERIVATIVES: 'GLSL_DERIVATIVES',
+  GLSL_TEXTURE_LOD: 'GLSL_TEXTURE_LOD',
+};
+
+function isWebGL2(gl) {
+  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+    return true;
+  }
+  return Boolean(gl && gl._version === 2);
+}
+
+export function getContextInfo(gl) {
+  const info = gl.getExtension('WEBGL_debug_renderer_info');
+  const vendor = gl.getParameter((info && info.UNMASKED_VENDOR_WEBGL) || GL_VENDOR);
+  const renderer = gl.getParameter((info && info.UNMASKED_RENDERER_WEBGL) || GL_RENDERER);
+  const gpuVendor = identifyGPUVendor(vendor, renderer);
+  const gpuInfo = {
+    gpuVendor,
+    vendor,
+    renderer,
+    version: gl.getParameter(GL_VERSION),
+    shadingLanguageVersion: gl.getParameter(GL_SHADING_LANGUAGE_VERSION)
+  };
+  return gpuInfo;
+}
+
+function identifyGPUVendor(vendor, renderer) {
+  if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
+    return 'NVIDIA';
+  }
+  if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
+    return 'INTEL';
+  }
+  if (vendor.match(/Apple/i) || renderer.match(/Apple/i)) {
+    return 'APPLE';
+  }
+  if (
+    vendor.match(/AMD/i) ||
+    renderer.match(/AMD/i) ||
+    vendor.match(/ATI/i) ||
+    renderer.match(/ATI/i)
+  ) {
+    return 'AMD';
+  }
+  return 'UNKNOWN';
+}
+
+const compiledGlslExtensions = {};
+
+// Enables feature detection in IE11 due to a bug where gl.getExtension may return true
+// but fail to compile when the extension is enabled in the shader. Specifically,
+// the OES_standard_derivatives and WEBGL_draw_buffers extensions fails to compile in IE11 even though its included
+// in the list of supported extensions.
+// opts allows user agent to be overridden for testing
+/*
+ * Inputs :
+ *  gl : WebGL context
+ *  cap : Key of WEBGL_FEATURES object identifying the extension
+ *  opts :
+ *   behavior : behavior of extension to be tested, by defualt `enable` is used
+ * Returns : true, if shader is compiled successfully, false otherwise
+ */
+export function canCompileGLGSExtension(gl, cap, opts: {behavior?} = {}) {
+  const feature = WEBGL_FEATURES[cap];
+  assert(feature, cap);
+
+  if (!isOldIE(opts)) {
+    return true;
+  }
+
+  if (cap in compiledGlslExtensions) {
+    return compiledGlslExtensions[cap];
+  }
+
+  const extensionName = feature[0];
+  const behavior = opts.behavior || 'enable';
+  const source = `#extension GL_${extensionName} : ${behavior}\nvoid main(void) {}`;
+
+  const shader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const canCompile = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  gl.deleteShader(shader);
+  compiledGlslExtensions[cap] = canCompile;
+  return canCompile;
+}
+
+// TODO - cache the value
+function getFeature(gl, cap) {
+  const feature = WEBGL_FEATURES[cap];
+  assert(feature, cap);
+
+  // Get extension name from table
+  const extensionName = isWebGL2(gl) ? feature[1] || feature[0] : feature[0];
+
+  // Check if the value is dependent on checking an extension
+  const value =
+    typeof extensionName === 'string' ? Boolean(gl.getExtension(extensionName)) : extensionName;
+
+  assert(value === false || value === true);
+
+  return value;
+}
+
+export function hasFeatures(gl, features) {
+  features = Array.isArray(features) ? features : [features];
+  return features.every((feature) => getFeature(gl, feature));
+}