Drop WebGL1 (internal-755)

* Drop WebGL1

* Drop WebGL1 tests

* Mock WebGL2 in unit tests

* Update WebGL2 flow typings

* Drop extStandardDerivatives

* Drop extVertexArrayObject

.circleci/config.yml

@@ -127,12 +127,6 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - test-render-linux-chrome-webgl1-dev:
-          requires:
-            - prepare-linux
-          filters:
-            tags:
-              only: /.*/
       - test-render-linux-chrome-prod:
           requires:
             - prepare-linux
@@ -151,12 +145,6 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - test-render-linux-firefox-webgl1-dev:
-          requires:
-            - prepare-linux
-          filters:
-            tags:
-              only: /.*/
       - prepare-mac:
           filters:
             tags:
@@ -167,24 +155,12 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - test-render-mac-chrome-webgl1-dev:
-          requires:
-            - prepare-mac
-          filters:
-            tags:
-              only: /.*/
       - test-render-mac-safari-dev:
           requires:
             - prepare-mac
           filters:
             tags:
               only: /.*/
-      - test-render-mac-safari-webgl1-dev:
-          requires:
-            - prepare-mac
-          filters:
-            tags:
-              only: /.*/
       - prepare-windows:
           filters:
             tags:
@@ -458,21 +434,6 @@ jobs:
       - store_artifacts:
           path: "test/integration/render-tests/index.html"
 
-  test-render-linux-chrome-webgl1-dev:
-    <<: *linux-defaults
-    steps:
-      - attach_workspace:
-          at: ~/
-      - browser-tools/install-chrome
-      - run:
-          name: Running tests in parallel
-          command: |
-            USE_WEBGL2=false yarn run test-render
-      - store_test_results:
-          path: test/integration/render-tests
-      - store_artifacts:
-          path: "test/integration/render-tests/index.html"
-
   test-render-linux-chrome-prod:
     <<: *linux-defaults
     steps:
@@ -509,18 +470,6 @@ jobs:
       - store_artifacts:
           path: "test/integration/render-tests/index.html"
 
-  test-render-linux-firefox-webgl1-dev:
-    <<: *linux-defaults
-    steps:
-      - attach_workspace:
-          at: ~/
-      - browser-tools/install-firefox
-      - run: USE_WEBGL2=false yarn run test-render-firefox
-      - store_test_results:
-          path: test/integration/render-tests
-      - store_artifacts:
-          path: "test/integration/render-tests/index.html"
-
   prepare-mac:
     <<: *mac-defaults
     steps:
@@ -560,23 +509,6 @@ jobs:
       - store_artifacts:
           path: "test/integration/render-tests/index.html"
 
-  test-render-mac-chrome-webgl1-dev:
-    <<: *mac-defaults
-    parallelism: 3
-    steps:
-      - attach_workspace:
-          at: ~/
-      - browser-tools/install-chrome
-      - run:
-          name: Creating test list
-          command: |
-            circleci tests glob "test/integration/render-tests/**/*.json" | circleci tests split --split-by=timings > tests-to-run.txt
-      - run: USE_WEBGL2=false yarn run test-render
-      - store_test_results:
-          path: test/integration/render-tests
-      - store_artifacts:
-          path: "test/integration/render-tests/index.html"
-
   test-render-mac-safari-dev:
     <<: *mac-defaults
     resource_class: macos.m1.large.gen1
@@ -589,18 +521,6 @@ jobs:
       - store_artifacts:
           path: "test/integration/render-tests/index.html"
 
-  test-render-mac-safari-webgl1-dev:
-    <<: *mac-defaults
-    resource_class: macos.m1.large.gen1
-    steps:
-      - attach_workspace:
-          at: ~/
-      - run: USE_WEBGL2=false yarn run test-render-safari
-      - store_test_results:
-          path: test/integration/render-tests
-      - store_artifacts:
-          path: "test/integration/render-tests/index.html"
-
   prepare-windows:
     <<: *windows-defaults
     steps:

3d-style/render/shadow_renderer.js

@@ -92,7 +92,7 @@ export class ShadowRenderer {
         this._enabled = false;
         this._shadowLayerCount = 0;
 
-        if (!painter.context.isWebGL2 || !directionalLight || !directionalLight.properties) {
+        if (!directionalLight || !directionalLight.properties) {
             return;
         }
 

3d-style/source/model_loader.js

@@ -62,9 +62,8 @@ function convertImages(gltf: Object): Array<TextureImage> {
 }
 
 function convertTextures(gltf: Object, images: Array<TextureImage>): Array<ModelTexture> {
-
     const textures: ModelTexture[] = [];
-    const gl = window.WebGLRenderingContext;
+    const gl = window.WebGL2RenderingContext;
     const samplersDesc = gltf.json.samplers;
     if (gltf.json.textures) {
         for (const textureDesc of gltf.json.textures) {

build/rollup_plugins.js

@@ -30,8 +30,7 @@ export const plugins = ({minified, production, test, bench, keepClassNames}) =>
     }),
     test ? replace({
         'process.env.CI': JSON.stringify(process.env.CI),
-        'process.env.UPDATE': JSON.stringify(process.env.UPDATE),
-        'process.env.USE_WEBGL2': JSON.stringify(process.env.USE_WEBGL2)
+        'process.env.UPDATE': JSON.stringify(process.env.UPDATE)
     }) : false,
     glsl(['./src/shaders/*.glsl', './3d-style/shaders/*.glsl'], production),
     minified ? terser({

debug/webgl-error-reporter.js

@@ -1,4 +1,4 @@
-(function(WebGLRenderingContext) {
+(function(WebGL2RenderingContext) {
     // This function implements an error reporter for WebGL shaders. It works by wrapping
     // the WebGL calls, caching the shader source, and automatically checking for an error
     // when compileShader is invoked.
@@ -21,25 +21,25 @@
         return {errorLine: parseInt(parts[2]), errorMessage: `ERROR: ${parts[3].trim()}`};
     }
 
-    function wrapWebGLRenderingContext(WebGLRenderingContext) {
+    function wrapWebGLRenderingContext(WebGL2RenderingContext) {
         const {
             shaderSource,
             getShaderParameter,
             compileShader,
             COMPILE_STATUS,
             getShaderInfoLog
-        } = WebGLRenderingContext.prototype;
+        } = WebGL2RenderingContext.prototype;
 
         // Cache the source so that we have it available for logging in case of error
-        WebGLRenderingContext.prototype.shaderSource = function (...args) {
+        WebGL2RenderingContext.prototype.shaderSource = function (...args) {
             const shader = args[0];
             const source = args[1];
             shaderCache.set(shader, source);
             // .call() returns an illegal invocation error (maybe arity?), so apply.
             return shaderSource.apply(this, args);
         };
 
-        WebGLRenderingContext.prototype.compileShader = function (shader) {
+        WebGL2RenderingContext.prototype.compileShader = function (shader) {
             const returnValue = compileShader.call(this, shader);
 
             if (!getShaderParameter.call(this, shader, COMPILE_STATUS)) {
@@ -67,5 +67,5 @@
         }
     }
 
-    wrapWebGLRenderingContext(WebGLRenderingContext);
-}(window.WebGLRenderingContext));
+    wrapWebGLRenderingContext(WebGL2RenderingContext);
+}(window.WebGL2RenderingContext));

flow-typed/gl.js

@@ -1,5 +1,5 @@
 // @flow strict
 declare module "gl" {
-    declare function gl(width: number, height: number, attributes: WebGLContextAttributes): WebGLRenderingContext;
+    declare function gl(width: number, height: number, attributes: WebGLContextAttributes): WebGL2RenderingContext;
     declare module.exports: typeof gl;
 }

flow-typed/webgl2.js

@@ -0,0 +1,20 @@
+// @flow strict
+
+type GLenum = number;
+type GLintptr = number;
+type GLsizei = number;
+type GLuint = number;
+
+declare interface WebGLVertexArrayObject {
+    prototype: WebGLVertexArrayObject;
+    new(): WebGLVertexArrayObject;
+}
+
+export type WebGL2RenderingContext = WebGLRenderingContext & {
+    createVertexArray: () => WebGLVertexArrayObject | null;
+    deleteVertexArray: (vertexArray: WebGLVertexArrayObject | null) => void;
+    bindVertexArray: (array: WebGLVertexArrayObject | null) => void;
+    getBufferSubData: (target: GLenum, srcByteOffset: GLintptr, dstBuffer: $ArrayBufferView, dstOffset?: GLuint, length?: GLuint) => void;
+    drawElementsInstanced: (mode: GLenum, count: GLsizei, type: GLenum, offset: GLintptr, instanceCount: GLsizei) => void;
+    vertexAttribDivisor: (index: GLuint, divisor: GLuint) => void;
+};

src/geo/projection/globe_util.js

@@ -563,9 +563,8 @@ export function globePoleMatrixForTile(z: number, x: number, tr: Transform): Flo
 export function globeUseCustomAntiAliasing(painter: Painter, context: Context, transform: Transform): boolean {
     const transitionT = globeToMercatorTransition(transform.zoom);
     const useContextAA = painter.style.map._antialias;
-    const hasStandardDerivatives = !!context.extStandardDerivatives;
     const disabled = context.extStandardDerivativesForceOff || (painter.terrain && painter.terrain.exaggeration() > 0.0);
-    return transitionT === 0.0 && !useContextAA && !disabled && hasStandardDerivatives;
+    return transitionT === 0.0 && !useContextAA && !disabled;
 }
 
 export function getGridMatrix(id: CanonicalTileID, bounds: LngLatBounds, latitudinalLod: number, worldSize: number): Mat4 {

src/gl/context.js

@@ -26,9 +26,7 @@ type ClearArgs = {
 };
 
 class Context {
-    gl: WebGLRenderingContext;
-    isWebGL2: boolean;
-    extVertexArrayObject: any;
+    gl: WebGL2RenderingContext;
     currentNumAttributes: ?number;
     maxTextureSize: number;
 
@@ -70,28 +68,15 @@ class Context {
     extTextureFilterAnisotropicMax: any;
     extTextureHalfFloat: any;
     extRenderToTextureHalfFloat: any;
-    extStandardDerivatives: any;
     extDebugRendererInfo: any;
     extTimerQuery: any;
     extTextureFloatLinear: any;
 
     extTextureFilterAnisotropicForceOff: boolean;
     extStandardDerivativesForceOff: boolean;
 
-    constructor(gl: WebGLRenderingContext, isWebGL2: boolean = false) {
+    constructor(gl: WebGL2RenderingContext) {
         this.gl = gl;
-        this.isWebGL2 = isWebGL2;
-        this.extVertexArrayObject = this.gl.getExtension('OES_vertex_array_object');
-
-        if (isWebGL2) {
-            /* $FlowFixMe[cannot-resolve-name] */ // Not adding dependency to webgl2 yet.
-            const gl2 = (gl: WebGL2RenderingContext);
-            this.extVertexArrayObject = {
-                createVertexArrayOES: gl2.createVertexArray.bind(gl),
-                deleteVertexArrayOES: gl2.deleteVertexArray.bind(gl),
-                bindVertexArrayOES: gl2.bindVertexArray.bind(gl)
-            };
-        }
 
         this.clearColor = new ClearColor(this);
         this.clearDepth = new ClearDepth(this);
@@ -120,7 +105,7 @@ class Context {
         this.bindTexture = new BindTexture(this);
         this.bindVertexBuffer = new BindVertexBuffer(this);
         this.bindElementBuffer = new BindElementBuffer(this);
-        this.bindVertexArrayOES = this.extVertexArrayObject && new BindVertexArrayOES(this);
+        this.bindVertexArrayOES = new BindVertexArrayOES(this);
         this.pixelStoreUnpack = new PixelStoreUnpack(this);
         this.pixelStoreUnpackPremultiplyAlpha = new PixelStoreUnpackPremultiplyAlpha(this);
         this.pixelStoreUnpackFlipY = new PixelStoreUnpackFlipY(this);
@@ -143,11 +128,7 @@ class Context {
         }
 
         this.extTextureFloatLinear = gl.getExtension('OES_texture_float_linear');
-        if (!isWebGL2) this.extTextureHalfFloat = gl.getExtension('OES_texture_half_float');
-        if (isWebGL2 || (this.extTextureHalfFloat && gl.getExtension('OES_texture_half_float_linear'))) {
-            this.extRenderToTextureHalfFloat = gl.getExtension('EXT_color_buffer_half_float');
-        }
-        this.extStandardDerivatives = isWebGL2 || gl.getExtension('OES_standard_derivatives');
+        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);
@@ -211,9 +192,7 @@ class Context {
         this.bindTexture.dirty = true;
         this.bindVertexBuffer.dirty = true;
         this.bindElementBuffer.dirty = true;
-        if (this.extVertexArrayObject) {
-            this.bindVertexArrayOES.dirty = true;
-        }
+        this.bindVertexArrayOES.dirty = true;
         this.pixelStoreUnpack.dirty = true;
         this.pixelStoreUnpackPremultiplyAlpha.dirty = true;
         this.pixelStoreUnpackFlipY.dirty = true;
@@ -332,9 +311,7 @@ class Context {
     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);
-        }
+        this.bindVertexArrayOES.set(null);
     }
 }