@luma.gl/webgl 8.5.10 → 8.6.0-alpha.4

package/{src → dist}/webgl-utils/typed-array-utils.js

@@ -1,88 +1,100 @@
 import GL from '@luma.gl/constants';
-
 const ERR_TYPE_DEDUCTION = 'Failed to deduce GL constant from typed array';
-
-// Converts TYPED ARRAYS to corresponding GL constant
-// Used to auto deduce gl parameter types
 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);
   }
 }
+export function getTypedArrayFromGLType(glType, options) {
+  const {
+    clamped = true
+  } = options || {};
 
-// Converts GL constant to corresponding TYPED ARRAY
-// Used to auto deduce gl parameter types
-
-/* eslint-disable complexity */
-export function getTypedArrayFromGLType(glType, {clamped = true} = {}) {
-  // 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');
   }
 }
-/* eslint-enable complexity */
-
-// 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
-export function flipRows({data, width, height, bytesPerPixel = 4, temp}) {
+export function flipRows(options) {
+  const {
+    data,
+    width,
+    height,
+    bytesPerPixel = 4,
+    temp
+  } = options;
   const bytesPerRow = width * bytesPerPixel;
+  const tempBuffer = temp || new Uint8Array(bytesPerRow);
 
-  // make a temp buffer to hold one row
-  temp = 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
-    temp.set(data.subarray(topOffset, topOffset + bytesPerRow));
-    // copy a row from the bottom half to the top
+    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
     data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
-    // copy the copy of the top half row to the bottom half
-    data.set(temp, bottomOffset);
+    data.set(tempBuffer, bottomOffset);
   }
 }
-
-export function scalePixels({data, width, height}) {
+export function scalePixels(options) {
+  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++) {
@@ -90,5 +102,11 @@ export function scalePixels({data, width, height}) {
       }
     }
   }
-  return {data: newData, width: newWidth, height: newHeight};
+
+  return {
+    data: newData,
+    width: newWidth,
+    height: newHeight
+  };
 }
+//# sourceMappingURL=typed-array-utils.js.map

package/dist/webgl-utils/typed-array-utils.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "8.5.10",
+  "version": "8.6.0-alpha.4",
   "description": "WebGL2 Classes",
   "license": "MIT",
   "publishConfig": {
@@ -16,9 +16,9 @@
     "animation",
     "3d"
   ],
-  "types": "src/index.d.ts",
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
+  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "files": [
     "src",
     "dist",
@@ -30,14 +30,14 @@
     "gl/wrap": false
   },
   "scripts": {
-    "pre-build": "npm run build-bundle && npm run build-bundle -- --env.dev",
+    "pre-build": "npm run build-bundle",
     "build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "8.5.10",
-    "@luma.gl/gltools": "8.5.10",
-    "probe.gl": "^3.4.0"
+    "@luma.gl/api": "8.6.0-alpha.4",
+    "@luma.gl/constants": "8.6.0-alpha.4",
+    "@probe.gl/env": "^3.5.0"
   },
-  "gitHead": "830155841c1e574d36061c2d71880a28d68b3cb3"
+  "gitHead": "c1c84f1bcaa6e6ff4f1e96f5d294baf8ce39846c"
 }

package/src/_deprecated/context-api.ts

@@ -0,0 +1,140 @@
+// luma.gl, MIT license
+// LEGACY luma.gl v8 API for WebGLRendering context
+// DEPRECATED API - may be removed in luma.gl v9 or v10.
+
+/* eslint-disable quotes */
+import GL from '@luma.gl/constants';
+import {WebGLDevice, WebGLDeviceProps} from '@luma.gl/webgl';
+import {FEATURES} from './features';
+
+export type GLContextOptions = WebGLDeviceProps & {
+  throwOnError?: boolean; // If set to false, return `null` if context creation fails.
+};
+
+/** @deprecated Use `new WebGLDevice()` or `luma.createDevice()` */
+export function createGLContext(options?: GLContextOptions): WebGLRenderingContext | null {
+  const webglDevice = new WebGLDevice(options);
+  // Note: OK to return the context, it holds on to the device
+  return webglDevice.gl;
+}
+
+/** @deprecated Use `WebGLDevice.attach()` */
+export function instrumentGLContext(
+  gl: WebGLRenderingContext | WebGL2RenderingContext,
+  options?: GLContextOptions
+): WebGLRenderingContext {
+  const webglDevice = WebGLDevice.attach(gl, options);
+  return webglDevice.gl;
+}
+
+/**
+ * Resize the canvas' drawing buffer.
+ *
+ * Can match the canvas CSS size, and optionally also consider devicePixelRatio
+ * Can be called every frame
+ *
+ * Regardless of size, the drawing buffer will always be scaled to the viewport, but
+ * for best visual results, usually set to either:
+ *  canvas CSS width x canvas CSS height
+ *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
+ * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+ *
+ * resizeGLContext(gl, {width, height, useDevicePixels})
+ * @deprecated Use WebGLDevice.resize()
+ */
+export function resizeGLContext(
+  gl: WebGLRenderingContext,
+  options?: {
+    width?: number;
+    height?: number;
+    useDevicePixels?: boolean | number;
+  }
+) {
+  const webglDevice = WebGLDevice.attach(gl);
+  webglDevice.resize(options);
+}
+
+/** 
+ * Check one or more features
+ * @deprecated Use `WebGLDevice.features.has()`
+*/
+export function hasFeatures(gl: WebGLRenderingContext, features: string | string[]): boolean {
+  const webglDevice = WebGLDevice.attach(gl);
+  const normalizedFeatures = Array.isArray(features) ? features : [features];
+  const deviceFeatures = normalizedFeatures.map(feature => getDeviceFeature(feature));
+  return deviceFeatures.every((feature) => webglDevice.webglFeatures.has(feature));
+}
+
+function getDeviceFeature(feature) {
+  return feature.toLowerCase().replace('webgl-', '').replace('-', '_');
+}
+
+/**
+ * Check one feature
+ * @deprecated Use `WebGLDevice.features`
+ */
+export function hasFeature(gl: WebGLRenderingContext, feature: string): boolean {
+  return hasFeatures(gl, feature);
+}
+
+/**
+ * Return a map of supported features
+ * @deprecated Use `WebGLDevice.features`
+ */
+export function getFeatures(gl: WebGLRenderingContext): Record<string, boolean>  {
+  const webglDevice = WebGLDevice.attach(gl);
+  const featureMap: Record<string, boolean> = {};
+  for (const feature in FEATURES) {
+    featureMap[feature] = webglDevice.webglFeatures.has(feature);
+  }
+  return featureMap;
+}
+
+/**
+ * Provides strings identifying the GPU vendor and driver.
+ * https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/
+ *
+ * @deprecated Use `WebGLDevice.info`
+ */
+export function getContextDebugInfo(gl: WebGLRenderingContext): {
+  vendor: string;
+  renderer: string;
+  vendorMasked: string;
+  rendererMasked: string;
+  version: string;
+} {
+  const webglDevice = WebGLDevice.attach(gl);
+  const info = webglDevice.info;
+  return {
+    ...webglDevice.info,
+    vendorMasked: webglDevice.info.vendor,
+    rendererMasked: webglDevice.info.renderer
+  };
+}
+
+/** @deprecated Use `WebGLDevice.info` */
+export function getGLContextInfo(gl) {
+  const info = getContextDebugInfo(gl);
+  return {
+    [GL.UNMASKED_VENDOR_WEBGL]: info.vendor,
+    [GL.UNMASKED_RENDERER_WEBGL]: info.renderer,
+    [GL.VENDOR]: info.vendorMasked,
+    [GL.RENDERER]: info.rendererMasked,
+    [GL.VERSION]: info.version,
+  };
+}
+
+/** @deprecated Use `WebGLDevice.info` and `WebGLDevice.limits` */
+export function getContextInfo(gl) {
+  return {
+    ...getContextDebugInfo(gl),
+    ...getContextLimits(gl),
+    info: getGLContextInfo(gl),
+  };
+}
+
+/** @deprecated Use `WebGLDevice.limits` */
+export function getContextLimits(gl) {
+  const webglDevice = WebGLDevice.attach(gl);
+  return {limits: webglDevice.webglLimits};
+}

package/src/_deprecated/features.ts

@@ -0,0 +1,159 @@
+// Feature detection for WebGL
+// Provides a function that enables simple checking of which WebGL features are
+// available in an WebGL1 or WebGL2 environment.
+
+import GL from '@luma.gl/constants';
+import {isWebGL2} from '@luma.gl/webgl';
+import {assert} from '@luma.gl/api';
+
+// TODO - this should be the default export, test cases need updating
+export const FEATURES = {
+  WEBGL2: 'WEBGL2',
+
+  // API SUPPORT
+  VERTEX_ARRAY_OBJECT: 'VERTEX_ARRAY_OBJECT',
+  TIMER_QUERY: 'TIMER_QUERY',
+  INSTANCED_RENDERING: 'INSTANCED_RENDERING',
+  MULTIPLE_RENDER_TARGETS: 'MULTIPLE_RENDER_TARGETS',
+
+  // FEATURES
+  ELEMENT_INDEX_UINT32: 'ELEMENT_INDEX_UINT32',
+
+  // BLENDING
+  BLEND_EQUATION_MINMAX: 'BLEND_EQUATION_MINMAX',
+  FLOAT_BLEND: 'FLOAT_BLEND',
+
+  // TEXTURES: '// TEXTURES', RENDERBUFFERS
+  COLOR_ENCODING_SRGB: 'COLOR_ENCODING_SRGB',
+
+  // TEXTURES
+  TEXTURE_DEPTH: 'TEXTURE_DEPTH',
+  TEXTURE_FLOAT: 'TEXTURE_FLOAT',
+  TEXTURE_HALF_FLOAT: 'TEXTURE_HALF_FLOAT',
+
+  TEXTURE_FILTER_LINEAR_FLOAT: 'TEXTURE_FILTER_LINEAR_FLOAT',
+  TEXTURE_FILTER_LINEAR_HALF_FLOAT: 'TEXTURE_FILTER_LINEAR_HALF_FLOAT',
+  TEXTURE_FILTER_ANISOTROPIC: 'TEXTURE_FILTER_ANISOTROPIC',
+
+  // FRAMEBUFFERS: '// FRAMEBUFFERS', TEXTURES AND RENDERBUFFERS
+  COLOR_ATTACHMENT_RGBA32F: 'COLOR_ATTACHMENT_RGBA32F',
+  COLOR_ATTACHMENT_FLOAT: 'COLOR_ATTACHMENT_FLOAT',
+  COLOR_ATTACHMENT_HALF_FLOAT: 'COLOR_ATTACHMENT_HALF_FLOAT',
+
+  // GLSL extensions
+  GLSL_FRAG_DATA: 'GLSL_FRAG_DATA',
+  GLSL_FRAG_DEPTH: 'GLSL_FRAG_DEPTH',
+  GLSL_DERIVATIVES: 'GLSL_DERIVATIVES',
+  GLSL_TEXTURE_LOD: 'GLSL_TEXTURE_LOD'
+};
+
+/** Extract all WebGL features */
+export function getWebGLFeatures(gl: WebGLRenderingContext): Set<string> {
+  // Enable EXT_float_blend first: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend
+  gl.getExtension('EXT_color_buffer_float');
+  gl.getExtension('WEBGL_color_buffer_float');
+  gl.getExtension('EXT_float_blend');
+
+  const features = new Set<string>();
+  for (const feature in WEBGL_FEATURES) {
+    if (isFeatureSupported(gl, feature)) {
+      features.add(feature);
+    }
+  }
+  return features;
+}
+
+function isFeatureSupported(gl: WebGLRenderingContext, cap: string): boolean {
+  const feature = WEBGL_FEATURES[cap];
+  assert(feature, cap);
+
+  const [webgl1Feature, webgl2Feature] = feature;
+
+  // Get extension name from table
+  const featureDefinition = isWebGL2(gl) ? webgl2Feature : webgl1Feature;
+
+  if (cap === FEATURES.COLOR_ATTACHMENT_RGBA32F && !isWebGL2(gl)) {
+    return checkFloat32ColorAttachment(gl);
+  }
+
+  // Check if the value is dependent on checking one or more extensions
+  if (typeof featureDefinition === 'string') {
+    return Boolean(gl.getExtension(featureDefinition));
+  }
+
+  return featureDefinition;
+}
+
+
+// function to test if Float 32 bit format texture can be bound as color attachment
+function checkFloat32ColorAttachment(gl: WebGLRenderingContext) {
+  let texture: WebGLTexture;
+  let framebuffer: WebGLFramebuffer;
+  try {
+    const texture = gl.createTexture();
+    gl.bindTexture(GL.TEXTURE_2D, texture);
+
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const width = 1;
+    const height = 1;
+    const border = 0;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    const pixel = new Uint8Array([0, 0, 255, 255]);  // opaque blue
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  width, height, border, srcFormat, srcType,
+                  pixel);
+
+    const framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture, 0);
+    const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER) === GL.FRAMEBUFFER_COMPLETE;
+    return status;
+  } finally {
+    gl.deleteTexture(texture);
+    gl.deleteFramebuffer(framebuffer);
+  }
+}
+
+// Defines luma.gl "feature" names and semantics
+// Format: 'feature-name: [WebGL1 support, WebGL2 support] / [WebGL1 and WebGL2 support]', when support is 'string' it is the name of the extension
+const WEBGL_FEATURES: Record<string, [boolean | string, boolean | string]> = {
+  [FEATURES.WEBGL2]: [false, true],
+
+  // API SUPPORT
+  [FEATURES.VERTEX_ARRAY_OBJECT]: ['OES_vertex_array_object', true],
+  [FEATURES.TIMER_QUERY]: ['EXT_disjoint_timer_query', 'EXT_disjoint_timer_query_webgl2'],
+  [FEATURES.INSTANCED_RENDERING]: ['ANGLE_instanced_arrays', true],
+  [FEATURES.MULTIPLE_RENDER_TARGETS]: ['WEBGL_draw_buffers', true],
+
+  // FEATURES
+  [FEATURES.ELEMENT_INDEX_UINT32]: ['OES_element_index_uint', true],
+
+  // BLENDING
+  [FEATURES.BLEND_EQUATION_MINMAX]: ['EXT_blend_minmax', true],
+  [FEATURES.FLOAT_BLEND]: ['EXT_float_blend', 'EXT_float_blend'],
+
+  // TEXTURES, RENDERBUFFERS
+  [FEATURES.COLOR_ENCODING_SRGB]: ['EXT_sRGB', true],
+
+  // TEXTURES
+  [FEATURES.TEXTURE_DEPTH]: ['WEBGL_depth_texture', true],
+  [FEATURES.TEXTURE_FLOAT]: ['OES_texture_float', true],
+  [FEATURES.TEXTURE_HALF_FLOAT]: ['OES_texture_half_float', true],
+
+  [FEATURES.TEXTURE_FILTER_LINEAR_FLOAT]: ['OES_texture_float_linear', 'OES_texture_float_linear'],
+  [FEATURES.TEXTURE_FILTER_LINEAR_HALF_FLOAT]: ['OES_texture_half_float_linear', 'OES_texture_half_float_linear'],
+  [FEATURES.TEXTURE_FILTER_ANISOTROPIC]: ['EXT_texture_filter_anisotropic', 'EXT_texture_filter_anisotropic'],
+
+  // FRAMEBUFFERS, TEXTURES AND RENDERBUFFERS
+  [FEATURES.COLOR_ATTACHMENT_RGBA32F]: [false, 'EXT_color_buffer_float'], // Note override check
+  [FEATURES.COLOR_ATTACHMENT_FLOAT]: [false, 'EXT_color_buffer_float'],
+  [FEATURES.COLOR_ATTACHMENT_HALF_FLOAT]: ['EXT_color_buffer_half_float', 'EXT_color_buffer_half_float'],
+
+  // GLSL extensions
+  [FEATURES.GLSL_FRAG_DATA]: ['WEBGL_draw_buffers', true],
+  [FEATURES.GLSL_FRAG_DEPTH]: ['EXT_frag_depth', true],
+  [FEATURES.GLSL_DERIVATIVES]: ['OES_standard_derivatives', true],
+  [FEATURES.GLSL_TEXTURE_LOD]: ['EXT_shader_texture_lod', true]
+};

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

@@ -0,0 +1,182 @@
+import {Device, Parameters, CompareFunction, StencilOperation, log} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {WebGLDevice} from '@luma.gl/webgl';
+
+/** Set WebGPU Style Parameters */
+export function setDeviceParameters(device: Device, parameters: Parameters) {
+  const webglDevice = WebGLDevice.attach(device);
+  const {gl, gl2} = webglDevice;
+
+  // RASTERIZATION SETTINGS
+  if (parameters.cullMode) {
+    switch (parameters.cullMode) {
+      case 'none':
+        gl.disable(GL.CULL_FACE);
+        break;
+      case 'front':
+        gl.enable(GL.CULL_FACE);
+        gl.cullFace(GL.FRONT);
+        break;
+      case 'back':
+        gl.enable(GL.CULL_FACE);
+        gl.cullFace(GL.BACK);
+        break;
+    }
+  }
+
+  if (parameters.frontFace) {
+    gl.frontFace(map('frontFace', parameters.frontFace, {
+      ccw: GL.CCW,
+      cw: GL.CW
+    }));
+  }
+
+  if (parameters.depthBias !== undefined) {
+    gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
+  }
+
+  // depthBiasSlopeScale: {
+  //   // Handled by depthBias
+  // },
+
+  // DEPTH STENCIL
+
+  if (parameters.depthWriteEnabled !== undefined) {
+    gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
+  }
+
+ if (parameters.depthCompare) {
+    parameters.depthCompare !== 'always' ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST),
+    gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
+  }
+
+  if (parameters.stencilWriteMask) {
+    const mask = parameters.stencilWriteMask;
+    gl.stencilMaskSeparate(GL.FRONT, mask);
+    gl.stencilMaskSeparate(GL.BACK, mask);
+  }
+
+  if (parameters.stencilReadMask) {
+    // stencilReadMask is handle inside stencil***Compare.
+    log.warn('stencilReadMask not supported under WebGL');
+  }
+
+  if (parameters.stencilCompare) {
+    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),
+    gl.stencilFuncSeparate(GL.FRONT, glValue, 0, mask);
+    gl.stencilFuncSeparate(GL.BACK, glValue, 0, mask);
+  }
+
+  if (parameters.stencilPassOperation) {
+    const dppass = convertStencilOperation('stencilPassOperation', parameters.stencilPassOperation);
+    const sfail = convertStencilOperation('stencilFailOperation', parameters.stencilFailOperation);
+    const dpfail = convertStencilOperation('stencilDepthFailOperation', parameters.stencilDepthFailOperation);
+    gl.stencilOpSeparate(GL.FRONT, sfail, dpfail, dppass);
+    gl.stencilOpSeparate(GL.BACK, sfail, dpfail, dppass);
+  }
+
+  // stencilDepthFailOperation() {
+  //   // handled by stencilPassOperation
+  // },
+
+  // stencilFailOperation() {
+  //   // handled by stencilPassOperation
+  // },
+
+  // COLOR STATE
+
+  // if (parameters.blend) {
+  //   gl.enable(GL.BLEND);
+
+  //   const blend = parameters.blend;
+
+  //   let colorEquation = (blend && blend.color && blend.color.operation) || 'add';
+  //   let alphaEquation = (blend && blend.alpha && blend.alpha.operation) || '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);
+  // }
+}
+
+/*
+      rasterizationState: {
+        cullMode: "back",
+      },
+
+      depthStencilState: {
+        depthWriteEnabled: true,
+        depthCompare: "less",
+        format: "depth24plus-stencil8",
+      },
+
+      colorStates: [
+        {
+          format: "bgra8unorm",
+          // colorBlend.srcFactor = wgpu::BlendFactor::SrcAlpha;
+          // colorBlend.dstFactor = wgpu::BlendFactor::OneMinusSrcAlpha;
+          // alphaBlend.srcFactor = wgpu::BlendFactor::SrcAlpha;
+          // alphaBlend.dstFactor = wgpu::BlendFactor::OneMinusSrcAlpha;
+        },
+      ],
+    });
+*/
+
+
+export function convertCompareFunction(parameter, value: CompareFunction): number {
+  return map(parameter, value, {
+    'never': GL.NEVER,
+    'less': GL.LESS,
+    'equal': GL.EQUAL,
+    'less-equal': GL.LEQUAL,
+    'greater': GL.GREATER,
+    'not-equal': GL.NOTEQUAL,
+    'greater-equal': GL.GEQUAL,
+    'always': GL.ALWAYS
+  });
+}
+
+function convertStencilOperation(parameter, value: StencilOperation): number {
+  return map(parameter, value, {
+    '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,
+    'decrement-wrap': GL.DECR_WRAP
+  });
+}
+
+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 message(parameter, value) {
+  return `Illegal parameter ${value} for ${parameter}`;
+}
+
+function map(parameter, value, valueMap) {
+  if (!(value in valueMap)) {
+    throw new Error(message(parameter, value));
+  }
+  return valueMap[value];
+}
+
+function mapBoolean(parameter, value) {
+  return value;
+}