@luma.gl/webgl 9.0.0-beta.1 → 9.0.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-beta.1",
-  "description": "WebGL2 adapter for the luma.gl API",
+  "version": "9.0.0-beta.10",
+  "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -34,22 +34,17 @@
     "README.md"
   ],
   "sideEffects": false,
-  "browser": {
-    "gl": false,
-    "gl/wrap": false
-  },
   "scripts": {
-    "build-bundle": "ocular-bundle ./src/index.ts",
-    "pre-build": "npm run build-bundle && npm run build-bundle -- --env=dev"
+    "build-minified-bundle": "ocular-bundle ./bundle.ts --output=dist/dist.min.js",
+    "build-dev-bundle": "ocular-bundle ./bundle.ts --output=dist/dist.dev.js --env=dev",
+    "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
+  },
+  "peerDependencies": {
+    "@luma.gl/core": "^9.0.0-beta"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-beta.1",
-    "@luma.gl/core": "9.0.0-beta.1",
+    "@luma.gl/constants": "9.0.0-beta.10",
     "@probe.gl/env": "^4.0.2"
   },
-  "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-beta.1"
-  },
-  "gitHead": "5fb42f651e80825336a372ca5a66de7d55611ddf"
+  "gitHead": "1b36500a878e1b365425826750320dde7d6929bb"
 }

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {
@@ -28,7 +29,7 @@ import {WebGLDevice} from '../webgl-device';
  * - Returns the return value of the supplied function
  */
 export function withDeviceAndGLParameters<T = unknown>(
-  device: Device, 
+  device: Device,
   parameters: Parameters,
   glParameters: GLParameters,
   func: (device?: Device) => T
@@ -39,15 +40,14 @@ export function withDeviceAndGLParameters<T = unknown>(
   }
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
-  // @ts-expect-error
-  pushContextState(device.gl);
+  const webglDevice = device as WebGLDevice;
+  pushContextState(webglDevice.gl);
   try {
     setDeviceParameters(device, parameters);
-    setGLParameters(device, glParameters);
+    setGLParameters(webglDevice.gl, glParameters);
     return func(device);
   } finally {
-    // @ts-expect-error
-    popContextState(device.gl);
+    popContextState(webglDevice.gl);
   }
 }
 
@@ -71,14 +71,13 @@ export function withGLParameters<T = unknown>(
   }
 
   // Wrap in a try-catch to ensure that parameters are restored on exceptions
-  // @ts-expect-error
-  pushContextState(device.gl);
+  const webglDevice = device as WebGLDevice;
+  pushContextState(webglDevice.gl);
   try {
-    setGLParameters(device, parameters);
+    setGLParameters(webglDevice.gl, parameters);
     return func(device);
   } finally {
-    // @ts-expect-error
-    popContextState(device.gl);
+    popContextState(webglDevice.gl);
   }
 }
 
@@ -114,7 +113,7 @@ export function withDeviceParameters<T = unknown>(
 
 /** Set WebGPU Style Parameters */
 export function setDeviceParameters(device: Device, parameters: Parameters) {
-  const webglDevice = WebGLDevice.attach(device);
+  const webglDevice = device as WebGLDevice;
   const {gl} = webglDevice;
 
   // RASTERIZATION SETTINGS
@@ -143,6 +142,13 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     );
   }
 
+  if (parameters.unclippedDepth) {
+    if (device.features.has('depth-clip-control')) {
+      // EXT_depth_clamp
+      gl.enable(GL.DEPTH_CLAMP_EXT);
+    }
+  }
+
   if (parameters.depthBias !== undefined) {
     gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
   }
@@ -151,6 +157,66 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   //   // Handled by depthBias
   // },
 
+  // WEBGL EXTENSIONS
+
+  if (device.features.has('provoking-vertex-webgl')) {
+    const extensions = webglDevice.getExtension('WEBGL_provoking_vertex');
+    const ext = extensions.WEBGL_provoking_vertex;
+
+    if (parameters.provokingVertex) {
+      const vertex = map('provokingVertex', parameters.provokingVertex, {
+        first: GL.FIRST_VERTEX_CONVENTION_WEBGL,
+        last: GL.LAST_VERTEX_CONVENTION_WEBGL
+      });
+      ext?.provokingVertexWEBGL(vertex);
+    }
+  }
+
+  if (device.features.has('polygon-mode-webgl')) {
+    const extensions = webglDevice.getExtension('WEBGL_polygon_mode');
+    const ext = extensions.WEBGL_polygon_mode;
+
+    if (parameters.polygonMode) {
+      const mode = map('polygonMode', parameters.provokingVertex, {
+        fill: GL.FILL_WEBGL,
+        lint: GL.LINE_WEBGL
+      });
+      ext?.polygonModeWEBGL(GL.FRONT, mode);
+      ext?.polygonModeWEBGL(GL.BACK, mode);
+    }
+
+    if (parameters.polygonOffsetLine) {
+      gl.enable(GL.POLYGON_OFFSET_LINE_WEBGL);
+    }
+  }
+
+  if (device.features.has('shader-clip-cull-distance-webgl')) {
+    if (parameters.clipDistance0) {
+      gl.enable(GL.CLIP_DISTANCE0_WEBGL);
+    }
+    if (parameters.clipDistance1) {
+      gl.enable(GL.CLIP_DISTANCE1_WEBGL);
+    }
+    if (parameters.clipDistance2) {
+      gl.enable(GL.CLIP_DISTANCE2_WEBGL);
+    }
+    if (parameters.clipDistance3) {
+      gl.enable(GL.CLIP_DISTANCE3_WEBGL);
+    }
+    if (parameters.clipDistance4) {
+      gl.enable(GL.CLIP_DISTANCE4_WEBGL);
+    }
+    if (parameters.clipDistance5) {
+      gl.enable(GL.CLIP_DISTANCE5_WEBGL);
+    }
+    if (parameters.clipDistance6) {
+      gl.enable(GL.CLIP_DISTANCE6_WEBGL);
+    }
+    if (parameters.clipDistance7) {
+      gl.enable(GL.CLIP_DISTANCE7_WEBGL);
+    }
+  }
+
   // DEPTH STENCIL
 
   if (parameters.depthWriteEnabled !== undefined) {
@@ -212,14 +278,32 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
     gl.enable(GL.BLEND);
 
-    const colorEquation = convertBlendOperationToEquation('blendColorOperation', parameters.blendColorOperation || 'add');
-    const alphaEquation = convertBlendOperationToEquation('blendAlphaOperation', parameters.blendAlphaOperation || 'add');
+    const colorEquation = convertBlendOperationToEquation(
+      'blendColorOperation',
+      parameters.blendColorOperation || 'add'
+    );
+    const alphaEquation = convertBlendOperationToEquation(
+      'blendAlphaOperation',
+      parameters.blendAlphaOperation || 'add'
+    );
     gl.blendEquationSeparate(colorEquation, alphaEquation);
 
-    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');
+    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);
   }
 }
@@ -286,21 +370,23 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-function convertBlendOperationToEquation(parameter: string, value: BlendOperation): GLBlendEquation {
+function convertBlendOperationToEquation(
+  parameter: string,
+  value: BlendOperation
+): GLBlendEquation {
   return map(parameter, value, {
-    'add': GL.FUNC_ADD,
-    'subtract': GL.FUNC_SUBTRACT,
+    add: GL.FUNC_ADD,
+    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
+    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,
+    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,
@@ -308,7 +394,7 @@ function convertBlendFactorToFunction(parameter: string, value: BlendFactor): GL
     '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,
+    'one-minus-dst-alpha': GL.ONE_MINUS_DST_ALPHA
   } as Record<BlendFactor, GLBlendFunction>);
 }
 

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // SAMPLER FILTERS
@@ -52,27 +53,12 @@ export function convertSamplerParametersToWebGL(props: SamplerProps): GLSamplerP
   return params;
 }
 
-/**
- * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
- */
-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`)();
-    newParameters[GL.TEXTURE_MIN_FILTER] = GL.LINEAR;
-  }
-  // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_WRAP_S to CLAMP_TO_EDGE`)();
-  newParameters[GL.TEXTURE_WRAP_S] = GL.CLAMP_TO_EDGE;
-  newParameters[GL.TEXTURE_WRAP_T] = GL.CLAMP_TO_EDGE;
-  return newParameters;
-}
-
 // HELPERS
 
 /** Convert address more */
-function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'): GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT {
+function convertAddressMode(
+  addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'
+): GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT {
   switch (addressMode) {
     case 'clamp-to-edge':
       return GL.CLAMP_TO_EDGE;
@@ -99,7 +85,13 @@ function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL.NEAREST | GL.
 function convertMinFilterMode(
   minFilter: 'nearest' | 'linear',
   mipmapFilter?: 'nearest' | 'linear'
-): GL.NEAREST | GL.LINEAR | GL.NEAREST_MIPMAP_NEAREST | GL.LINEAR_MIPMAP_NEAREST | GL.NEAREST_MIPMAP_LINEAR | GL.LINEAR_MIPMAP_LINEAR {
+):
+  | GL.NEAREST
+  | GL.LINEAR
+  | GL.NEAREST_MIPMAP_NEAREST
+  | GL.LINEAR_MIPMAP_NEAREST
+  | GL.NEAREST_MIPMAP_LINEAR
+  | GL.LINEAR_MIPMAP_LINEAR {
   if (!mipmapFilter) {
     return convertMaxFilterMode(minFilter);
   }

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

@@ -1,44 +1,69 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // 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 {
+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));
+    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));
+    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 {
+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));
+    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));
   }
 }