fix: Convert WebGL1 shaders to WebGL2

CHANGELOG.md

@@ -5,12 +5,14 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+
 - Fix smooth mouse wheel zooming ([#5154](https://github.com/maplibre/maplibre-gl-js/pull/5154))
 - ⚠️ Change drag rotate behavior to be less abrupt around the center ([#5104](https://github.com/maplibre/maplibre-gl-js/pull/5104))
 - Fix regression in render world copies ([#5101](https://github.com/maplibre/maplibre-gl-js/pull/5101))
 - Fix unwanted roll when motion is interrupted ([#5083](https://github.com/maplibre/maplibre-gl-js/pull/5083))
 - Fix `geometry-type` filter expression results ([#5132](https://github.com/maplibre/maplibre-gl-js/pull/5132))
 - Fix easeTo not applying padding in globe projection ([#5134](https://github.com/maplibre/maplibre-gl-js/pull/5134))
+- Convert WebGL1 shaders to WebGL2 ([#5166](https://github.com/maplibre/maplibre-gl-js/pull/5166))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.8

src/shaders/atmosphere.fragment.glsl

@@ -164,5 +164,5 @@ void main() {
 
     vec4 no_effect_color = vec4(0, 0, 0, 0);
 
-    gl_FragColor = mix(color, no_effect_color, 1.0 - u_atmosphere_blend);
+    fragColor = mix(color, no_effect_color, 1.0 - u_atmosphere_blend);
 }

src/shaders/raster.vertex.glsl

@@ -10,7 +10,7 @@ out vec2 v_pos0;
 out vec2 v_pos1;
 
 void main() {
-    // Attribute a_pos always forms a (sometimes subdivided) quad in 0..EXTENT, but actual corner coords may be different.
+    // in a_pos always forms a (sometimes subdivided) quad in 0..EXTENT, but actual corner coords may be different.
     // Interpolate the actual desired coordinates to get the final position.
     vec2 fractionalPos = a_pos / 8192.0;
     vec2 position = mix(mix(u_coords_top.xy, u_coords_top.zw, fractionalPos.x), mix(u_coords_bottom.xy, u_coords_bottom.zw, fractionalPos.x), fractionalPos.y);

src/shaders/sky.fragment.glsl

@@ -12,10 +12,10 @@ void main() {
     float blend = (y - u_horizon.y) * u_horizon_normal.y + (x - u_horizon.x) * u_horizon_normal.x;
     if (blend > 0.0) {
         if (blend < u_sky_horizon_blend) {
-            gl_FragColor = mix(u_sky_color, u_horizon_color, pow(1.0 - blend / u_sky_horizon_blend, 2.0));
+            fragColor = mix(u_sky_color, u_horizon_color, pow(1.0 - blend / u_sky_horizon_blend, 2.0));
         } else {
-            gl_FragColor = u_sky_color;
+            fragColor = u_sky_color;
         }
     }
-    gl_FragColor = mix(gl_FragColor, vec4(vec3(0.0), 0.0), u_sky_blend);
-}
+    fragColor = mix(fragColor, vec4(vec3(0.0), 0.0), u_sky_blend);
+}

src/shaders/sky.vertex.glsl

@@ -1,5 +1,5 @@
-attribute vec2 a_pos;
+in vec2 a_pos;
 
 void main() {
     gl_Position = vec4(a_pos, 1.0, 1.0);
-}
+}

src/shaders/terrain.fragment.glsl

@@ -21,15 +21,15 @@ vec4 linearToGamma(vec4 color) {
 
 void main() {
     vec4 surface_color = texture(u_texture, vec2(v_texture_pos.x, 1.0 - v_texture_pos.y));
-    
+
     // Skip fog blending in globe mode
     if (!u_is_globe_mode && v_fog_depth > u_fog_ground_blend) {
         vec4 surface_color_linear = gammaToLinear(surface_color);
         float blend_color = smoothstep(0.0, 1.0, max((v_fog_depth - u_horizon_fog_blend) / (1.0 - u_horizon_fog_blend), 0.0));
         vec4 fog_horizon_color_linear = mix(gammaToLinear(u_fog_color), gammaToLinear(u_horizon_color), blend_color);
         float factor_fog = max(v_fog_depth - u_fog_ground_blend, 0.0) / (1.0 - u_fog_ground_blend);
-        gl_FragColor = linearToGamma(mix(surface_color_linear, fog_horizon_color_linear, pow(factor_fog, 2.0) * u_fog_ground_blend_opacity));
+        fragColor = linearToGamma(mix(surface_color_linear, fog_horizon_color_linear, pow(factor_fog, 2.0) * u_fog_ground_blend_opacity));
     } else {
-        gl_FragColor = surface_color;
+        fragColor = surface_color;
     }
 }

src/shaders/terrain_coords.vertex.glsl

@@ -1,4 +1,4 @@
-attribute vec3 a_pos3d;
+in vec3 a_pos3d;
 
 uniform float u_ele_delta;
 
@@ -9,4 +9,4 @@ void main() {
     float ele_delta = a_pos3d.z == 1.0 ? u_ele_delta : 0.0;
     v_texture_pos = a_pos3d.xy / 8192.0;
     gl_Position = projectTileFor3D(a_pos3d.xy, ele - ele_delta);
-}
+}

src/shaders/terrain_depth.vertex.glsl

@@ -1,4 +1,4 @@
-attribute vec3 a_pos3d;
+in vec3 a_pos3d;
 
 uniform float u_ele_delta;
 
@@ -9,4 +9,4 @@ void main() {
     float ele_delta = a_pos3d.z == 1.0 ? u_ele_delta : 0.0;
     gl_Position = projectTileFor3D(a_pos3d.xy, ele - ele_delta);
     v_depth = gl_Position.z / gl_Position.w;
-}
+}