Update ArcLayer, LineLayer, PolygonLayer to GLSL 300

Author: Don McCurdy

modules/extensions/src/fill-style/shaders.glsl.ts

@@ -17,16 +17,16 @@ const patternVs = `
   #define FILL_PATTERN_OFFSET_ATTRIB instanceFillPatternOffsets
 #endif
 
-attribute vec4 FILL_PATTERN_FRAME_ATTRIB;
-attribute float FILL_PATTERN_SCALE_ATTRIB;
-attribute vec2 FILL_PATTERN_OFFSET_ATTRIB;
+in vec4 FILL_PATTERN_FRAME_ATTRIB;
+in float FILL_PATTERN_SCALE_ATTRIB;
+in vec2 FILL_PATTERN_OFFSET_ATTRIB;
 
 uniform bool fill_patternEnabled;
 uniform vec2 fill_patternTextureSize;
 
-varying vec2 fill_uv;
-varying vec4 fill_patternBounds;
-varying vec4 fill_patternPlacement;
+out vec2 fill_uv;
+out vec4 fill_patternBounds;
+out vec4 fill_patternPlacement;
 `;
 
 const patternFs = `
@@ -36,9 +36,9 @@ uniform sampler2D fill_patternTexture;
 uniform vec2 fill_uvCoordinateOrigin;
 uniform vec2 fill_uvCoordinateOrigin64Low;
 
-varying vec4 fill_patternBounds;
-varying vec4 fill_patternPlacement;
-varying vec2 fill_uv;
+in vec4 fill_patternBounds;
+in vec4 fill_patternPlacement;
+in vec2 fill_uv;
 
 const float FILL_UV_SCALE = 512.0 / 40000000.0;
 `;
@@ -64,7 +64,7 @@ const inject = {
 
       vec2 texCoords = fill_patternBounds.xy + fill_patternBounds.zw * patternUV;
 
-      vec4 patternColor = texture2D(fill_patternTexture, texCoords);
+      vec4 patternColor = texture(fill_patternTexture, texCoords);
       color.a *= patternColor.a;
       if (!fill_patternMask) {
         color.rgb = patternColor.rgb;

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

@@ -19,22 +19,25 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME arc-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
-varying vec2 uv;
-varying float isValid;
+in vec4 vColor;
+in vec2 uv;
+in float isValid;
+
+out vec4 fragColor;
 
 void main(void) {
   if (isValid == 0.0) {
     discard;
   }
 
-  gl_FragColor = vColor;
+  fragColor = vColor;
   geometry.uv = uv;
 
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

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

@@ -19,19 +19,20 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME arc-layer-vertex-shader
 
-attribute vec3 positions;
-attribute vec4 instanceSourceColors;
-attribute vec4 instanceTargetColors;
-attribute vec3 instanceSourcePositions;
-attribute vec3 instanceSourcePositions64Low;
-attribute vec3 instanceTargetPositions;
-attribute vec3 instanceTargetPositions64Low;
-attribute vec3 instancePickingColors;
-attribute float instanceWidths;
-attribute float instanceHeights;
-attribute float instanceTilts;
+in vec3 positions;
+in vec4 instanceSourceColors;
+in vec4 instanceTargetColors;
+in vec3 instanceSourcePositions;
+in vec3 instanceSourcePositions64Low;
+in vec3 instanceTargetPositions;
+in vec3 instanceTargetPositions64Low;
+in vec3 instancePickingColors;
+in float instanceWidths;
+in float instanceHeights;
+in float instanceTilts;
 
 uniform bool greatCircle;
 uniform bool useShortestPath;
@@ -42,9 +43,9 @@ uniform float widthMinPixels;
 uniform float widthMaxPixels;
 uniform int widthUnits;
 
-varying vec4 vColor;
-varying vec2 uv;
-varying float isValid;
+out vec4 vColor;
+out vec2 uv;
+out float isValid;
 
 float paraboloid(float distance, float sourceZ, float targetZ, float ratio) {
   // d: distance on the xy plane

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

@@ -19,18 +19,21 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME line-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
-varying vec2 uv;
+in vec4 vColor;
+in vec2 uv;
+
+out vec4 fragColor;
 
 void main(void) {
   geometry.uv = uv;
 
-  gl_FragColor = vColor;
+  fragColor = vColor;
 
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

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

@@ -19,16 +19,17 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME line-layer-vertex-shader
 
-attribute vec3 positions;
-attribute vec3 instanceSourcePositions;
-attribute vec3 instanceTargetPositions;
-attribute vec3 instanceSourcePositions64Low;
-attribute vec3 instanceTargetPositions64Low;
-attribute vec4 instanceColors;
-attribute vec3 instancePickingColors;
-attribute float instanceWidths;
+in vec3 positions;
+in vec3 instanceSourcePositions;
+in vec3 instanceTargetPositions;
+in vec3 instanceSourcePositions64Low;
+in vec3 instanceTargetPositions64Low;
+in vec4 instanceColors;
+in vec3 instancePickingColors;
+in float instanceWidths;
 
 uniform float opacity;
 uniform float widthScale;
@@ -37,8 +38,8 @@ uniform float widthMaxPixels;
 uniform float useShortestPath;
 uniform int widthUnits;
 
-varying vec4 vColor;
-varying vec2 uv;
+out vec4 vColor;
+out vec2 uv;
 
 // offset vector by strokeWidth pixels
 // offset_direction is -1 (left) or 1 (right)

modules/layers/src/solid-polygon-layer/solid-polygon-layer-fragment.glsl.ts

@@ -19,15 +19,18 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME solid-polygon-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
+in vec4 vColor;
+
+out vec4 fragColor;
 
 void main(void) {
-  gl_FragColor = vColor;
+  fragColor = vColor;
 
-  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+  DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-main.glsl.ts

@@ -25,7 +25,7 @@ uniform bool isWireframe;
 uniform float elevationScale;
 uniform float opacity;
 
-varying vec4 vColor;
+out vec4 vColor;
 
 struct PolygonProps {
   vec4 fillColors;

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-side.glsl.ts

@@ -21,19 +21,20 @@
 import main from './solid-polygon-layer-vertex-main.glsl';
 
 export default `\
+#version 300 es
 #define SHADER_NAME solid-polygon-layer-vertex-shader-side
 
-attribute vec2 positions;
+in vec2 positions;
 
-attribute vec3 instancePositions;
-attribute vec3 instanceNextPositions;
-attribute vec3 instancePositions64Low;
-attribute vec3 instanceNextPositions64Low;
-attribute float instanceElevations;
-attribute vec4 instanceFillColors;
-attribute vec4 instanceLineColors;
-attribute vec3 instancePickingColors;
-attribute float instanceVertexValid;
+in vec3 instancePositions;
+in vec3 instanceNextPositions;
+in vec3 instancePositions64Low;
+in vec3 instanceNextPositions64Low;
+in float instanceElevations;
+in vec4 instanceFillColors;
+in vec4 instanceLineColors;
+in vec3 instancePickingColors;
+in float instanceVertexValid;
 
 ${main}
 

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-top.glsl.ts

@@ -21,14 +21,15 @@
 import main from './solid-polygon-layer-vertex-main.glsl';
 
 export default `\
+#version 300 es
 #define SHADER_NAME solid-polygon-layer-vertex-shader
 
-attribute vec3 vertexPositions;
-attribute vec3 vertexPositions64Low;
-attribute float elevations;
-attribute vec4 fillColors;
-attribute vec4 lineColors;
-attribute vec3 pickingColors;
+in vec3 vertexPositions;
+in vec3 vertexPositions64Low;
+in float elevations;
+in vec4 fillColors;
+in vec4 lineColors;
+in vec3 pickingColors;
 
 ${main}