@luma.gl/webgl 9.0.0-alpha.2 → 9.0.0-alpha.21

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.21",
   "description": "WebGL2 adapter for the luma.gl API",
+  "type": "module",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -16,12 +17,20 @@
     "animation",
     "3d"
   ],
-  "types": "src/index.ts",
-  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
     "src",
     "dist",
+    "dist.min.js",
     "README.md"
   ],
   "sideEffects": false,
@@ -30,14 +39,14 @@
     "gl/wrap": false
   },
   "scripts": {
-    "pre-build": "npm run build-bundle",
-    "build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
+    "build-bundle": "ocular-bundle ./src/index.ts",
+    "pre-build": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.2",
-    "@luma.gl/constants": "9.0.0-alpha.2",
-    "@probe.gl/env": "^3.5.0"
+    "@luma.gl/api": "9.0.0-alpha.21",
+    "@luma.gl/constants": "9.0.0-alpha.21",
+    "@probe.gl/env": "^4.0.2"
   },
-  "gitHead": "81e93840f31f0e32f86dfea6b576acf2c2d9caec"
+  "gitHead": "7ee95470a6a2f62753201beb0c36b00e37c70455"
 }

package/src/adapter/converters/device-parameters.ts

@@ -3,7 +3,9 @@ import GL from '@luma.gl/constants';
 import type { GLParameters } from '../../types/webgl';
 import {pushContextState, popContextState} from '../../context/state-tracker/track-context-state';
 import {setParameters} from '../../context/parameters/unified-parameter-api';
-import WebGLDevice from '../webgl-device';
+import {WebGLDevice} from '../webgl-device';
+
+/* eslint-disable no-unused-expressions */ // For expression ? gl.enable() : gl.disable()
 
 /**
  * Execute a function with a set of temporary WebGL parameter overrides
@@ -12,8 +14,9 @@ import WebGLDevice from '../webgl-device';
  * - Executes supplied function
  * - Restores parameters
  * - Returns the return value of the supplied function
+ * @deprecated use withDeviceParameters instead
  */
-export function withDeviceParameters<T = unknown>(device: Device, parameters: Parameters & GLParameters, func: (device?: Device) => T): T {
+export function withGLParameters<T = unknown>(device: Device, parameters: GLParameters, func: (device?: Device) => T): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
     return func(device);
@@ -24,6 +27,31 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
   pushContextState(device.gl);
   try {
     setParameters(device, parameters);
+    return func(device);
+  } finally {
+    // @ts-expect-error
+    popContextState(device.gl);
+  }
+}
+
+/**
+ * Execute a function with a set of temporary WebGL parameter overrides
+ * - Saves current "global" WebGL context settings
+ * - Sets the supplies WebGL context parameters,
+ * - Executes supplied function
+ * - Restores parameters
+ * - Returns the return value of the supplied function
+ */
+export function withDeviceParameters<T = unknown>(device: Device, parameters: Parameters, func: (device?: Device) => T): T {
+  if (isObjectEmpty(parameters)) {
+    // Avoid setting state if no parameters provided. Just call and return
+    return func(device);
+  }
+
+  // Wrap in a try-catch to ensure that parameters are restored on exceptions
+  // @ts-expect-error
+  pushContextState(device.gl);
+  try {
     setDeviceParameters(device, parameters);
     return func(device);
   } finally {
@@ -36,7 +64,7 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
 /** Set WebGPU Style Parameters */
 export function setDeviceParameters(device: Device, parameters: Parameters) {
   const webglDevice = WebGLDevice.attach(device);
-  const {gl, gl2} = webglDevice;
+  const {gl} = webglDevice;
 
   // RASTERIZATION SETTINGS
   if (parameters.cullMode) {
@@ -76,7 +104,8 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
   }
 
- if (parameters.depthCompare) {
+  if (parameters.depthCompare) {
+
     parameters.depthCompare !== 'always' ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST);
     gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
   }
@@ -101,7 +130,7 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     gl.stencilFuncSeparate(GL.BACK, glValue, 0, mask);
   }
 
-  if (parameters.stencilPassOperation) {
+  if (parameters.stencilPassOperation && parameters.stencilFailOperation && parameters.stencilDepthFailOperation) {
     const dppass = convertStencilOperation('stencilPassOperation', parameters.stencilPassOperation);
     const sfail = convertStencilOperation('stencilFailOperation', parameters.stencilFailOperation);
     const dpfail = convertStencilOperation('stencilDepthFailOperation', parameters.stencilDepthFailOperation);
@@ -198,16 +227,16 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-function convertBlendOperationToEquation(parameter, value): number {
-  return map(parameter, value, {
-    'add': GL.FUNC_ADD,
-    'sub': GL.FUNC_SUBTRACT,
-    'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
-    // When using a WebGL 2 context, the following values are available additionally:
-    'min': GL.MIN,
-    'max': GL.MAX
-  });
-}
+// function convertBlendOperationToEquation(parameter: string, value: string): number {
+//   return map(parameter, value, {
+//     'add': GL.FUNC_ADD,
+//     'sub': GL.FUNC_SUBTRACT,
+//     'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
+//     // When using a WebGL 2 context, the following values are available additionally:
+//     'min': GL.MIN,
+//     'max': GL.MAX
+//   });
+// }
 
 function message(parameter: string, value: any): string {
   return `Illegal parameter ${value} for ${parameter}`;
@@ -220,6 +249,6 @@ function map(parameter: string, value: any, valueMap: Record<string, any>): any
   return valueMap[value];
 }
 
-function mapBoolean(parameter, value) {
+function mapBoolean(parameter: string, value: boolean): boolean {
   return value;
 }

package/src/adapter/converters/renderbuffer-formats.ts

@@ -34,7 +34,7 @@ type RenderbufferFormat = {
   ext?: string;
 };
 
-const RENDERBUFFER_FORMATS: Record<string, RenderbufferFormat> = {
+export const RENDERBUFFER_FORMATS: Record<string, RenderbufferFormat> = {
   [GL.DEPTH_COMPONENT16]: {bpp: 2}, // 16 depth bits.
   [GL.DEPTH_COMPONENT24]: {gl2: true, bpp: 3},
   [GL.DEPTH_COMPONENT32F]: {gl2: true, bpp: 4},
@@ -88,5 +88,3 @@ const RENDERBUFFER_FORMATS: Record<string, RenderbufferFormat> = {
   // [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, gl1: EXT_FLOAT_WEBGL1},
   [GL.R11F_G11F_B10F]: {ext: EXT_FLOAT_WEBGL2, bpp: 4}
 };
-
-export default RENDERBUFFER_FORMATS;

package/src/adapter/converters/sampler-parameters.ts

@@ -1,15 +1,17 @@
 // SAMPLER FILTERS
 import {SamplerParameters} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {WebGLSamplerParameters} from '../../types/webgl';
+import {GLSamplerParameters} from '../../types/webgl';
 import {convertCompareFunction, convertToCompareFunction} from './device-parameters';
 
+/* eslint-disable consistent-return */
+
 /**
  * Convert WebGPU-style sampler props to WebGL
  * @param props
  * @returns
  */
-export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGLSamplerParameters {
+export function convertSamplerParametersToWebGL(props: SamplerParameters): GLSamplerParameters {
   const params: Record<number, number> = {};
   if (props.addressModeU) {
     params[GL.TEXTURE_WRAP_S] = convertAddressMode(props.addressModeU);
@@ -33,14 +35,16 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGL
   if (props.lodMaxClamp !== undefined) {
     params[GL.TEXTURE_MAX_LOD] = props.lodMaxClamp;
   }
-  if (props.compare) {
+  if (props.type === 'comparison-sampler') {
     // Setting prop.compare turns this into a comparison sampler
     params[GL.TEXTURE_COMPARE_MODE] = GL.COMPARE_REF_TO_TEXTURE;
+  }
+  if (props.compare) {
     params[GL.TEXTURE_COMPARE_FUNC] = convertCompareFunction('compare', props.compare);
   }
   // Note depends on WebGL extension
   if (props.maxAnisotropy) {
-    props[GL.TEXTURE_MAX_ANISOTROPY_EXT] = props.maxAnisotropy;
+    params[GL.TEXTURE_MAX_ANISOTROPY_EXT] = props.maxAnisotropy;
   }
   return params;
 }
@@ -82,7 +86,7 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
  * @param props
  * @returns
  */
- export function convertToSamplerParameters(params: WebGLSamplerParameters): SamplerParameters {
+export function convertToSamplerParameters(params: GLSamplerParameters): SamplerParameters {
   const props: SamplerParameters = {};
   if (params[GL.TEXTURE_WRAP_S]) {
     props.addressModeU = convertToAddressMode(params[GL.TEXTURE_WRAP_S]);
@@ -108,7 +112,10 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
   if (params[GL.TEXTURE_MAX_LOD]) {
     props.lodMaxClamp = params[GL.TEXTURE_MAX_LOD];
   }
-  if (params[GL.TEXTURE_COMPARE_MODE] === GL.COMPARE_REF_TO_TEXTURE) {
+  if (params[GL.TEXTURE_COMPARE_MODE]) {
+    props.type = params[GL.TEXTURE_COMPARE_MODE]  === GL.COMPARE_REF_TO_TEXTURE ? 'comparison-sampler' : 'color-sampler';
+  }
+  if (params[GL.TEXTURE_COMPARE_FUNC]) {
     props.compare = convertToCompareFunction('compare', params[GL.TEXTURE_COMPARE_FUNC]);
   }
   // NOTE depends on extension (very common)
@@ -124,6 +131,7 @@ function convertToAddressMode(addressMode: number): 'clamp-to-edge' | 'repeat' |
     case GL.CLAMP_TO_EDGE: return 'clamp-to-edge';
     case GL.REPEAT: return 'repeat';
     case GL.MIRRORED_REPEAT: return 'mirror-repeat';
+    default: throw new Error('address');
   }
 }
 
@@ -131,6 +139,7 @@ function convertToMaxFilterMode(filterMode: number): 'nearest' | 'linear' {
   switch (filterMode) {
     case GL.NEAREST: return 'nearest';
     case GL.LINEAR: return 'linear';
+    default: throw new Error('maxfilter');
   }
 }
 
@@ -144,6 +153,7 @@ function convertToMinFilterMode(filterMode: number): 'nearest' | 'linear' {
     case GL.LINEAR_MIPMAP_NEAREST: return 'linear';
     case GL.NEAREST_MIPMAP_LINEAR: return 'nearest';
     case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    default: throw new Error('minfilter');
   }
 }
 
@@ -156,13 +166,14 @@ function convertToMipmapFilterMode(filterMode: number): 'nearest' | 'linear' {
     case GL.LINEAR_MIPMAP_NEAREST: return 'nearest';
     case GL.NEAREST_MIPMAP_LINEAR: return 'linear';
     case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    default: throw new Error('mipmap');
   }
 }
 
 /**
  * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
 */
-export function updateSamplerParametersForNPOT(parameters: WebGLSamplerParameters): WebGLSamplerParameters {
+export function updateSamplerParametersForNPOT(parameters: GLSamplerParameters): GLSamplerParameters {
   const newParameters = {...parameters};
   if (parameters[GL.TEXTURE_MIN_FILTER] !== GL.NEAREST) {
     // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_MIN_FILTER to LINEAR`)();

package/src/adapter/converters/texture-formats.ts

@@ -1,8 +1,10 @@
-import type {TextureFormat, DeviceFeature, Device} from '@luma.gl/api';
+import type {TextureFormat, DeviceFeature} from '@luma.gl/api';
 import {decodeTextureFormat} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 
+/* eslint-disable camelcase */
+
 // TEXTURE FEATURES
 
 // Define local device feature strings to optimize minification
@@ -29,7 +31,7 @@ const EXT_SRGB = 'EXT_sRGB'; // https://developer.mozilla.org/en-US/docs/Web/API
 const EXT_TEXTURE_NORM16 = 'EXT_texture_norm16';
 const EXT_FLOAT_WEBGL1 = 'WEBGL_color_buffer_float';
 const EXT_FLOAT_RENDER_WEBGL2 = 'EXT_color_buffer_float';
-const EXT_HALF_FLOAT_WEBGL1 = 'WEBGL_color_buffer_half_float';
+// const EXT_HALF_FLOAT_WEBGL1 = 'EXT_color_buffer_half_float';
 // const DEPTH = 'WEBGL_depth_texture';
 
 const checkExtension = (gl: WebGLRenderingContext, extension: string): boolean =>
@@ -64,7 +66,7 @@ const TEXTURE_FEATURE_CHECKS: Partial<Record<DeviceFeature, (gl: WebGLRenderingC
 };
 
 export function checkTextureFeature(gl: WebGLRenderingContext, feature: DeviceFeature): boolean {
-  return TEXTURE_FEATURE_CHECKS[feature]?.(gl);
+  return TEXTURE_FEATURE_CHECKS[feature]?.(gl) || false;
 }
 
 const checkTextureFeatures = (gl: WebGLRenderingContext, features: DeviceFeature[]): boolean =>
@@ -240,7 +242,7 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   // "depth24unorm-stencil8" feature
   'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
   // "depth32float-stencil8" feature
-  "depth32float-stencil8": {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
+  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
 
   // BC compressed formats: check device.features.has("texture-compression-bc");
 
@@ -380,22 +382,22 @@ export function getTextureFormatSupport(
   if (!info) {
     return {supported: false};
   }
-  let decoded;
-  try {
-    decoded = decodeTextureFormat(format);
-  } catch {}
+  // let decoded;
+  // try {
+  //   decoded = decodeTextureFormat(format);
+  // } catch {}
 
   // Support Check that we have a GL constant
   let supported = isWebGL2(gl) ? info.gl === undefined : info.gl1 === undefined;
   supported = supported && checkTextureFeatures(gl, [info.f]);
 
   // Filtering
-  const filterable = info.filter
-    ? checkTextureFeatures(gl, [info.filter])
-    : decoded && !decoded.signed;
-  const renderable = info.filter
-    ? checkTextureFeatures(gl, [info.render])
-    : decoded && !decoded.signed;
+  // const filterable = info.filter
+  //   ? checkTextureFeatures(gl, [info.filter])
+  //   : decoded && !decoded.signed;
+  // const renderable = info.filter
+  //   ? checkTextureFeatures(gl, [info.render])
+  //   : decoded && !decoded.signed;
 
   return {
     supported,
@@ -520,8 +522,8 @@ export function _checkFloat32ColorAttachment(
   srcFormat = GL.RGBA,
   srcType = GL.UNSIGNED_BYTE
 ) {
-  let texture: WebGLTexture;
-  let framebuffer: WebGLFramebuffer;
+  let texture: WebGLTexture | null = null;
+  let framebuffer: WebGLFramebuffer | null = null;
   try {
     texture = gl.createTexture();
     gl.bindTexture(GL.TEXTURE_2D, texture);

package/src/adapter/converters/vertex-formats.ts

@@ -8,6 +8,7 @@ export function getVertexFormat(type: GL, components: number): VertexFormat {
     case 2: return `${base}x2`;
     case 3: return `${base}x3`;
     case 4: return `${base}x4`;
+    default: throw new Error(String(components));
   }
 }
 

package/src/adapter/device-helpers/device-features.ts

@@ -3,7 +3,6 @@
 // available in an WebGL1 or WebGL2 environment.
 
 import {DeviceFeature} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 import {isOldIE} from './is-old-ie';
 import {getTextureFeatures, _checkFloat32ColorAttachment} from '../converters/texture-formats';
@@ -47,7 +46,12 @@ export function getWebGLFeatures(gl: WebGLRenderingContext): Set<DeviceFeature>
 }
 
 function isFeatureSupported(gl: WebGLRenderingContext, feature: DeviceFeature): boolean {
-  const [webgl1Feature, webgl2Feature] = WEBGL_FEATURES[feature];;
+  const featureInfo = WEBGL_FEATURES[feature];
+  if (!featureInfo) {
+    return false;
+  }
+
+  const [webgl1Feature, webgl2Feature] = featureInfo || [];
 
   // Get extension name from table
   const featureDefinition = isWebGL2(gl) ? webgl2Feature : webgl1Feature;
@@ -100,6 +104,9 @@ export function canCompileGLSLExtension(gl: WebGLRenderingContext, extensionName
   const source = `#extension GL_${extensionName} : ${behavior}\nvoid main(void) {}`;
 
   const shader = gl.createShader(gl.VERTEX_SHADER);
+  if (!shader) {
+    throw new Error('shader');
+  }
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const canCompile = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

package/src/adapter/device-helpers/device-limits.ts

@@ -5,7 +5,7 @@ import {getWebGL2Context} from '../../context/context/webgl-checks';
 
 /** Populate a WebGPU style device limits */
 export function getDeviceLimits(gl: WebGLRenderingContext): DeviceLimits {
-  const gl2: WebGL2RenderingContext = getWebGL2Context(gl);
+  const gl2: WebGL2RenderingContext | null = getWebGL2Context(gl);
   return {
     maxTextureDimension1D: 0, // WebGL does not support 1D textures
     maxTextureDimension2D: gl.getParameter(GL.MAX_TEXTURE_SIZE),

package/src/adapter/device-helpers/get-device-info.ts

@@ -27,23 +27,27 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   };
 }
 
-function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'unknown' {
-  if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
+function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'software' | 'unknown' {
+  if ((/NVIDIA/i.exec(vendor)) || (/NVIDIA/i.exec(renderer))) {
     return 'nvidia';
   }
-  if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
+  if ((/INTEL/i.exec(vendor)) || (/INTEL/i.exec(renderer))) {
     return 'intel';
   }
-  if (vendor.match(/Apple/i) || renderer.match(/Apple/i)) {
+  if ((/Apple/i.exec(vendor)) || (/Apple/i.exec(renderer))) {
     return 'apple';
   }
   if (
-    vendor.match(/AMD/i) ||
-    renderer.match(/AMD/i) ||
-    vendor.match(/ATI/i) ||
-    renderer.match(/ATI/i)
+    (/AMD/i.exec(vendor)) ||
+    (/AMD/i.exec(renderer)) ||
+    (/ATI/i.exec(vendor)) ||
+    (/ATI/i.exec(renderer))
   ) {
     return 'amd';
   }
+  if ((/SwiftShader/i.exec(vendor)) || (/SwiftShader/i.exec(renderer))) {
+    return 'software';
+  }
+  
   return 'unknown';
 }

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

@@ -0,0 +1,37 @@
+// luma.gl, MIT license
+
+/** Information extracted from shader source code */
+export type ShaderInfo = {
+  name: string;
+  language: 'glsl' | 'wgsl';
+  version: number;
+};
+
+/** Extracts information from shader source code */
+export function getShaderInfo(source: string, defaultName?: string): ShaderInfo {
+  return {
+    name: getShaderName(source, defaultName),
+    language: 'glsl',
+    version: getShaderVersion(source)
+  };
+}
+
+/** Extracts GLSLIFY style naming of shaders: `#define SHADER_NAME ...` */
+function getShaderName(shader: string, defaultName: string = 'unnamed'): string {
+  const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
+  const match = SHADER_NAME_REGEXP.exec(shader);
+  return match ? match[1] : defaultName;
+}
+
+/** returns GLSL shader version of given shader string */
+function getShaderVersion(source: string): number {
+  let version = 100;
+  const words = source.match(/[^\s]+/g);
+  if (words && words.length >= 2 && words[0] === '#version') {
+    const v = parseInt(words[1], 10);
+    if (Number.isFinite(v)) {
+      version = v;
+    }
+  }
+  return version;
+}