@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.31

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.3",
+  "version": "9.0.0-alpha.31",
   "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,17 @@
     "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.3",
-    "@luma.gl/constants": "9.0.0-alpha.3",
-    "@probe.gl/env": "^3.5.0"
+    "@luma.gl/constants": "9.0.0-alpha.31",
+    "@luma.gl/core": "9.0.0-alpha.31",
+    "@probe.gl/env": "^4.0.2"
+  },
+  "devDependencies": {
+    "@luma.gl/test-utils": "9.0.0-alpha.31"
   },
-  "gitHead": "3f259d0de774c6b98dd5ded61e64a0bd9f58b61e"
+  "gitHead": "9f22c8a7f5a03abb1bea5530b77c083b8f553569"
 }

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

@@ -1,9 +1,18 @@
-import {Device, Parameters, CompareFunction, StencilOperation, log, isObjectEmpty} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import type { GLParameters } from '../../types/webgl';
+import {
+  Device,
+  Parameters,
+  CompareFunction,
+  StencilOperation,
+  log,
+  isObjectEmpty
+} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import type {GLParameters} from '@luma.gl/constants';
 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 +21,13 @@ 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,7 +38,6 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
   pushContextState(device.gl);
   try {
     setParameters(device, parameters);
-    setDeviceParameters(device, parameters);
     return func(device);
   } finally {
     // @ts-expect-error
@@ -32,11 +45,40 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
   }
 }
 
+/**
+ * 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 {
+    // @ts-expect-error
+    popContextState(device.gl);
+  }
+}
 
 /** 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) {
@@ -56,10 +98,12 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   }
 
   if (parameters.frontFace) {
-    gl.frontFace(map('frontFace', parameters.frontFace, {
-      ccw: GL.CCW,
-      cw: GL.CW
-    }));
+    gl.frontFace(
+      map('frontFace', parameters.frontFace, {
+        ccw: GL.CCW,
+        cw: GL.CW
+      })
+    );
   }
 
   if (parameters.depthBias !== undefined) {
@@ -76,7 +120,7 @@ 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));
   }
@@ -96,15 +140,24 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     const mask = parameters.stencilReadMask || 0xffffffff;
     const glValue = convertCompareFunction('depthCompare', parameters.stencilCompare);
     // TODO - ensure back doesn't overwrite
-    parameters.stencilCompare !== 'always' ? gl.enable(GL.STENCIL_TEST) : gl.disable(GL.STENCIL_TEST);
+    parameters.stencilCompare !== 'always'
+      ? gl.enable(GL.STENCIL_TEST)
+      : gl.disable(GL.STENCIL_TEST);
     gl.stencilFuncSeparate(GL.FRONT, glValue, 0, mask);
     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);
+    const dpfail = convertStencilOperation(
+      'stencilDepthFailOperation',
+      parameters.stencilDepthFailOperation
+    );
     gl.stencilOpSeparate(GL.FRONT, sfail, dpfail, dppass);
     gl.stencilOpSeparate(GL.BACK, sfail, dpfail, dppass);
   }
@@ -161,14 +214,14 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
 
 export function convertCompareFunction(parameter: string, value: CompareFunction): GL {
   return map(parameter, value, {
-    'never': GL.NEVER,
-    'less': GL.LESS,
-    'equal': GL.EQUAL,
+    never: GL.NEVER,
+    less: GL.LESS,
+    equal: GL.EQUAL,
     'less-equal': GL.LEQUAL,
-    'greater': GL.GREATER,
+    greater: GL.GREATER,
     'not-equal': GL.NOTEQUAL,
     'greater-equal': GL.GEQUAL,
-    'always': GL.ALWAYS
+    always: GL.ALWAYS
   });
 }
 
@@ -187,10 +240,10 @@ export function convertToCompareFunction(parameter: string, value: GL): CompareF
 
 function convertStencilOperation(parameter: string, value: StencilOperation): GL {
   return map(parameter, value, {
-    'keep': GL.KEEP,
-    'zero': GL.ZERO,
-    'replace': GL.REPLACE,
-    'invert': GL.INVERT,
+    keep: GL.KEEP,
+    zero: GL.ZERO,
+    replace: GL.REPLACE,
+    invert: GL.INVERT,
     'increment-clamp': GL.INCR,
     'decrement-clamp': GL.DECR,
     'increment-wrap': GL.INCR_WRAP,
@@ -198,16 +251,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 +273,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/sampler-parameters.ts

@@ -1,15 +1,16 @@
 // SAMPLER FILTERS
-import {SamplerParameters} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import {WebGLSamplerParameters} from '../../types/webgl';
+import {SamplerParameters} from '@luma.gl/core';
+import {GL, GLSamplerParameters} from '@luma.gl/constants';
 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 +34,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 +85,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 +111,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 +130,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 +138,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 +152,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 +165,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/shader-formats.ts

@@ -0,0 +1,41 @@
+import {GL} from '@luma.gl/constants';
+import {ShaderAttributeType, ShaderDataType} from '@luma.gl/core';
+
+/** Get shader attribute type from GL constants */
+export function getShaderAttributeTypeFromGL(type: GL, components: 1 | 2 | 3 | 4): ShaderAttributeType {
+  const dataType = getShaderDataTypeFromGL(type);
+  switch (components) {
+    case 1: return dataType;
+    case 2: return `vec2<${dataType}>`;
+    case 3: return `vec2<${dataType}>`;
+    case 4: return `vec2<${dataType}>`;
+    default: throw new Error(String(components));
+  }
+}
+
+/** Get shader data type from GL constants */
+export function getShaderDataTypeFromGL(type: GL): ShaderDataType {
+  switch (type) {
+    case GL.INT: return 'i32';
+    case GL.UNSIGNED_INT: return 'u32';
+    case GL.SHORT: return 'i32';
+    case GL.UNSIGNED_SHORT: return 'u32';
+    case GL.BYTE: return 'i32';
+    case GL.UNSIGNED_BYTE: return 'u32';
+    case GL.FLOAT: return 'f32';
+    case GL.HALF_FLOAT: return 'f16';
+    default: throw new Error(String(type));
+  }
+}
+
+/** GetGL constant from shader data type */
+export function getGLFromShaderDataType(type: ShaderDataType): GL.INT | GL.UNSIGNED_INT | GL.FLOAT | GL.HALF_FLOAT {
+  switch (type) {
+    // TODO
+    case 'i32': return GL.INT;
+    case 'u32': return GL.UNSIGNED_INT;
+    case 'f32': return GL.FLOAT;
+    case 'f16': return GL.HALF_FLOAT;
+    default: throw new Error(String(type));
+  }
+}