@luma.gl/webgl 9.0.0-alpha.5 → 9.0.0-alpha.51

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.5",
+  "version": "9.0.0-alpha.51",
   "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.5",
-    "@luma.gl/constants": "9.0.0-alpha.5",
-    "@probe.gl/env": "^3.5.0"
+    "@luma.gl/constants": "9.0.0-alpha.51",
+    "@luma.gl/core": "9.0.0-alpha.51",
+    "@probe.gl/env": "^4.0.2"
+  },
+  "devDependencies": {
+    "@luma.gl/test-utils": "9.0.0-alpha.51"
   },
-  "gitHead": "729cfdd272836270d0f59793b8a36a2a3aea47ca"
+  "gitHead": "368b615bdd46d0006717f004244a942f3d2812e7"
 }

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

@@ -1,9 +1,23 @@
-import {Device, Parameters, CompareFunction, StencilOperation, log, isObjectEmpty} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import type { GLParameters } from '../../types/webgl';
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+import {
+  Device,
+  Parameters,
+  CompareFunction,
+  StencilOperation,
+  log,
+  isObjectEmpty,
+  BlendOperation,
+  BlendFactor
+} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import type {GLBlendEquation, GLBlendFunction, 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 {setGLParameters} from '../../context/parameters/unified-parameter-api';
+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
@@ -13,7 +27,12 @@ import WebGLDevice from '../webgl-device';
  * - Restores parameters
  * - Returns the return value of the supplied function
  */
-export function withDeviceParameters<T = unknown>(device: Device, parameters: Parameters & GLParameters, func: (device?: Device) => T): T {
+export function withDeviceAndGLParameters<T = unknown>(
+  device: Device, 
+  parameters: Parameters,
+  glParameters: GLParameters,
+  func: (device?: Device) => T
+): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
     return func(device);
@@ -23,8 +42,8 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
   // @ts-expect-error
   pushContextState(device.gl);
   try {
-    setParameters(device, parameters);
     setDeviceParameters(device, parameters);
+    setGLParameters(device, glParameters);
     return func(device);
   } finally {
     // @ts-expect-error
@@ -32,11 +51,71 @@ 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
+ * @deprecated use withDeviceParameters instead
+ */
+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);
+  }
+
+  // Wrap in a try-catch to ensure that parameters are restored on exceptions
+  // @ts-expect-error
+  pushContextState(device.gl);
+  try {
+    setGLParameters(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 {
+    // @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 +135,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 +157,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 +177,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);
   }
@@ -119,21 +209,19 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
 
   // COLOR STATE
 
-  // if (parameters.blend) {
-  //   gl.enable(GL.BLEND);
-
-  //   const blend = parameters.blend;
+  if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
+    gl.enable(GL.BLEND);
 
-  //   let colorEquation = (blend && blend.color && blend.color.operation) || 'add';
-  //   let alphaEquation = (blend && blend.alpha && blend.alpha.operation) || 'add';
-  //   gl.blendEquationSeparate(colorEquation, alphaEquation);
+    const colorEquation = convertBlendOperationToEquation('blendColorOperation', parameters.blendColorOperation || 'add');
+    const alphaEquation = convertBlendOperationToEquation('blendAlphaOperation', parameters.blendAlphaOperation || 'add');
+    gl.blendEquationSeparate(colorEquation, alphaEquation);
 
-  //   let colorSrcFactor = (blend && blend.color && blend.color.srcFactor) || 'one';
-  //   let colorDstFactor = (blend && blend.color && blend.color.dstFactor) || 'zero';
-  //   let alphaSrcFactor = (blend && blend.alpha && blend.alpha.srcFactor) || 'one';
-  //   let alphaDstFactor = (blend && blend.alpha && blend.alpha.dstFactor) || 'zero';
-  //   gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
-  // }
+    const colorSrcFactor = convertBlendFactorToFunction('blendColorSrcFactor', parameters.blendColorSrcFactor || 'one');
+    const colorDstFactor = convertBlendFactorToFunction('blendColorDstFactor', parameters.blendColorDstFactor || 'zero');
+    const alphaSrcFactor = convertBlendFactorToFunction('blendAlphaSrcFactor', parameters.blendAlphaSrcFactor || 'one');
+    const alphaDstFactor = convertBlendFactorToFunction('blendAlphaDstFactor', parameters.blendAlphaDstFactor || 'zero');
+    gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+  }
 }
 
 /*
@@ -161,14 +249,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 +275,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,15 +286,30 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-function convertBlendOperationToEquation(parameter: string, value: string): number {
+function convertBlendOperationToEquation(parameter: string, value: BlendOperation): GLBlendEquation {
   return map(parameter, value, {
     'add': GL.FUNC_ADD,
-    'sub': GL.FUNC_SUBTRACT,
+    'subtract': 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
-  });
+  } as Record<BlendOperation, GLBlendEquation>);
+}
+
+function convertBlendFactorToFunction(parameter: string, value: BlendFactor): GLBlendFunction {
+  return map(parameter, value, {
+    'one': GL.ONE,
+    'zero': GL.ZERO,
+    'src-color': GL.SRC_COLOR,
+    'one-minus-src-color': GL.ONE_MINUS_SRC_COLOR,
+    'dst-color': GL.DST_COLOR,
+    'one-minus-dst-color': GL.ONE_MINUS_DST_COLOR,
+    'src-alpha': GL.SRC_ALPHA,
+    'one-minus-src-alpha': GL.ONE_MINUS_SRC_ALPHA,
+    'dst-alpha': GL.DST_ALPHA,
+    'one-minus-dst-alpha': GL.ONE_MINUS_DST_ALPHA,
+  } as Record<BlendFactor, GLBlendFunction>);
 }
 
 function message(parameter: string, value: any): string {

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

@@ -1,15 +1,19 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
 // 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);
@@ -25,7 +29,10 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGL
   }
   if (props.minFilter || props.mipmapFilter) {
     // TODO - arbitrary choice of linear?
-    params[GL.TEXTURE_MIN_FILTER] = convertMinFilterMode(props.minFilter || 'linear', props.mipmapFilter);
+    params[GL.TEXTURE_MIN_FILTER] = convertMinFilterMode(
+      props.minFilter || 'linear',
+      props.mipmapFilter
+    );
   }
   if (props.lodMinClamp !== undefined) {
     params[GL.TEXTURE_MIN_LOD] = props.lodMinClamp;
@@ -33,9 +40,11 @@ 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
@@ -48,30 +57,40 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGL
 /** Convert address more */
 function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'): GL {
   switch (addressMode) {
-    case 'clamp-to-edge': return GL.CLAMP_TO_EDGE;
-    case 'repeat': return GL.REPEAT;
-    case 'mirror-repeat': return GL.MIRRORED_REPEAT;
+    case 'clamp-to-edge':
+      return GL.CLAMP_TO_EDGE;
+    case 'repeat':
+      return GL.REPEAT;
+    case 'mirror-repeat':
+      return GL.MIRRORED_REPEAT;
   }
 }
 
 function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL {
   switch (maxFilter) {
-    case 'nearest': return GL.NEAREST;
-    case 'linear': return GL.LINEAR;
+    case 'nearest':
+      return GL.NEAREST;
+    case 'linear':
+      return GL.LINEAR;
   }
 }
 
-/** 
- * WebGPU has separate min filter and mipmap filter, 
+/**
+ * WebGPU has separate min filter and mipmap filter,
  * WebGL is combined and effectively offers 6 options
  */
-function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'nearest' | 'linear'): GL {
+function convertMinFilterMode(
+  minFilter: 'nearest' | 'linear',
+  mipmapFilter?: 'nearest' | 'linear'
+): GL {
   if (!mipmapFilter) {
     return convertMaxFilterMode(minFilter);
   }
   switch (minFilter) {
-    case 'nearest': return mipmapFilter === 'nearest' ? GL.NEAREST_MIPMAP_NEAREST : GL.NEAREST_MIPMAP_LINEAR;
-    case 'linear': return mipmapFilter === 'nearest' ? GL.LINEAR_MIPMAP_NEAREST : GL.LINEAR_MIPMAP_LINEAR;
+    case 'nearest':
+      return mipmapFilter === 'nearest' ? GL.NEAREST_MIPMAP_NEAREST : GL.NEAREST_MIPMAP_LINEAR;
+    case 'linear':
+      return mipmapFilter === 'nearest' ? GL.LINEAR_MIPMAP_NEAREST : GL.LINEAR_MIPMAP_LINEAR;
   }
 }
 
@@ -82,7 +101,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 +127,13 @@ 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)
@@ -119,50 +144,87 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
 }
 
 /** Convert address more */
-function convertToAddressMode(addressMode: number): 'clamp-to-edge' | 'repeat' | 'mirror-repeat' {
+function convertToAddressMode(
+  addressMode: GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT
+): 'clamp-to-edge' | 'repeat' | 'mirror-repeat' {
   switch (addressMode) {
-    case GL.CLAMP_TO_EDGE: return 'clamp-to-edge';
-    case GL.REPEAT: return 'repeat';
-    case GL.MIRRORED_REPEAT: return 'mirror-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');
   }
 }
 
-function convertToMaxFilterMode(filterMode: number): 'nearest' | 'linear' {
+function convertToMaxFilterMode(filterMode: GL.NEAREST | GL.LINEAR): 'nearest' | 'linear' {
   switch (filterMode) {
-    case GL.NEAREST: return 'nearest';
-    case GL.LINEAR: return 'linear';
+    case GL.NEAREST:
+      return 'nearest';
+    case GL.LINEAR:
+      return 'linear';
+    default:
+      throw new Error('maxfilter');
   }
 }
 
+type GLMinFilter =
+  | GL.NEAREST
+  | GL.LINEAR
+  | GL.NEAREST_MIPMAP_NEAREST
+  | GL.LINEAR_MIPMAP_NEAREST
+  | GL.NEAREST_MIPMAP_LINEAR
+  | GL.LINEAR_MIPMAP_LINEAR;
+
 /** WebGPU has separate min filter and mipmap filter, WebGL is combined */
-function convertToMinFilterMode(filterMode: number): 'nearest' | 'linear' {
+function convertToMinFilterMode(filterMode: GLMinFilter): 'nearest' | 'linear' {
   switch (filterMode) {
     // TODO is this correct?
-    case GL.NEAREST: return 'nearest';
-    case GL.LINEAR: return 'linear';
-    case GL.NEAREST_MIPMAP_NEAREST: return 'nearest';
-    case GL.LINEAR_MIPMAP_NEAREST: return 'linear';
-    case GL.NEAREST_MIPMAP_LINEAR: return 'nearest';
-    case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    case GL.NEAREST:
+      return 'nearest';
+    case GL.LINEAR:
+      return 'linear';
+    case GL.NEAREST_MIPMAP_NEAREST:
+      return 'nearest';
+    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');
   }
 }
 
-function convertToMipmapFilterMode(filterMode: number): 'nearest' | 'linear' {
+function convertToMipmapFilterMode(filterMode: GLMinFilter): 'nearest' | 'linear' {
   switch (filterMode) {
     // TODO is this correct?
-    case GL.NEAREST: return 'nearest';
-    case GL.LINEAR: return 'linear';
-    case GL.NEAREST_MIPMAP_NEAREST: return 'nearest';
-    case GL.LINEAR_MIPMAP_NEAREST: return 'nearest';
-    case GL.NEAREST_MIPMAP_LINEAR: return 'linear';
-    case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    case GL.NEAREST:
+      return 'nearest';
+    case GL.LINEAR:
+      return 'linear';
+    case GL.NEAREST_MIPMAP_NEAREST:
+      return 'nearest';
+    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,44 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+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));
+  }
+}