feat(examples): Port remaining shaders to GLSL 300 ES

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js

@@ -19,19 +19,21 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME bezier-curve-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
+in vec4 vColor;
+out vec4 fragColor;
 
 void main(void) {
-  gl_FragColor = vColor;
+  fragColor = vColor;
 
   // use highlight color if this fragment belongs to the selected object.
-  gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+  fragColor = picking_filterHighlightColor(fragColor);
 
   // use picking color if rendering to picking FBO.
-  gl_FragColor = picking_filterPickingColor(gl_FragColor);
+  fragColor = picking_filterPickingColor(fragColor);
 }
 `;

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js

@@ -19,20 +19,21 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME bezier-curve-layer-vertex-shader
 
-attribute vec3 positions;
-attribute vec3 instanceSourcePositions;
-attribute vec3 instanceTargetPositions;
-attribute vec3 instanceControlPoints;
-attribute vec4 instanceColors;
-attribute vec3 instancePickingColors;
+in vec3 positions;
+in vec3 instanceSourcePositions;
+in vec3 instanceTargetPositions;
+in vec3 instanceControlPoints;
+in vec4 instanceColors;
+in vec3 instancePickingColors;
 
 uniform float numSegments;
 uniform float strokeWidth;
 uniform float opacity;
 
-varying vec4 vColor;
+out vec4 vColor;
 
 // offset vector by strokeWidth pixels
 // offset_direction is -1 (left) or 1 (right)

showcases/ascii/ascii-layer/ascii-filter.js

@@ -3,21 +3,22 @@ import GL from '@luma.gl/constants';
 import {sortCharactersByBrightness} from './utils';
 
 const vs = `
+#version 300 es
 #define SHADER_NAME feedback-vertex-shader
 
 uniform sampler2D video;
 uniform sampler2D pixelMapTexture;
-attribute vec2 uv;
+in vec2 uv;
 
-varying vec4 instanceIconFrames;
-varying vec4 instanceColors;
+out vec4 instanceIconFrames;
+out vec4 instanceColors;
 
 float bitColor(float x) {
   return floor(x * 4. + 0.5) * 64.;
 }
 
 void main(void) {
-  vec4 pixel = texture2D(video, uv);
+  vec4 pixel = texture(video, uv);
   float luminance = 0.2126 * pixel.r + 0.7152 * pixel.g + 0.0722 * pixel.b;
 
   instanceColors = vec4(
@@ -27,22 +28,24 @@ void main(void) {
     255.0
   );
 
-  instanceIconFrames = texture2D(pixelMapTexture, vec2(luminance + 0.5 / 256., 0.5));
+  instanceIconFrames = texture(pixelMapTexture, vec2(luminance + 0.5 / 256., 0.5));
 
   gl_Position = vec4(0.0);
 }
 `;
 
 const fs = `
+#version 300 es
 #define SHADER_NAME feedback-fragment-shader
 
 precision highp float;
 
-varying vec4 instanceIconFrames;
-varying vec4 instanceColors;
+in vec4 instanceIconFrames;
+in vec4 instanceColors;
+out vec4 fragColor;
 
 void main(void) {
-  gl_FragColor = vec4(0.0);
+  fragColor = vec4(0.0);
 }
 `;
 

showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-fragment.glsl.js

@@ -19,14 +19,16 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME delaunay-cover-fragment-shader
 
-varying vec4 vPosition;
-varying vec4 vNormal;
-varying vec4 vColor;
+in vec4 vPosition;
+in vec4 vNormal;
+in vec4 vColor;
+out vec4 fragColor;
 
 void main(void) {
   float lightWeight = getLightWeight(vPosition.xyz, vNormal.xzy);
-  gl_FragColor = vec4(vColor.xyz * lightWeight, vColor.a);
+  fragColor = vec4(vColor.xyz * lightWeight, vColor.a);
 }
 `;

showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-vertex.glsl.js

@@ -19,18 +19,19 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME delaunay-cover-vertex-shader
 #define HEIGHT_FACTOR 25.
 
 uniform vec2 bounds;
 
-attribute vec3 positions;
-attribute vec3 next;
-attribute vec3 next2;
+in vec3 positions;
+in vec3 next;
+in vec3 next2;
 
-varying vec4 vPosition;
-varying vec4 vNormal;
-varying vec4 vColor;
+out vec4 vPosition;
+out vec4 vNormal;
+out vec4 vColor;
 
 vec4 getWorldSpacePos(vec3 positions) {
   vec2 pos = project_position(positions.xy);

showcases/wind/src/layers/delaunay-interpolation/delaunay-interpolation-vertex.glsl.js

@@ -19,15 +19,16 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME delaunay-vertex-shader
 
 uniform vec4 bbox;
 uniform vec2 size;
 
-attribute vec3 positions;
-attribute vec3 data;
+in vec3 positions;
+in vec3 data;
 
-varying vec4 vColor;
+out vec4 vColor;
 
 void main(void) {
   float posX = mix(-1., 1., (positions.x - bbox.x) / (bbox.y - bbox.x));

showcases/wind/src/layers/elevation-layer/elevation-layer-fragment.glsl.js

@@ -1,11 +1,14 @@
 export default `\
+#version 300 es
 #define SHADER_NAME elevation-layer-fragment-shader
 
 uniform vec2 elevationRange;
 
-varying float lightWeight;
-varying vec3 vNormal;
-varying float vAltitude;
+in float lightWeight;
+in vec3 vNormal;
+in float vAltitude;
+
+out vec4 fragColor;
 
 void main() {
   if (vAltitude < -90.0) {
@@ -14,6 +17,6 @@ void main() {
 
   float opacity = smoothstep(elevationRange.x, elevationRange.y / 2.0, vAltitude) * 1.;
 
-  gl_FragColor = vec4(vec3(15./70., 26./70., 36./70.) * lightWeight, opacity);
+  fragColor = vec4(vec3(15./70., 26./70., 36./70.) * lightWeight, opacity);
 }
 `;

showcases/wind/src/layers/elevation-layer/elevation-layer-vertex.glsl.js

@@ -1,20 +1,21 @@
 export default `\
+#version 300 es
 #define SHADER_NAME elevation-layer-vertex-shader
 
 uniform sampler2D elevationTexture;
 uniform vec4 elevationBounds;
 uniform vec2 elevationRange;
 uniform float zScale;
 
-attribute vec3 positions;
+in vec3 positions;
 
-varying float lightWeight;
-varying vec3 vNormal;
-varying float vAltitude;
+out float lightWeight;
+out vec3 vNormal;
+out float vAltitude;
 
 vec3 getWorldPosition(vec2 lngLat) {
   vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy);
-  vec4 elevation = texture2D(elevationTexture, texCoords);
+  vec4 elevation = texture(elevationTexture, texCoords);
 
   float altitude = mix(elevationRange.x, elevationRange.y, elevation.r);
 

showcases/wind/src/layers/particle-layer/particle-layer-fragment.glsl.js

@@ -19,12 +19,14 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME particle-layer-fragment-shader
 
 precision highp float;
 
-varying vec4 vColor;
-varying float vAltitude;
+in vec4 vColor;
+in float vAltitude;
+out vec4 fragColor;
 
 void main(void) {
   // if (vColor.a < 0.07) {
@@ -38,6 +40,6 @@ void main(void) {
   if (false && length(diff) > 0.5) {
     discard;
   }
-  gl_FragColor = vColor;
+  fragColor = vColor;
 }
 `;

showcases/wind/src/layers/particle-layer/particle-layer-vertex.glsl.js

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME particle-layer-vertex-shader
 
 #define HEIGHT_FACTOR 25.
@@ -39,16 +40,16 @@ uniform vec4 elevationBounds;
 uniform vec2 elevationRange;
 uniform float zScale;
 
-attribute vec3 positions;
-attribute vec4 posFrom;
-// attribute vec3 vertices;
+in vec3 positions;
+in vec4 posFrom;
+// in vec3 vertices;
 
-varying vec4 vColor;
-varying float vAltitude;
+out vec4 vColor;
+out float vAltitude;
 
 float getAltitude(vec2 lngLat) {
   vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy);
-  vec4 elevation = texture2D(elevationTexture, texCoords);
+  vec4 elevation = texture(elevationTexture, texCoords);
 
   return mix(elevationRange.x, elevationRange.y, elevation.r);
 }
@@ -58,7 +59,7 @@ void main(void) {
   float x = (posFrom.x - bbox.x) / (bbox.y - bbox.x);
   float y = (posFrom.y - bbox.z) / (bbox.w - bbox.z);
   vec2 coord = vec2(x, 1. - y);
-  vec4 texel = mix(texture2D(dataFrom, coord), texture2D(dataTo, coord), delta);
+  vec4 texel = mix(texture(dataFrom, coord), texture(dataTo, coord), delta);
 
   vAltitude = getAltitude(posFrom.xy);
   //float wind = (texel.y - bounds1.x) / (bounds1.y - bounds1.x);

showcases/wind/src/layers/particle-layer/transform-feedback-vertex.glsl.js

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME particle-feedback-vertex-shader
 
 #define PI 3.1415926535
@@ -40,8 +41,8 @@ uniform vec2 bounds0;
 uniform vec2 bounds1;
 uniform vec2 bounds2;
 
-//attribute vec3 positions;
-attribute vec4 posFrom;
+//in vec3 positions;
+in vec4 posFrom;
 
 float rand(vec2 co){
   return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
@@ -52,8 +53,8 @@ void main(void) {
   float x = (posFrom.x - bbox.x) / (bbox.y - bbox.x);
   float y = (posFrom.y - bbox.z) / (bbox.w - bbox.z);
   vec2 coord = vec2(x, 1. - y);
-  vec4 texel1 = texture2D(dataFrom, coord);
-  vec4 texel2 = texture2D(dataTo, coord);
+  vec4 texel1 = texture(dataFrom, coord);
+  vec4 texel2 = texture(dataTo, coord);
   vec4 texel = mix(texel1, texel2, delta);
 
   // angle

showcases/wind/src/layers/wind-layer/wind-layer-fragment.js

@@ -19,12 +19,14 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME wind-layer-fragment-shader
 
-varying vec4 vPosition;
-varying vec4 vNormal;
-varying vec4 vColor;
-varying float vAltitude;
+in vec4 vPosition;
+in vec4 vNormal;
+in vec4 vColor;
+in float vAltitude;
+out vec4 fragColor;
 
 void main(void) {
   if (vColor.a == 0.) {
@@ -36,6 +38,6 @@ void main(void) {
   //   discard;
   // }
   float lightWeight = getLightWeight(vPosition.xyz, vNormal.xzy);
-  gl_FragColor = vec4(vColor.xyz * lightWeight, 1);
+  fragColor = vec4(vColor.xyz * lightWeight, 1);
 }
 `;

showcases/wind/src/layers/wind-layer/wind-layer-vertex.js

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 export default `\
+#version 300 es
 #define SHADER_NAME wind-layer-vertex-shader
 
 #define PI 3.1415926535
@@ -40,18 +41,18 @@ uniform vec2 bounds2;
 uniform vec4 elevationBounds;
 uniform vec2 elevationRange;
 
-attribute vec3 positions;
-attribute vec3 vertices;
-attribute vec3 normals;
+in vec3 positions;
+in vec3 vertices;
+in vec3 normals;
 
-varying vec4 vPosition;
-varying vec4 vNormal;
-varying vec4 vColor;
-varying float vAltitude;
+out vec4 vPosition;
+out vec4 vNormal;
+out vec4 vColor;
+out float vAltitude;
 
 float getAltitude(vec2 lngLat) {
   vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy);
-  vec4 elevation = texture2D(elevationTexture, texCoords);
+  vec4 elevation = texture(elevationTexture, texCoords);
 
   return mix(elevationRange.x, elevationRange.y, elevation.r);
 }
@@ -61,8 +62,8 @@ void main(void) {
   float x = (positions.x - bbox.x) / (bbox.y - bbox.x);
   float y = (positions.y - bbox.z) / (bbox.w - bbox.z);
   vec2 coord = vec2(x, 1. - y);
-  vec4 texel1 = texture2D(dataFrom, coord);
-  vec4 texel2 = texture2D(dataTo, coord);
+  vec4 texel1 = texture(dataFrom, coord);
+  vec4 texel2 = texture(dataTo, coord);
   vec4 texel = mix(texel1, texel2, delta);
 
   // angle