Update BitmapLayer, IconLayer, PointCloudLayer, TripsLayer to GLSL 300

Author: Don McCurdy

modules/geo-layers/src/trips-layer/trips-layer.ts

@@ -68,9 +68,9 @@ export default class TripsLayer<DataT = any, ExtraProps extends {} = {}> extends
     shaders.inject = {
       'vs:#decl': `\
 uniform float trailLength;
-attribute float instanceTimestamps;
-attribute float instanceNextTimestamps;
-varying float vTime;
+in float instanceTimestamps;
+in float instanceNextTimestamps;
+out float vTime;
 `,
       // Timestamp of the vertex
       'vs:#main-end': `\
@@ -80,7 +80,7 @@ vTime = instanceTimestamps + (instanceNextTimestamps - instanceTimestamps) * vPa
 uniform bool fadeTrail;
 uniform float trailLength;
 uniform float currentTime;
-varying float vTime;
+in float vTime;
 `,
       // Drop the segments outside of the time window
       'fs:#main-start': `\

modules/layers/src/bitmap-layer/bitmap-layer-fragment.ts

@@ -24,7 +24,8 @@ vec3 packUVsIntoRGB(vec2 uv) {
 }
 `;
 
-export default `
+export default `\
+#version 300 es
 #define SHADER_NAME bitmap-layer-fragment-shader
 
 #ifdef GL_ES
@@ -33,8 +34,10 @@ precision highp float;
 
 uniform sampler2D bitmapTexture;
 
-varying vec2 vTexCoord;
-varying vec2 vTexPos;
+in vec2 vTexCoord;
+in vec2 vTexPos;
+
+out vec4 fragColor;
 
 uniform float desaturate;
 uniform vec4 transparentColor;
@@ -109,16 +112,16 @@ void main(void) {
     vec2 commonPos = lnglat_to_mercator(vTexPos);
     uv = getUV(commonPos);
   }
-  vec4 bitmapColor = texture2D(bitmapTexture, uv);
+  vec4 bitmapColor = texture(bitmapTexture, uv);
 
-  gl_FragColor = apply_opacity(color_tint(color_desaturate(bitmapColor.rgb)), bitmapColor.a * opacity);
+  fragColor = apply_opacity(color_tint(color_desaturate(bitmapColor.rgb)), bitmapColor.a * opacity);
 
   geometry.uv = uv;
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 
   if (picking_uActive && !picking_uAttribute) {
     // Since instance information is not used, we can use picking color for pixel index
-    gl_FragColor.rgb = packUVsIntoRGB(uv);
+    fragColor.rgb = packUVsIntoRGB(uv);
   }
 }
 `;

modules/layers/src/bitmap-layer/bitmap-layer-vertex.ts

@@ -1,12 +1,13 @@
-export default `
+export default `\
+#version 300 es
 #define SHADER_NAME bitmap-layer-vertex-shader
 
-attribute vec2 texCoords;
-attribute vec3 positions;
-attribute vec3 positions64Low;
+in vec2 texCoords;
+in vec3 positions;
+in vec3 positions64Low;
 
-varying vec2 vTexCoord;
-varying vec2 vTexPos;
+out vec2 vTexCoord;
+out vec2 vTexPos;
 
 uniform float coordinateConversion;
 

modules/layers/src/icon-layer/icon-layer-fragment.glsl.ts

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME icon-layer-fragment-shader
 
 precision highp float;
@@ -27,15 +28,17 @@ uniform float opacity;
 uniform sampler2D iconsTexture;
 uniform float alphaCutoff;
 
-varying float vColorMode;
-varying vec4 vColor;
-varying vec2 vTextureCoords;
-varying vec2 uv;
+in float vColorMode;
+in vec4 vColor;
+in vec2 vTextureCoords;
+in vec2 uv;
+
+out vec4 fragColor;
 
 void main(void) {
   geometry.uv = uv;
 
-  vec4 texColor = texture2D(iconsTexture, vTextureCoords);
+  vec4 texColor = texture(iconsTexture, vTextureCoords);
 
   // if colorMode == 0, use pixel color from the texture
   // if colorMode == 1 or rendering picking buffer, use texture as transparency mask
@@ -47,7 +50,7 @@ void main(void) {
     discard;
   }
 
-  gl_FragColor = vec4(color, a);
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  fragColor = vec4(color, a);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

modules/layers/src/icon-layer/icon-layer-vertex.glsl.ts

@@ -19,20 +19,21 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME icon-layer-vertex-shader
 
-attribute vec2 positions;
+in vec2 positions;
 
-attribute vec3 instancePositions;
-attribute vec3 instancePositions64Low;
-attribute float instanceSizes;
-attribute float instanceAngles;
-attribute vec4 instanceColors;
-attribute vec3 instancePickingColors;
-attribute vec4 instanceIconFrames;
-attribute float instanceColorModes;
-attribute vec2 instanceOffsets;
-attribute vec2 instancePixelOffset;
+in vec3 instancePositions;
+in vec3 instancePositions64Low;
+in float instanceSizes;
+in float instanceAngles;
+in vec4 instanceColors;
+in vec3 instancePickingColors;
+in vec4 instanceIconFrames;
+in float instanceColorModes;
+in vec2 instanceOffsets;
+in vec2 instancePixelOffset;
 
 uniform float sizeScale;
 uniform vec2 iconsTextureDim;
@@ -41,10 +42,10 @@ uniform float sizeMaxPixels;
 uniform bool billboard;
 uniform int sizeUnits;
 
-varying float vColorMode;
-varying vec4 vColor;
-varying vec2 vTextureCoords;
-varying vec2 uv;
+out float vColorMode;
+out vec4 vColor;
+out vec2 vTextureCoords;
+out vec2 uv;
 
 vec2 rotate_by_angle(vec2 vertex, float angle) {
   float angle_radian = angle * PI / 180.0;

modules/layers/src/point-cloud-layer/point-cloud-layer-fragment.glsl.ts

@@ -19,12 +19,15 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME point-cloud-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
-varying vec2 unitPosition;
+in vec4 vColor;
+in vec2 unitPosition;
+
+out vec4 fragColor;
 
 void main(void) {
   geometry.uv = unitPosition;
@@ -35,7 +38,7 @@ void main(void) {
     discard;
   }
 
-  gl_FragColor = vColor;
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  fragColor = vColor;
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

modules/layers/src/point-cloud-layer/point-cloud-layer-vertex.glsl.ts

@@ -19,21 +19,22 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME point-cloud-layer-vertex-shader
 
-attribute vec3 positions;
-attribute vec3 instanceNormals;
-attribute vec4 instanceColors;
-attribute vec3 instancePositions;
-attribute vec3 instancePositions64Low;
-attribute vec3 instancePickingColors;
+in vec3 positions;
+in vec3 instanceNormals;
+in vec4 instanceColors;
+in vec3 instancePositions;
+in vec3 instancePositions64Low;
+in vec3 instancePickingColors;
 
 uniform float opacity;
 uniform float radiusPixels;
 uniform int sizeUnits;
 
-varying vec4 vColor;
-varying vec2 unitPosition;
+out vec4 vColor;
+out vec2 unitPosition;
 
 void main(void) {
   geometry.worldPosition = instancePositions;

modules/layers/src/text-layer/multi-icon-layer/multi-icon-layer-fragment.glsl.ts

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME multi-icon-layer-fragment-shader
 
 precision highp float;
@@ -32,9 +33,11 @@ uniform float sdfBuffer;
 uniform float outlineBuffer;
 uniform vec4 outlineColor;
 
-varying vec4 vColor;
-varying vec2 vTextureCoords;
-varying vec2 uv;
+in vec4 vColor;
+in vec2 vTextureCoords;
+in vec2 uv;
+
+out vec4 fragColor;
 
 void main(void) {
   geometry.uv = uv;
@@ -63,9 +66,9 @@ void main(void) {
       discard;
     }
 
-    gl_FragColor = vec4(color.rgb, a * opacity);
+    fragColor = vec4(color.rgb, a * opacity);
   }
 
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;