@luma.gl/webgl 9.0.0-beta.3 → 9.0.0-beta.5

package/dist/adapter/converters/device-parameters.js

@@ -1,183 +1,265 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
 import { log, isObjectEmpty } from '@luma.gl/core';
-import { pushContextState, popContextState } from "../../context/state-tracker/track-context-state.js";
-import { setGLParameters } from "../../context/parameters/unified-parameter-api.js";
-import { WebGLDevice } from "../webgl-device.js";
+import { GL } from '@luma.gl/constants';
+import { pushContextState, popContextState } from '../../context/state-tracker/track-context-state';
+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
+ * - 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 withDeviceAndGLParameters(device, parameters, glParameters, func) {
-  if (isObjectEmpty(parameters)) {
-    return func(device);
-  }
-  pushContextState(device.gl);
-  try {
-    setDeviceParameters(device, parameters);
-    setGLParameters(device, glParameters);
-    return func(device);
-  } finally {
-    popContextState(device.gl);
-  }
+    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);
+        setGLParameters(device, glParameters);
+        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
+ * @deprecated use withDeviceParameters instead
+ */
 export function withGLParameters(device, parameters, func) {
-  if (isObjectEmpty(parameters)) {
-    return func(device);
-  }
-  pushContextState(device.gl);
-  try {
-    setGLParameters(device, parameters);
-    return func(device);
-  } finally {
-    popContextState(device.gl);
-  }
+    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(device, parameters, func) {
-  if (isObjectEmpty(parameters)) {
-    return func(device);
-  }
-  pushContextState(device.gl);
-  try {
-    setDeviceParameters(device, parameters);
-    return func(device);
-  } finally {
-    popContextState(device.gl);
-  }
+    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, parameters) {
-  const webglDevice = WebGLDevice.attach(device);
-  const {
-    gl
-  } = webglDevice;
-  if (parameters.cullMode) {
-    switch (parameters.cullMode) {
-      case 'none':
-        gl.disable(2884);
-        break;
-      case 'front':
-        gl.enable(2884);
-        gl.cullFace(1028);
-        break;
-      case 'back':
-        gl.enable(2884);
-        gl.cullFace(1029);
-        break;
-    }
-  }
-  if (parameters.frontFace) {
-    gl.frontFace(map('frontFace', parameters.frontFace, {
-      ccw: 2305,
-      cw: 2304
-    }));
-  }
-  if (parameters.depthBias !== undefined) {
-    gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
-  }
-  if (parameters.depthWriteEnabled !== undefined) {
-    gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
-  }
-  if (parameters.depthCompare) {
-    parameters.depthCompare !== 'always' ? gl.enable(2929) : gl.disable(2929);
-    gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
-  }
-  if (parameters.stencilWriteMask) {
-    const mask = parameters.stencilWriteMask;
-    gl.stencilMaskSeparate(1028, mask);
-    gl.stencilMaskSeparate(1029, mask);
-  }
-  if (parameters.stencilReadMask) {
-    log.warn('stencilReadMask not supported under WebGL');
-  }
-  if (parameters.stencilCompare) {
-    const mask = parameters.stencilReadMask || 0xffffffff;
-    const glValue = convertCompareFunction('depthCompare', parameters.stencilCompare);
-    parameters.stencilCompare !== 'always' ? gl.enable(2960) : gl.disable(2960);
-    gl.stencilFuncSeparate(1028, glValue, 0, mask);
-    gl.stencilFuncSeparate(1029, glValue, 0, mask);
-  }
-  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);
-    gl.stencilOpSeparate(1028, sfail, dpfail, dppass);
-    gl.stencilOpSeparate(1029, sfail, dpfail, dppass);
-  }
-  if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-    gl.enable(3042);
-    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');
-    gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
-  }
+    const webglDevice = WebGLDevice.attach(device);
+    const { gl } = 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 &&
+        parameters.stencilFailOperation &&
+        parameters.stencilDepthFailOperation) {
+        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.blendColorOperation || parameters.blendAlphaOperation) {
+        gl.enable(GL.BLEND);
+        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');
+        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) {
-  return map(parameter, value, {
-    never: 512,
-    less: 513,
-    equal: 514,
-    'less-equal': 515,
-    greater: 516,
-    'not-equal': 517,
-    'greater-equal': 518,
-    always: 519
-  });
+    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
+    });
 }
 export function convertToCompareFunction(parameter, value) {
-  return map(parameter, value, {
-    [512]: 'never',
-    [513]: 'less',
-    [514]: 'equal',
-    [515]: 'less-equal',
-    [516]: 'greater',
-    [517]: 'not-equal',
-    [518]: 'greater-equal',
-    [519]: 'always'
-  });
+    return map(parameter, value, {
+        [GL.NEVER]: 'never',
+        [GL.LESS]: 'less',
+        [GL.EQUAL]: 'equal',
+        [GL.LEQUAL]: 'less-equal',
+        [GL.GREATER]: 'greater',
+        [GL.NOTEQUAL]: 'not-equal',
+        [GL.GEQUAL]: 'greater-equal',
+        [GL.ALWAYS]: 'always'
+    });
 }
 function convertStencilOperation(parameter, value) {
-  return map(parameter, value, {
-    keep: 7680,
-    zero: 0,
-    replace: 7681,
-    invert: 5386,
-    'increment-clamp': 7682,
-    'decrement-clamp': 7683,
-    'increment-wrap': 34055,
-    'decrement-wrap': 34056
-  });
+    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) {
-  return map(parameter, value, {
-    'add': 32774,
-    'subtract': 32778,
-    'reverse-subtract': 32779,
-    'min': 32775,
-    'max': 32776
-  });
+    return map(parameter, value, {
+        'add': GL.FUNC_ADD,
+        'subtract': GL.FUNC_SUBTRACT,
+        'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
+        'min': GL.MIN,
+        'max': GL.MAX
+    });
 }
 function convertBlendFactorToFunction(parameter, value) {
-  return map(parameter, value, {
-    'one': 1,
-    'zero': 0,
-    'src-color': 768,
-    'one-minus-src-color': 769,
-    'dst-color': 774,
-    'one-minus-dst-color': 775,
-    'src-alpha': 770,
-    'one-minus-src-alpha': 771,
-    'dst-alpha': 772,
-    'one-minus-dst-alpha': 773
-  });
+    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,
+    });
 }
 function message(parameter, value) {
-  return `Illegal parameter ${value} for ${parameter}`;
+    return `Illegal parameter ${value} for ${parameter}`;
 }
 function map(parameter, value, valueMap) {
-  if (!(value in valueMap)) {
-    throw new Error(message(parameter, value));
-  }
-  return valueMap[value];
+    if (!(value in valueMap)) {
+        throw new Error(message(parameter, value));
+    }
+    return valueMap[value];
 }
 function mapBoolean(parameter, value) {
-  return value;
+    return value;
 }
-//# sourceMappingURL=device-parameters.js.map

package/dist/adapter/converters/sampler-parameters.d.ts

@@ -6,8 +6,4 @@ import { GLSamplerParameters } from '@luma.gl/constants';
  * @returns
  */
 export declare function convertSamplerParametersToWebGL(props: SamplerProps): GLSamplerParameters;
-/**
- * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
- */
-export declare function updateSamplerParametersForNPOT(parameters: GLSamplerParameters): GLSamplerParameters;
 //# sourceMappingURL=sampler-parameters.d.ts.map

package/dist/adapter/converters/sampler-parameters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sampler-parameters.d.ts","sourceRoot":"","sources":["../../../src/adapter/converters/sampler-parameters.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAK,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AAG3D;;;;GAIG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,YAAY,GAAG,mBAAmB,CAuCxF;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAC5C,UAAU,EAAE,mBAAmB,GAC9B,mBAAmB,CAUrB"}
+{"version":3,"file":"sampler-parameters.d.ts","sourceRoot":"","sources":["../../../src/adapter/converters/sampler-parameters.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAK,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AAG3D;;;;GAIG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,YAAY,GAAG,mBAAmB,CAuCxF"}

package/dist/adapter/converters/sampler-parameters.js

@@ -1,76 +1,81 @@
-import { convertCompareFunction } from "./device-parameters.js";
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+import { GL } from '@luma.gl/constants';
+import { convertCompareFunction } from './device-parameters';
+/**
+ * Convert WebGPU-style sampler props to WebGL
+ * @param props
+ * @returns
+ */
 export function convertSamplerParametersToWebGL(props) {
-  const params = {};
-  if (props.addressModeU) {
-    params[10242] = convertAddressMode(props.addressModeU);
-  }
-  if (props.addressModeV) {
-    params[10243] = convertAddressMode(props.addressModeV);
-  }
-  if (props.addressModeW) {
-    params[32882] = convertAddressMode(props.addressModeW);
-  }
-  if (props.magFilter) {
-    params[10240] = convertMaxFilterMode(props.magFilter);
-  }
-  if (props.minFilter || props.mipmapFilter) {
-    params[10241] = convertMinFilterMode(props.minFilter || 'linear', props.mipmapFilter);
-  }
-  if (props.lodMinClamp !== undefined) {
-    params[33082] = props.lodMinClamp;
-  }
-  if (props.lodMaxClamp !== undefined) {
-    params[33083] = props.lodMaxClamp;
-  }
-  if (props.type === 'comparison-sampler') {
-    params[34892] = 34894;
-  }
-  if (props.compare) {
-    params[34893] = convertCompareFunction('compare', props.compare);
-  }
-  if (props.maxAnisotropy) {
-    params[34046] = props.maxAnisotropy;
-  }
-  return params;
-}
-export function updateSamplerParametersForNPOT(parameters) {
-  const newParameters = {
-    ...parameters
-  };
-  if (parameters[10241] !== 9728) {
-    newParameters[10241] = 9729;
-  }
-  newParameters[10242] = 33071;
-  newParameters[10243] = 33071;
-  return newParameters;
+    const params = {};
+    if (props.addressModeU) {
+        params[GL.TEXTURE_WRAP_S] = convertAddressMode(props.addressModeU);
+    }
+    if (props.addressModeV) {
+        params[GL.TEXTURE_WRAP_T] = convertAddressMode(props.addressModeV);
+    }
+    if (props.addressModeW) {
+        params[GL.TEXTURE_WRAP_R] = convertAddressMode(props.addressModeW);
+    }
+    if (props.magFilter) {
+        params[GL.TEXTURE_MAG_FILTER] = convertMaxFilterMode(props.magFilter);
+    }
+    if (props.minFilter || props.mipmapFilter) {
+        // TODO - arbitrary choice of linear?
+        params[GL.TEXTURE_MIN_FILTER] = convertMinFilterMode(props.minFilter || 'linear', props.mipmapFilter);
+    }
+    if (props.lodMinClamp !== undefined) {
+        params[GL.TEXTURE_MIN_LOD] = props.lodMinClamp;
+    }
+    if (props.lodMaxClamp !== undefined) {
+        params[GL.TEXTURE_MAX_LOD] = props.lodMaxClamp;
+    }
+    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) {
+        params[GL.TEXTURE_MAX_ANISOTROPY_EXT] = props.maxAnisotropy;
+    }
+    return params;
 }
+// HELPERS
+/** Convert address more */
 function convertAddressMode(addressMode) {
-  switch (addressMode) {
-    case 'clamp-to-edge':
-      return 33071;
-    case 'repeat':
-      return 10497;
-    case 'mirror-repeat':
-      return 33648;
-  }
+    switch (addressMode) {
+        case 'clamp-to-edge':
+            return GL.CLAMP_TO_EDGE;
+        case 'repeat':
+            return GL.REPEAT;
+        case 'mirror-repeat':
+            return GL.MIRRORED_REPEAT;
+    }
 }
 function convertMaxFilterMode(maxFilter) {
-  switch (maxFilter) {
-    case 'nearest':
-      return 9728;
-    case 'linear':
-      return 9729;
-  }
+    switch (maxFilter) {
+        case 'nearest':
+            return GL.NEAREST;
+        case 'linear':
+            return GL.LINEAR;
+    }
 }
+/**
+ * WebGPU has separate min filter and mipmap filter,
+ * WebGL is combined and effectively offers 6 options
+ */
 function convertMinFilterMode(minFilter, mipmapFilter) {
-  if (!mipmapFilter) {
-    return convertMaxFilterMode(minFilter);
-  }
-  switch (minFilter) {
-    case 'nearest':
-      return mipmapFilter === 'nearest' ? 9984 : 9986;
-    case 'linear':
-      return mipmapFilter === 'nearest' ? 9985 : 9987;
-  }
+    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;
+    }
 }
-//# sourceMappingURL=sampler-parameters.js.map