upgrade GLSL programs to WebGL2

Cesium-3D-Wind/glsl/calculateSpeed.frag

@@ -14,9 +14,10 @@ uniform vec2 vSpeedRange;
 uniform float pixelSize;
 uniform float speedFactor;
 
-float speedScaleFactor = speedFactor * pixelSize;
+float speedScaleFactor;
 
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
+out vec4 outputColor;
 
 vec2 mapPositionToNormalizedIndex2D(vec3 lonLatLev) {
     // ensure the range of longitude and latitude
@@ -45,7 +46,7 @@ vec2 mapPositionToNormalizedIndex2D(vec3 lonLatLev) {
 
 float getWindComponent(sampler2D componentTexture, vec3 lonLatLev) {
     vec2 normalizedIndex2D = mapPositionToNormalizedIndex2D(lonLatLev);
-    float result = texture2D(componentTexture, normalizedIndex2D).r;
+    float result = texture(componentTexture, normalizedIndex2D).r;
     return result;
 }
 
@@ -131,11 +132,13 @@ float calculateWindNorm(vec3 speed) {
 }
 
 void main() {
+    speedScaleFactor = speedFactor * pixelSize;
+
     // texture coordinate must be normalized
-    vec3 lonLatLev = texture2D(currentParticlesPosition, v_textureCoordinates).rgb;
+    vec3 lonLatLev = texture(currentParticlesPosition, v_textureCoordinates).rgb;
     vec3 speed = calculateSpeedByRungeKutta2(lonLatLev);
     vec3 speedInLonLat = convertSpeedUnitToLonLat(lonLatLev, speed);
 
     vec4 particleSpeed = vec4(speedInLonLat, calculateWindNorm(speed / speedScaleFactor));
-    gl_FragColor = particleSpeed;
+    outputColor = particleSpeed;
 }

Cesium-3D-Wind/glsl/fullscreen.vert

@@ -1,7 +1,7 @@
-attribute vec3 position;
-attribute vec2 st;
+in vec3 position;
+in vec2 st;
 
-varying vec2 textureCoordinate;
+out vec2 textureCoordinate;
 
 void main() {
     textureCoordinate = st;

Cesium-3D-Wind/glsl/postProcessingPosition.frag

@@ -9,7 +9,8 @@ uniform float randomCoefficient; // use to improve the pseudo-random generator
 uniform float dropRate; // drop rate is a chance a particle will restart at random position to avoid degeneration
 uniform float dropRateBump;
 
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
+out vec4 outputColor;
 
 // pseudo-random generator
 const vec3 randomConstants = vec3(12.9898, 78.233, 4375.85453);
@@ -34,8 +35,8 @@ bool particleOutbound(vec3 particle) {
 }
 
 void main() {
-    vec3 nextParticle = texture2D(nextParticlesPosition, v_textureCoordinates).rgb;
-    vec4 nextSpeed = texture2D(particlesSpeed, v_textureCoordinates);
+    vec3 nextParticle = texture(nextParticlesPosition, v_textureCoordinates).rgb;
+    vec4 nextSpeed = texture(particlesSpeed, v_textureCoordinates);
     float speedNorm = nextSpeed.a;
     float particleDropRate = dropRate + dropRateBump * speedNorm;
 
@@ -45,8 +46,8 @@ void main() {
     float randomNumber = rand(seed2, normalRange);
 
     if (randomNumber < particleDropRate || particleOutbound(nextParticle)) {
-        gl_FragColor = vec4(randomParticle, 1.0); // 1.0 means this is a random particle
+        outputColor = vec4(randomParticle, 1.0); // 1.0 means this is a random particle
     } else {
-        gl_FragColor = vec4(nextParticle, 0.0);
+        outputColor = vec4(nextParticle, 0.0);
     }
 }

Cesium-3D-Wind/glsl/screenDraw.frag

@@ -1,16 +1,17 @@
 uniform sampler2D trailsColorTexture;
 uniform sampler2D trailsDepthTexture;
 
-varying vec2 textureCoordinate;
+in vec2 textureCoordinate;
+out vec4 outputColor;
 
 void main() {
-    vec4 trailsColor = texture2D(trailsColorTexture, textureCoordinate);
-    float trailsDepth = texture2D(trailsDepthTexture, textureCoordinate).r;
-    float globeDepth = czm_unpackDepth(texture2D(czm_globeDepthTexture, textureCoordinate));
+    vec4 trailsColor = texture(trailsColorTexture, textureCoordinate);
+    float trailsDepth = texture(trailsDepthTexture, textureCoordinate).r;
+    float globeDepth = czm_unpackDepth(texture(czm_globeDepthTexture, textureCoordinate));
 
     if (trailsDepth < globeDepth) {
-        gl_FragColor = trailsColor;
+        outputColor = trailsColor;
     } else {
-        gl_FragColor = vec4(0.0);
+        outputColor = vec4(0.0);
     }
 }

Cesium-3D-Wind/glsl/segmentDraw.frag

@@ -1,4 +1,6 @@
+out vec4 outputColor;
+
 void main() {
     const vec4 white = vec4(1.0);
-    gl_FragColor = white;
+    outputColor = white;
 }

Cesium-3D-Wind/glsl/segmentDraw.vert

@@ -1,6 +1,6 @@
-attribute vec2 st;
+in vec2 st;
 // it is not normal itself, but used to control lines drawing
-attribute vec3 normal; // (point to use, offset sign, not used component)
+in vec3 normal; // (point to use, offset sign, not used component)
 
 uniform sampler2D previousParticlesPosition;
 uniform sampler2D currentParticlesPosition;
@@ -105,13 +105,13 @@ vec4 calculateOffsetOnMiterDirection(adjacentPoints projectedCoordinates, float
 void main() {
     vec2 particleIndex = st;
 
-    vec3 previousPosition = texture2D(previousParticlesPosition, particleIndex).rgb;
-    vec3 currentPosition = texture2D(currentParticlesPosition, particleIndex).rgb;
-    vec3 nextPosition = texture2D(postProcessingPosition, particleIndex).rgb;
+    vec3 previousPosition = texture(previousParticlesPosition, particleIndex).rgb;
+    vec3 currentPosition = texture(currentParticlesPosition, particleIndex).rgb;
+    vec3 nextPosition = texture(postProcessingPosition, particleIndex).rgb;
 
-    float isAnyRandomPointUsed = texture2D(postProcessingPosition, particleIndex).a +
-        texture2D(currentParticlesPosition, particleIndex).a +
-        texture2D(previousParticlesPosition, particleIndex).a;
+    float isAnyRandomPointUsed = texture(postProcessingPosition, particleIndex).a +
+        texture(currentParticlesPosition, particleIndex).a +
+        texture(previousParticlesPosition, particleIndex).a;
 
     adjacentPoints projectedCoordinates;
     if (isAnyRandomPointUsed > 0.0) {

Cesium-3D-Wind/glsl/trailDraw.frag

@@ -6,24 +6,25 @@ uniform sampler2D trailsDepthTexture;
 
 uniform float fadeOpacity;
 
-varying vec2 textureCoordinate;
+in vec2 textureCoordinate;
+out vec4 outputColor;
 
 void main() {
-    vec4 pointsColor = texture2D(segmentsColorTexture, textureCoordinate);
-    vec4 trailsColor = texture2D(currentTrailsColor, textureCoordinate);
+    vec4 pointsColor = texture(segmentsColorTexture, textureCoordinate);
+    vec4 trailsColor = texture(currentTrailsColor, textureCoordinate);
 
     trailsColor = floor(fadeOpacity * 255.0 * trailsColor) / 255.0; // make sure the trailsColor will be strictly decreased
 
-    float pointsDepth = texture2D(segmentsDepthTexture, textureCoordinate).r;
-    float trailsDepth = texture2D(trailsDepthTexture, textureCoordinate).r;
-    float globeDepth = czm_unpackDepth(texture2D(czm_globeDepthTexture, textureCoordinate));
+    float pointsDepth = texture(segmentsDepthTexture, textureCoordinate).r;
+    float trailsDepth = texture(trailsDepthTexture, textureCoordinate).r;
+    float globeDepth = czm_unpackDepth(texture(czm_globeDepthTexture, textureCoordinate));
 
-    gl_FragColor = vec4(0.0);
+    outputColor = vec4(0.0);
     if (pointsDepth < globeDepth) {
-        gl_FragColor = gl_FragColor + pointsColor;
+        outputColor = outputColor + pointsColor;
     }
     if (trailsDepth < globeDepth) {
-        gl_FragColor = gl_FragColor + trailsColor;
+        outputColor = outputColor + trailsColor;
     }
     gl_FragDepth = min(pointsDepth, trailsDepth);
 }

Cesium-3D-Wind/glsl/updatePosition.frag

@@ -1,13 +1,14 @@
 uniform sampler2D currentParticlesPosition; // (lon, lat, lev)
 uniform sampler2D particlesSpeed; // (u, v, w, norm) Unit converted to degrees of longitude and latitude 
 
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
+out vec4 outputColor;
 
 void main() {
     // texture coordinate must be normalized
-    vec3 lonLatLev = texture2D(currentParticlesPosition, v_textureCoordinates).rgb;
-    vec3 speed = texture2D(particlesSpeed, v_textureCoordinates).rgb;
+    vec3 lonLatLev = texture(currentParticlesPosition, v_textureCoordinates).rgb;
+    vec3 speed = texture(particlesSpeed, v_textureCoordinates).rgb;
     vec3 nextParticle = lonLatLev + speed;
 
-    gl_FragColor = vec4(nextParticle, 0.0);
+    outputColor = vec4(nextParticle, 0.0);
 }

Cesium-3D-Wind/particlesComputing.js

@@ -10,7 +10,7 @@ class ParticlesComputing {
             context: context,
             width: data.dimensions.lon,
             height: data.dimensions.lat * data.dimensions.lev,
-            pixelFormat: Cesium.PixelFormat.LUMINANCE,
+            pixelFormat: Cesium.PixelFormat.RED, // The combination of format and type values should follow the WebGL 2.0 Specification
             pixelDatatype: Cesium.PixelDatatype.FLOAT,
             flipY: false,
             sampler: new Cesium.Sampler({

Cesium-3D-Wind/wind3D.js

@@ -9,10 +9,7 @@ class Wind3D {
             fullscreenElement: 'cesiumContainer',
             // useBrowserRecommendedResolution can be set to false to improve the render quality
             // useBrowserRecommendedResolution: false,
-            scene3DOnly: true,
-            contextOptions: {
-                requestWebgl1: true,
-            },
+            scene3DOnly: true
         }
 
         if (mode.debug) {