mapbox-gl 1.13.2

package/src/gl/color_mode.js

@@ -0,0 +1,34 @@
+// @flow
+import Color from '../style-spec/util/color';
+
+import type {BlendFuncType, ColorMaskType} from './types';
+
+const ZERO = 0x0000;
+const ONE = 0x0001;
+const ONE_MINUS_SRC_ALPHA = 0x0303;
+
+class ColorMode {
+    blendFunction: BlendFuncType;
+    blendColor: Color;
+    mask: ColorMaskType;
+
+    constructor(blendFunction: BlendFuncType, blendColor: Color, mask: ColorMaskType) {
+        this.blendFunction = blendFunction;
+        this.blendColor = blendColor;
+        this.mask = mask;
+    }
+
+    static Replace: BlendFuncType;
+
+    static disabled: $ReadOnly<ColorMode>;
+    static unblended: $ReadOnly<ColorMode>;
+    static alphaBlended: $ReadOnly<ColorMode>;
+}
+
+ColorMode.Replace = [ONE, ZERO];
+
+ColorMode.disabled = new ColorMode(ColorMode.Replace, Color.transparent, [false, false, false, false]);
+ColorMode.unblended = new ColorMode(ColorMode.Replace, Color.transparent, [true, true, true, true]);
+ColorMode.alphaBlended = new ColorMode([ONE, ONE_MINUS_SRC_ALPHA], Color.transparent, [true, true, true, true]);
+
+export default ColorMode;

package/src/gl/context.js

@@ -0,0 +1,302 @@
+// @flow
+import IndexBuffer from './index_buffer';
+
+import VertexBuffer from './vertex_buffer';
+import Framebuffer from './framebuffer';
+import DepthMode from './depth_mode';
+import StencilMode from './stencil_mode';
+import ColorMode from './color_mode';
+import CullFaceMode from './cull_face_mode';
+import {deepEqual} from '../util/util';
+import {ClearColor, ClearDepth, ClearStencil, ColorMask, DepthMask, StencilMask, StencilFunc, StencilOp, StencilTest, DepthRange, DepthTest, DepthFunc, Blend, BlendFunc, BlendColor, BlendEquation, CullFace, CullFaceSide, FrontFace, Program, ActiveTextureUnit, Viewport, BindFramebuffer, BindRenderbuffer, BindTexture, BindVertexBuffer, BindElementBuffer, BindVertexArrayOES, PixelStoreUnpack, PixelStoreUnpackPremultiplyAlpha, PixelStoreUnpackFlipY} from './value';
+
+import type {TriangleIndexArray, LineIndexArray, LineStripIndexArray} from '../data/index_array_type';
+import type {
+    StructArray,
+    StructArrayMember
+} from '../util/struct_array';
+import type Color from '../style-spec/util/color';
+
+type ClearArgs = {
+    color?: Color,
+    depth?: number,
+    stencil?: number
+};
+
+class Context {
+    gl: WebGLRenderingContext;
+    extVertexArrayObject: any;
+    currentNumAttributes: ?number;
+    maxTextureSize: number;
+
+    clearColor: ClearColor;
+    clearDepth: ClearDepth;
+    clearStencil: ClearStencil;
+    colorMask: ColorMask;
+    depthMask: DepthMask;
+    stencilMask: StencilMask;
+    stencilFunc: StencilFunc;
+    stencilOp: StencilOp;
+    stencilTest: StencilTest;
+    depthRange: DepthRange;
+    depthTest: DepthTest;
+    depthFunc: DepthFunc;
+    blend: Blend;
+    blendFunc: BlendFunc;
+    blendColor: BlendColor;
+    blendEquation: BlendEquation;
+    cullFace: CullFace;
+    cullFaceSide: CullFaceSide;
+    frontFace: FrontFace;
+    program: Program;
+    activeTexture: ActiveTextureUnit;
+    viewport: Viewport;
+    bindFramebuffer: BindFramebuffer;
+    bindRenderbuffer: BindRenderbuffer;
+    bindTexture: BindTexture;
+    bindVertexBuffer: BindVertexBuffer;
+    bindElementBuffer: BindElementBuffer;
+    bindVertexArrayOES: BindVertexArrayOES;
+    pixelStoreUnpack: PixelStoreUnpack;
+    pixelStoreUnpackPremultiplyAlpha: PixelStoreUnpackPremultiplyAlpha;
+    pixelStoreUnpackFlipY: PixelStoreUnpackFlipY;
+
+    extTextureFilterAnisotropic: any;
+    extTextureFilterAnisotropicMax: any;
+    extTextureHalfFloat: any;
+    extRenderToTextureHalfFloat: any;
+    extTimerQuery: any;
+
+    constructor(gl: WebGLRenderingContext) {
+        this.gl = gl;
+        this.extVertexArrayObject = this.gl.getExtension('OES_vertex_array_object');
+
+        this.clearColor = new ClearColor(this);
+        this.clearDepth = new ClearDepth(this);
+        this.clearStencil = new ClearStencil(this);
+        this.colorMask = new ColorMask(this);
+        this.depthMask = new DepthMask(this);
+        this.stencilMask = new StencilMask(this);
+        this.stencilFunc = new StencilFunc(this);
+        this.stencilOp = new StencilOp(this);
+        this.stencilTest = new StencilTest(this);
+        this.depthRange = new DepthRange(this);
+        this.depthTest = new DepthTest(this);
+        this.depthFunc = new DepthFunc(this);
+        this.blend = new Blend(this);
+        this.blendFunc = new BlendFunc(this);
+        this.blendColor = new BlendColor(this);
+        this.blendEquation = new BlendEquation(this);
+        this.cullFace = new CullFace(this);
+        this.cullFaceSide = new CullFaceSide(this);
+        this.frontFace = new FrontFace(this);
+        this.program = new Program(this);
+        this.activeTexture = new ActiveTextureUnit(this);
+        this.viewport = new Viewport(this);
+        this.bindFramebuffer = new BindFramebuffer(this);
+        this.bindRenderbuffer = new BindRenderbuffer(this);
+        this.bindTexture = new BindTexture(this);
+        this.bindVertexBuffer = new BindVertexBuffer(this);
+        this.bindElementBuffer = new BindElementBuffer(this);
+        this.bindVertexArrayOES = this.extVertexArrayObject && new BindVertexArrayOES(this);
+        this.pixelStoreUnpack = new PixelStoreUnpack(this);
+        this.pixelStoreUnpackPremultiplyAlpha = new PixelStoreUnpackPremultiplyAlpha(this);
+        this.pixelStoreUnpackFlipY = new PixelStoreUnpackFlipY(this);
+
+        this.extTextureFilterAnisotropic = (
+            gl.getExtension('EXT_texture_filter_anisotropic') ||
+            gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
+            gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
+        );
+        if (this.extTextureFilterAnisotropic) {
+            this.extTextureFilterAnisotropicMax = gl.getParameter(this.extTextureFilterAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
+        }
+
+        this.extTextureHalfFloat = gl.getExtension('OES_texture_half_float');
+        if (this.extTextureHalfFloat) {
+            gl.getExtension('OES_texture_half_float_linear');
+            this.extRenderToTextureHalfFloat = gl.getExtension('EXT_color_buffer_half_float');
+        }
+
+        this.extTimerQuery = gl.getExtension('EXT_disjoint_timer_query');
+        this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+    }
+
+    setDefault() {
+        this.unbindVAO();
+
+        this.clearColor.setDefault();
+        this.clearDepth.setDefault();
+        this.clearStencil.setDefault();
+        this.colorMask.setDefault();
+        this.depthMask.setDefault();
+        this.stencilMask.setDefault();
+        this.stencilFunc.setDefault();
+        this.stencilOp.setDefault();
+        this.stencilTest.setDefault();
+        this.depthRange.setDefault();
+        this.depthTest.setDefault();
+        this.depthFunc.setDefault();
+        this.blend.setDefault();
+        this.blendFunc.setDefault();
+        this.blendColor.setDefault();
+        this.blendEquation.setDefault();
+        this.cullFace.setDefault();
+        this.cullFaceSide.setDefault();
+        this.frontFace.setDefault();
+        this.program.setDefault();
+        this.activeTexture.setDefault();
+        this.bindFramebuffer.setDefault();
+        this.pixelStoreUnpack.setDefault();
+        this.pixelStoreUnpackPremultiplyAlpha.setDefault();
+        this.pixelStoreUnpackFlipY.setDefault();
+    }
+
+    setDirty() {
+        this.clearColor.dirty = true;
+        this.clearDepth.dirty = true;
+        this.clearStencil.dirty = true;
+        this.colorMask.dirty = true;
+        this.depthMask.dirty = true;
+        this.stencilMask.dirty = true;
+        this.stencilFunc.dirty = true;
+        this.stencilOp.dirty = true;
+        this.stencilTest.dirty = true;
+        this.depthRange.dirty = true;
+        this.depthTest.dirty = true;
+        this.depthFunc.dirty = true;
+        this.blend.dirty = true;
+        this.blendFunc.dirty = true;
+        this.blendColor.dirty = true;
+        this.blendEquation.dirty = true;
+        this.cullFace.dirty = true;
+        this.cullFaceSide.dirty = true;
+        this.frontFace.dirty = true;
+        this.program.dirty = true;
+        this.activeTexture.dirty = true;
+        this.viewport.dirty = true;
+        this.bindFramebuffer.dirty = true;
+        this.bindRenderbuffer.dirty = true;
+        this.bindTexture.dirty = true;
+        this.bindVertexBuffer.dirty = true;
+        this.bindElementBuffer.dirty = true;
+        if (this.extVertexArrayObject) {
+            this.bindVertexArrayOES.dirty = true;
+        }
+        this.pixelStoreUnpack.dirty = true;
+        this.pixelStoreUnpackPremultiplyAlpha.dirty = true;
+        this.pixelStoreUnpackFlipY.dirty = true;
+    }
+
+    createIndexBuffer(array: TriangleIndexArray | LineIndexArray | LineStripIndexArray, dynamicDraw?: boolean) {
+        return new IndexBuffer(this, array, dynamicDraw);
+    }
+
+    createVertexBuffer(array: StructArray, attributes: $ReadOnlyArray<StructArrayMember>, dynamicDraw?: boolean) {
+        return new VertexBuffer(this, array, attributes, dynamicDraw);
+    }
+
+    createRenderbuffer(storageFormat: number, width: number, height: number) {
+        const gl = this.gl;
+
+        const rbo = gl.createRenderbuffer();
+        this.bindRenderbuffer.set(rbo);
+        gl.renderbufferStorage(gl.RENDERBUFFER, storageFormat, width, height);
+        this.bindRenderbuffer.set(null);
+
+        return rbo;
+    }
+
+    createFramebuffer(width: number, height: number, hasDepth: boolean) {
+        return new Framebuffer(this, width, height, hasDepth);
+    }
+
+    clear({color, depth}: ClearArgs) {
+        const gl = this.gl;
+        let mask = 0;
+
+        if (color) {
+            mask |= gl.COLOR_BUFFER_BIT;
+            this.clearColor.set(color);
+            this.colorMask.set([true, true, true, true]);
+        }
+
+        if (typeof depth !== 'undefined') {
+            mask |= gl.DEPTH_BUFFER_BIT;
+
+            // Workaround for platforms where clearDepth doesn't seem to work
+            // without reseting the depthRange. See https://github.com/mapbox/mapbox-gl-js/issues/3437
+            this.depthRange.set([0, 1]);
+
+            this.clearDepth.set(depth);
+            this.depthMask.set(true);
+        }
+
+        // See note in Painter#clearStencil: implement this the easy way once GPU bug/workaround is fixed upstream
+        // if (typeof stencil !== 'undefined') {
+        //     mask |= gl.STENCIL_BUFFER_BIT;
+        //     this.clearStencil.set(stencil);
+        //     this.stencilMask.set(0xFF);
+        // }
+
+        gl.clear(mask);
+    }
+
+    setCullFace(cullFaceMode: $ReadOnly<CullFaceMode>) {
+        if (cullFaceMode.enable === false) {
+            this.cullFace.set(false);
+        } else {
+            this.cullFace.set(true);
+            this.cullFaceSide.set(cullFaceMode.mode);
+            this.frontFace.set(cullFaceMode.frontFace);
+        }
+    }
+
+    setDepthMode(depthMode: $ReadOnly<DepthMode>) {
+        if (depthMode.func === this.gl.ALWAYS && !depthMode.mask) {
+            this.depthTest.set(false);
+        } else {
+            this.depthTest.set(true);
+            this.depthFunc.set(depthMode.func);
+            this.depthMask.set(depthMode.mask);
+            this.depthRange.set(depthMode.range);
+        }
+    }
+
+    setStencilMode(stencilMode: $ReadOnly<StencilMode>) {
+        if (stencilMode.test.func === this.gl.ALWAYS && !stencilMode.mask) {
+            this.stencilTest.set(false);
+        } else {
+            this.stencilTest.set(true);
+            this.stencilMask.set(stencilMode.mask);
+            this.stencilOp.set([stencilMode.fail, stencilMode.depthFail, stencilMode.pass]);
+            this.stencilFunc.set({
+                func: stencilMode.test.func,
+                ref: stencilMode.ref,
+                mask: stencilMode.test.mask
+            });
+        }
+    }
+
+    setColorMode(colorMode: $ReadOnly<ColorMode>) {
+        if (deepEqual(colorMode.blendFunction, ColorMode.Replace)) {
+            this.blend.set(false);
+        } else {
+            this.blend.set(true);
+            this.blendFunc.set(colorMode.blendFunction);
+            this.blendColor.set(colorMode.blendColor);
+        }
+
+        this.colorMask.set(colorMode.mask);
+    }
+
+    unbindVAO() {
+        // Unbinding the VAO prevents other things (custom layers, new buffer creation) from
+        // unintentionally changing the state of the last VAO used.
+        if (this.extVertexArrayObject) {
+            this.bindVertexArrayOES.set(null);
+        }
+    }
+}
+
+export default Context;

package/src/gl/cull_face_mode.js

@@ -0,0 +1,26 @@
+// @flow
+
+import type {CullFaceModeType, FrontFaceType} from './types';
+
+const BACK = 0x0405;
+const CCW = 0x0901;
+
+class CullFaceMode {
+    enable: boolean;
+    mode: CullFaceModeType;
+    frontFace: FrontFaceType;
+
+    constructor(enable: boolean, mode: CullFaceModeType, frontFace: FrontFaceType) {
+        this.enable = enable;
+        this.mode = mode;
+        this.frontFace = frontFace;
+    }
+
+    static disabled: $ReadOnly<CullFaceMode>;
+    static backCCW: $ReadOnly<CullFaceMode>;
+}
+
+CullFaceMode.disabled = new CullFaceMode(false, BACK, CCW);
+CullFaceMode.backCCW = new CullFaceMode(true, BACK, CCW);
+
+export default CullFaceMode;

package/src/gl/depth_mode.js

@@ -0,0 +1,29 @@
+// @flow
+import type {DepthFuncType, DepthMaskType, DepthRangeType} from './types';
+
+const ALWAYS = 0x0207;
+
+class DepthMode {
+    func: DepthFuncType;
+    mask: DepthMaskType;
+    range: DepthRangeType;
+
+    // DepthMask enums
+    static ReadOnly: boolean;
+    static ReadWrite: boolean;
+
+    constructor(depthFunc: DepthFuncType, depthMask: DepthMaskType, depthRange: DepthRangeType) {
+        this.func = depthFunc;
+        this.mask = depthMask;
+        this.range = depthRange;
+    }
+
+    static disabled: $ReadOnly<DepthMode>;
+}
+
+DepthMode.ReadOnly = false;
+DepthMode.ReadWrite = true;
+
+DepthMode.disabled = new DepthMode(ALWAYS, DepthMode.ReadOnly, [0, 1]);
+
+export default DepthMode;

package/src/gl/framebuffer.js

@@ -0,0 +1,44 @@
+// @flow
+import {ColorAttachment, DepthAttachment} from './value';
+import assert from 'assert';
+
+import type Context from './context';
+
+class Framebuffer {
+    context: Context;
+    width: number;
+    height: number;
+    framebuffer: WebGLFramebuffer;
+    colorAttachment: ColorAttachment;
+    depthAttachment: DepthAttachment;
+
+    constructor(context: Context, width: number, height: number, hasDepth: boolean) {
+        this.context = context;
+        this.width = width;
+        this.height = height;
+        const gl = context.gl;
+        const fbo = this.framebuffer = gl.createFramebuffer();
+
+        this.colorAttachment = new ColorAttachment(context, fbo);
+        if (hasDepth) {
+            this.depthAttachment = new DepthAttachment(context, fbo);
+        }
+        assert(gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE);
+    }
+
+    destroy() {
+        const gl = this.context.gl;
+
+        const texture = this.colorAttachment.get();
+        if (texture) gl.deleteTexture(texture);
+
+        if (this.depthAttachment) {
+            const renderbuffer = this.depthAttachment.get();
+            if (renderbuffer) gl.deleteRenderbuffer(renderbuffer);
+        }
+
+        gl.deleteFramebuffer(this.framebuffer);
+    }
+}
+
+export default Framebuffer;

package/src/gl/index_buffer.js

@@ -0,0 +1,55 @@
+// @flow
+import assert from 'assert';
+
+import type {StructArray} from '../util/struct_array';
+import type {TriangleIndexArray, LineIndexArray, LineStripIndexArray} from '../data/index_array_type';
+import type Context from '../gl/context';
+
+class IndexBuffer {
+    context: Context;
+    buffer: WebGLBuffer;
+    dynamicDraw: boolean;
+
+    constructor(context: Context, array: TriangleIndexArray | LineIndexArray | LineStripIndexArray, dynamicDraw?: boolean) {
+        this.context = context;
+        const gl = context.gl;
+        this.buffer = gl.createBuffer();
+        this.dynamicDraw = Boolean(dynamicDraw);
+
+        // The bound index buffer is part of vertex array object state. We don't want to
+        // modify whatever VAO happens to be currently bound, so make sure the default
+        // vertex array provided by the context is bound instead.
+        this.context.unbindVAO();
+
+        context.bindElementBuffer.set(this.buffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, array.arrayBuffer, this.dynamicDraw ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
+
+        if (!this.dynamicDraw) {
+            delete array.arrayBuffer;
+        }
+    }
+
+    bind() {
+        this.context.bindElementBuffer.set(this.buffer);
+    }
+
+    updateData(array: StructArray) {
+        const gl = this.context.gl;
+        assert(this.dynamicDraw);
+        // The right VAO will get this buffer re-bound later in VertexArrayObject#bind
+        // See https://github.com/mapbox/mapbox-gl-js/issues/5620
+        this.context.unbindVAO();
+        this.bind();
+        gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, array.arrayBuffer);
+    }
+
+    destroy() {
+        const gl = this.context.gl;
+        if (this.buffer) {
+            gl.deleteBuffer(this.buffer);
+            delete this.buffer;
+        }
+    }
+}
+
+export default IndexBuffer;

package/src/gl/stencil_mode.js

@@ -0,0 +1,30 @@
+// @flow
+import type {StencilOpConstant, StencilTest} from './types';
+
+const ALWAYS = 0x0207;
+const KEEP = 0x1E00;
+
+class StencilMode {
+    test: StencilTest;
+    ref: number;
+    mask: number;
+    fail: StencilOpConstant;
+    depthFail: StencilOpConstant;
+    pass: StencilOpConstant;
+
+    constructor(test: StencilTest, ref: number, mask: number, fail: StencilOpConstant,
+        depthFail: StencilOpConstant, pass: StencilOpConstant) {
+        this.test = test;
+        this.ref = ref;
+        this.mask = mask;
+        this.fail = fail;
+        this.depthFail = depthFail;
+        this.pass = pass;
+    }
+
+    static disabled: $ReadOnly<StencilMode>;
+}
+
+StencilMode.disabled = new StencilMode({func: ALWAYS, mask: 0}, 0, 0, KEEP, KEEP, KEEP);
+
+export default StencilMode;

package/src/gl/types.js

@@ -0,0 +1,84 @@
+// @flow
+
+type BlendFuncConstant =
+    | $PropertyType<WebGLRenderingContext, 'ZERO'>
+    | $PropertyType<WebGLRenderingContext, 'ONE'>
+    | $PropertyType<WebGLRenderingContext, 'SRC_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_SRC_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'DST_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_DST_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'SRC_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_SRC_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'DST_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_DST_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'CONSTANT_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_CONSTANT_COLOR'>
+    | $PropertyType<WebGLRenderingContext, 'CONSTANT_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'ONE_MINUS_CONSTANT_ALPHA'>
+    | $PropertyType<WebGLRenderingContext, 'BLEND_COLOR'>;
+
+export type BlendFuncType = [BlendFuncConstant, BlendFuncConstant];
+
+export type BlendEquationType =
+    | $PropertyType<WebGLRenderingContext, 'FUNC_ADD'>
+    | $PropertyType<WebGLRenderingContext, 'FUNC_SUBTRACT'>
+    | $PropertyType<WebGLRenderingContext, 'FUNC_REVERSE_SUBTRACT'>;
+
+export type ColorMaskType = [boolean, boolean, boolean, boolean];
+
+export type CompareFuncType =
+    | $PropertyType<WebGLRenderingContext, 'NEVER'>
+    | $PropertyType<WebGLRenderingContext, 'LESS'>
+    | $PropertyType<WebGLRenderingContext, 'EQUAL'>
+    | $PropertyType<WebGLRenderingContext, 'LEQUAL'>
+    | $PropertyType<WebGLRenderingContext, 'GREATER'>
+    | $PropertyType<WebGLRenderingContext, 'NOTEQUAL'>
+    | $PropertyType<WebGLRenderingContext, 'GEQUAL'>
+    | $PropertyType<WebGLRenderingContext, 'ALWAYS'>;
+
+export type DepthMaskType = boolean;
+
+export type DepthRangeType = [number, number];
+
+export type DepthFuncType = CompareFuncType;
+
+export type StencilFuncType = {
+    func: CompareFuncType,
+    ref: number,
+    mask: number
+};
+
+export type StencilOpConstant =
+    | $PropertyType<WebGLRenderingContext, 'KEEP'>
+    | $PropertyType<WebGLRenderingContext, 'ZERO'>
+    | $PropertyType<WebGLRenderingContext, 'REPLACE'>
+    | $PropertyType<WebGLRenderingContext, 'INCR'>
+    | $PropertyType<WebGLRenderingContext, 'INCR_WRAP'>
+    | $PropertyType<WebGLRenderingContext, 'DECR'>
+    | $PropertyType<WebGLRenderingContext, 'DECR_WRAP'>
+    | $PropertyType<WebGLRenderingContext, 'INVERT'>;
+
+export type StencilOpType = [StencilOpConstant, StencilOpConstant, StencilOpConstant];
+
+export type TextureUnitType = number;
+
+export type ViewportType = [number, number, number, number];
+
+export type StencilTest =
+    | { func: $PropertyType<WebGLRenderingContext, 'NEVER'>, mask: 0 }
+    | { func: $PropertyType<WebGLRenderingContext, 'LESS'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'EQUAL'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'LEQUAL'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'GREATER'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'NOTEQUAL'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'GEQUAL'>, mask: number }
+    | { func: $PropertyType<WebGLRenderingContext, 'ALWAYS'>, mask: 0 };
+
+export type CullFaceModeType =
+    | $PropertyType<WebGLRenderingContext, 'FRONT'>
+    | $PropertyType<WebGLRenderingContext, 'BACK'>
+    | $PropertyType<WebGLRenderingContext, 'FRONT_AND_BACK'>
+
+export type FrontFaceType =
+    | $PropertyType<WebGLRenderingContext, 'CW'>
+    | $PropertyType<WebGLRenderingContext, 'CCW'>