feat: Remove WebGL1 support

- Replace uses of RawShaderMaterial by ShaderMaterial.
- Remove usage of USE_LOGDEPTHBUF_EXT as EXT_frag_depth is part of the
  core WebGL2 specification.
- Remove WebGL1-related code paths.

BREAKING CHANGES:
- WebGL1 context is no longer supported.

src/Core/Deprecated/Undeprecator.js

@@ -76,7 +76,7 @@ export const deprecatedFeature2MeshOptions = (options) => {
 
 export const deprecatedC3DEngineWebGLOptions = (options) => {
     if (options.isWebGL2 === false) {
-        console.warn('WebGL1 support (isWebGL2=false) is deprecated and will be removed in iTowns 2.43. This follows its deprecation by three.js. If you are impacted by this change, please discuss in the following issue: https://github.com/iTowns/itowns/issues/2152.');
+        console.error('WebGL1 support ended in 2.43.0. Falling-back to the WebGL2 renderer.');
     }
 };
 

src/Core/Prefab/Globe/Shaders/CloudsFS.glsl

@@ -1,13 +1,7 @@
 #ifdef USE_LOGDEPTHBUF
 
     uniform float logDepthBufFC;
-
-    #ifdef USE_LOGDEPTHBUF_EXT
-
-        //#extension GL_EXT_frag_depth : enable
-        varying float vFragDepth;
-
-    #endif
+    varying float vFragDepth;
 
 #endif
 
@@ -24,11 +18,9 @@ float noiseScale = 0.005;
 
 void main()
 {
-     #if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)
-
-	gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;
-
-    #endif
+#if defined(USE_LOGDEPTHBUF)
+    gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;
+#endif
 
     // Correct Y knowing image is -85 85
     vec2 vUv2 = vec2(vUv.x, clamp(vUv.y + (vUv.y - 0.5) * - 0.45, 0., 1.));
@@ -50,4 +42,4 @@ void main()
         float light = min(2. * dot(vNormal, lightPosition),1.); //normalize(pos.xyz)
         gl_FragColor.a *= -light;
     }
-}
+}

src/Core/Prefab/GlobeView.js

@@ -79,14 +79,6 @@ class GlobeView extends View {
      * }
      * var view = new itowns.GlobeView(viewerDiv, placement);
      *
-     * @example <caption><b>Enable WebGl 1.0 instead of WebGl 2.0.</b></caption>
-     * var viewerDiv = document.getElementById('viewerDiv');
-     * const placement = {
-     *     coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
-     *     range: 25000000,
-     * }
-     * var view = new itowns.GlobeView(viewerDiv, placement, {  renderer: { isWebGL2: false } });
-     *
      * @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
      * in the DOM.
      * @param {CameraTransformOptions|Extent} placement - An object to place view

src/Core/Prefab/PlanarView.js

@@ -11,11 +11,6 @@ class PlanarView extends View {
      * @constructor
      * @extends View
      *
-     * @example <caption><b>Enable WebGl 1.0 instead of WebGl 2.0.</b></caption>
-     * var viewerDiv = document.getElementById('viewerDiv');
-     * const extent = new Extent('EPSG:3946', 1837816.94334, 1847692.32501, 5170036.4587, 5178412.82698);
-     * var view = new itowns.PlanarView(viewerDiv, extent, {  renderer: { isWebGL2: false } });
-     *
      * @example <caption><b>Instance with placement on the ground.</b></caption>
      * var viewerDiv = document.getElementById('viewerDiv');
      * const extent = new Extent('EPSG:3946', 1837816.94334, 1847692.32501, 5170036.4587, 5178412.82698);

src/Core/Prefab/TileBuilder.js

@@ -56,12 +56,12 @@ export default function newTileGeometry(builder, params) {
         geometry.dispose = () => {
             geometry._count--;
             if (geometry._count <= 0) {
-                // To avoid remove index buffer and attribute buffer uv_0
+                // To avoid remove index buffer and attribute buffer uv
                 //  error un-bound buffer in webgl with VAO rendering.
                 // Could be removed if the attribute buffer deleting is
                 //  taken into account in the buffer binding state (in THREE.WebGLBindingStates code).
                 geometry.index = null;
-                delete geometry.attributes.uv_0;
+                delete geometry.attributes.uv;
                 THREE.BufferGeometry.prototype.dispose.call(geometry);
                 cacheTile.delete(south, params.level, bufferKey);
             }

src/Core/Prefab/computeBufferTileGeometry.js

@@ -11,7 +11,7 @@ export default function computeBuffers(params) {
         index: null,
         position: null,
         normal: null,
-        // 2 UV set per tile: wgs84 (uv_0) and pm (uv_1)
+        // 2 UV set per tile: wgs84 (uv[0]) and pm (uv[1])
         //    - wgs84: 1 texture per tile because tiles are using wgs84 projection
         //    - pm: use multiple textures per tile.
         //      +-------------------------+

src/Core/System/Capabilities.js

@@ -24,10 +24,6 @@ export default {
         return logDepthBufferSupported;
     },
     isFirefox,
-    isInternetExplorer() {
-        const internetExplorer = false || !!document.documentMode;
-        return internetExplorer;
-    },
     getMaxTextureUnitsCount() {
         return maxTexturesUnits;
     },

src/Core/TileGeometry.js

@@ -24,8 +24,9 @@ class TileGeometry extends THREE.BufferGeometry {
         this.setIndex(buffers.index);
         this.setAttribute('position', buffers.position);
         this.setAttribute('normal', buffers.normal);
+        this.setAttribute('uv', buffers.uvs[0]);
 
-        for (let i = 0; i < buffers.uvs.length; i++) {
+        for (let i = 1; i < buffers.uvs.length; i++) {
             this.setAttribute(`uv_${i}`, buffers.uvs[i]);
         }
 

src/Core/View.js

@@ -150,7 +150,6 @@ class View extends THREE.EventDispatcher {
      * a default one will be constructed. In this case, if options.renderer is an object, it will be used to
      * configure the renderer (see {@link c3DEngine}.  If not present, a new <canvas> will be created and
      * added to viewerDiv (mutually exclusive with mainLoop)
-     * @param {boolean} [options.renderer.isWebGL2=true] - enable webgl 2.0 for THREE.js.
      * @param {boolean|Object} [options.webXR=false] - enable webxr button to switch on VR visualization.
      * @param {number} [options.webXR.scale=1.0] - apply webxr scale tranformation.
      * @param {?Scene} [options.scene3D] - [THREE.Scene](https://threejs.org/docs/#api/en/scenes/Scene) instance to use, otherwise a default one will be constructed
@@ -357,9 +356,6 @@ class View extends THREE.EventDispatcher {
                 } else {
                     return layer._reject(new Error(`Cant add color layer ${layer.id}: the maximum layer is reached`));
                 }
-            } else if (layer.isElevationLayer && layer.source.format == 'image/x-bil;bits=32') {
-                layer.source.networkOptions.isWebGL2 = this.renderer?.capabilities?.isWebGL2;
-                parentLayer.attach(layer);
             } else {
                 parentLayer.attach(layer);
             }

src/Provider/Fetcher.js

@@ -1,4 +1,4 @@
-import { TextureLoader, DataTexture, RedFormat, FloatType, AlphaFormat } from 'three';
+import { TextureLoader, DataTexture, RedFormat, FloatType } from 'three';
 
 const textureLoader = new TextureLoader();
 const SIZE_TEXTURE_TILE = 256;
@@ -15,16 +15,11 @@ const arrayBuffer = (url, options = {}) => fetch(url, options).then((response) =
     return response.arrayBuffer();
 });
 
-function getTextureFloat(buffer, isWebGL2 = true) {
-    if (isWebGL2) {
-        const texture = new DataTexture(buffer, SIZE_TEXTURE_TILE, SIZE_TEXTURE_TILE, RedFormat, FloatType);
-        texture.internalFormat = 'R32F';
-        texture.needsUpdate = true;
-        return texture;
-    } else {
-        const texture = new DataTexture(buffer, SIZE_TEXTURE_TILE, SIZE_TEXTURE_TILE, AlphaFormat, FloatType);
-        return texture;
-    }
+function getTextureFloat(buffer) {
+    const texture = new DataTexture(buffer, SIZE_TEXTURE_TILE, SIZE_TEXTURE_TILE, RedFormat, FloatType);
+    texture.internalFormat = 'R32F';
+    texture.needsUpdate = true;
+    return texture;
 }
 
 /**
@@ -138,7 +133,7 @@ export default {
     textureFloat(url, options = {}) {
         return arrayBuffer(url, options).then((buffer) => {
             const floatArray = new Float32Array(buffer);
-            const texture = getTextureFloat(floatArray, options.isWebGL2);
+            const texture = getTextureFloat(floatArray);
             return texture;
         });
     },

src/Renderer/LayeredMaterial.js

@@ -95,7 +95,7 @@ export const ELEVATION_MODES = {
 
 let nbSamplers;
 const fragmentShader = [];
-class LayeredMaterial extends THREE.RawShaderMaterial {
+class LayeredMaterial extends THREE.ShaderMaterial {
     #_visible = true;
     constructor(options = {}, crsCount) {
         super(options);
@@ -104,6 +104,8 @@ class LayeredMaterial extends THREE.RawShaderMaterial {
 
         this.defines.NUM_VS_TEXTURES = nbSamplers[0];
         this.defines.NUM_FS_TEXTURES = nbSamplers[1];
+        // TODO: We do not use the fog from the scene, is this a desired
+        // behavior?
         this.defines.USE_FOG = 1;
         this.defines.NUM_CRS = crsCount;
 
@@ -122,12 +124,9 @@ class LayeredMaterial extends THREE.RawShaderMaterial {
             CommonMaterial.setUniformProperty(this, 'outlineColors', outlineColors);
         }
 
-        if (Capabilities.isLogDepthBufferSupported()) {
-            this.defines.USE_LOGDEPTHBUF = 1;
-            this.defines.USE_LOGDEPTHBUF_EXT = 1;
-        }
-
         this.vertexShader = TileVS;
+        // three loop unrolling of ShaderMaterial only supports integer bounds,
+        // see https://github.com/mrdoob/three.js/issues/28020
         fragmentShader[crsCount] = fragmentShader[crsCount] || ShaderUtils.unrollLoops(TileFS, this.defines);
         this.fragmentShader = fragmentShader[crsCount];
 
@@ -192,13 +191,6 @@ class LayeredMaterial extends THREE.RawShaderMaterial {
         });
     }
 
-    onBeforeCompile(shader, renderer) {
-        if (renderer.capabilities.isWebGL2) {
-            this.defines.WEBGL2 = true;
-            shader.glslVersion = '300 es';
-        }
-    }
-
     getUniformByType(type) {
         return {
             layers: this.uniforms[`${type}Layers`],

src/Renderer/OrientedImageMaterial.js

@@ -14,7 +14,7 @@ const noMask = new THREE.DataTexture(new Uint8Array([255, 255, 255, 255]), 1, 1,
 noMask.needsUpdate = true;
 const noTexture = new THREE.Texture();
 
-const rawShaderMaterial = new THREE.RawShaderMaterial();
+const shaderMaterial = new THREE.ShaderMaterial();
 /**
  * @classdesc OrientedImageMaterial is a custom shader material used to do projective texture mapping.<br/>
  *
@@ -33,7 +33,7 @@ const rawShaderMaterial = new THREE.RawShaderMaterial();
  * <br/>
  * To get a more comprehensive support of camera Micmac models, you can consider using [three-photogrammetric-camera]{@link https://github.com/mbredif/three-photogrammetric-camera} instead.
  */
-class OrientedImageMaterial extends THREE.RawShaderMaterial {
+class OrientedImageMaterial extends THREE.ShaderMaterial {
     /**
      * @constructor
      * @param { OrientedImageCamera[]} cameras - Array of {@link OrientedImageCamera}. Each camera will project a texture.
@@ -57,17 +57,17 @@ class OrientedImageMaterial extends THREE.RawShaderMaterial {
         options.transparent = options.transparent ?? true;
         options.opacity = options.opacity ?? 1;
 
-        // Filter the rawShaderMaterial options
-        const rawShaderMaterialOptions = {};
+        // Filter out non-ShaderMaterial options
+        const shaderMaterialOptions = {};
         for (const key in options) {
             if (Object.prototype.hasOwnProperty.call(options, key)) {
-                const currentValue = rawShaderMaterial[key];
+                const currentValue = shaderMaterial[key];
                 if (currentValue !== undefined) {
-                    rawShaderMaterialOptions[key] = options[key];
+                    shaderMaterialOptions[key] = options[key];
                 }
             }
         }
-        super(rawShaderMaterialOptions);
+        super(shaderMaterialOptions);
 
         this.defines.ORIENTED_IMAGES_COUNT = options.OrientedImagesCount ?? cameras.length;
 
@@ -118,22 +118,12 @@ class OrientedImageMaterial extends THREE.RawShaderMaterial {
             opacity: 0.75,
         });
 
-        if (Capabilities.isLogDepthBufferSupported()) {
-            this.defines.USE_LOGDEPTHBUF = 1;
-            this.defines.USE_LOGDEPTHBUF_EXT = 1;
-        }
-
         this.vertexShader = textureVS;
+        // three loop unrolling of ShaderMaterial only supports integer bounds,
+        // see https://github.com/mrdoob/three.js/issues/28020
         this.fragmentShader = ShaderUtils.unrollLoops(textureFS, this.defines);
     }
 
-    onBeforeCompile(shader, renderer) {
-        if (renderer.capabilities.isWebGL2) {
-            this.defines.WEBGL2 = true;
-            shader.glslVersion = '300 es';
-        }
-    }
-
     /**
      * Set new textures and new position/orientation of the camera set.
      * @param {THREE.Texture} textures - Array of [THREE.Texture]{@link https://threejs.org/docs/#api/en/textures/Texture}.

src/Renderer/PointsMaterial.js

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 import PointsVS from 'Renderer/Shader/PointsVS.glsl';
 import PointsFS from 'Renderer/Shader/PointsFS.glsl';
-import Capabilities from 'Core/System/Capabilities';
 import ShaderUtils from 'Renderer/Shader/ShaderUtils';
 import CommonMaterial from 'Renderer/CommonMaterial';
 import Gradients from 'Utils/Gradients';
@@ -153,7 +152,7 @@ function recomputeTexture(scheme, texture, nbClass) {
     texture.needsUpdate = true;
 }
 
-class PointsMaterial extends THREE.RawShaderMaterial {
+class PointsMaterial extends THREE.ShaderMaterial {
     /**
      * @class      PointsMaterial
      * @param      {object}  [options={}]  The options
@@ -287,16 +286,13 @@ class PointsMaterial extends THREE.RawShaderMaterial {
             this.defines.DEBUG_ALPHA_BORDER = oiMaterial.defines.DEBUG_ALPHA_BORDER;
             this.defines.USE_TEXTURES_PROJECTIVE = true;
             this.defines.USE_BASE_MATERIAL = true;
+            // three loop unrolling of ShaderMaterial only supports integer
+            // bounds, see https://github.com/mrdoob/three.js/issues/28020
             this.fragmentShader = ShaderUtils.unrollLoops(PointsFS, this.defines);
         } else {
             this.fragmentShader = PointsFS;
         }
 
-        if (Capabilities.isLogDepthBufferSupported()) {
-            this.defines.USE_LOGDEPTHBUF = 1;
-            this.defines.USE_LOGDEPTHBUF_EXT = 1;
-        }
-
         if (__DEBUG__) {
             this.defines.DEBUG = 1;
         }
@@ -318,13 +314,6 @@ class PointsMaterial extends THREE.RawShaderMaterial {
         });
     }
 
-    onBeforeCompile(shader, renderer) {
-        if (renderer.capabilities.isWebGL2) {
-            this.defines.WEBGL2 = true;
-            shader.glslVersion = '300 es';
-        }
-    }
-
     copy(source) {
         super.copy(source);
         if (source.uniforms.projectiveTextureAlphaBorder) {

src/Renderer/Shader/Chunk/elevation_pars_vertex.glsl

@@ -25,15 +25,13 @@
         if (mode == ELEVATION_RGBA)
             return decode32(texture2D( tex, uv ).abgr * 255.0);
         if (mode == ELEVATION_DATA || mode == ELEVATION_COLOR)
-        #if defined(WEBGL2)
             return texture2D( tex, uv ).r;
-        #else
-            return texture2D( tex, uv ).w;
-        #endif
         return 0.;
     }
 
     float getElevation(vec2 uv, sampler2D tex, vec4 offsetScale, Layer layer) {
+        // Elevation textures are inverted along the y-axis
+        uv = vec2(uv.x, 1.0 - uv.y);
         uv = uv * offsetScale.zw + offsetScale.xy;
         float d = clamp(getElevationMode(uv, tex, layer.mode), layer.zmin, layer.zmax);
         return d * layer.scale + layer.bias;

src/Renderer/Shader/Chunk/mode_depth_fragment.glsl

@@ -1,6 +1,6 @@
-#if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)
+#if defined(USE_LOGDEPTHBUF)
 gl_FragColor = packDepthToRGBA(gl_FragDepthEXT);
 #else
 float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;
 gl_FragColor = packDepthToRGBA(fragCoordZ);
-#endif
+#endif

src/Renderer/Shader/PointsFS.glsl

@@ -1,4 +1,3 @@
-#include <itowns/WebGL2_pars_fragment>
 #include <itowns/precision_qualifier>
 #include <logdepthbuf_pars_fragment>
 #if defined(USE_TEXTURES_PROJECTIVE)