fix(components): 🐛 crashing when enabling webgl2 in the new version o…

…f Cesium

CHANGELOG.en-US.md

@@ -1,5 +1,15 @@
 ## Changelog
 
+### 3.2.0
+
+_2023-06-xx_
+
+
+#### Bug fixes
+
+- Fixed the issue that the `vc-layer-imagery` component displaying an "appendForwardSlash is undefined" error.
+- Fixed the issue that the `vc-overlay-windmap` component crashing when enabling webgl2 in the new version of Cesium.
+
 ### 3.1.9
 
 _2023-06-08_

CHANGELOG.zh-CN.md

@@ -1,5 +1,14 @@
 ## 更新日志
 
+### 3.2.0
+
+_2023-06-xx_
+
+#### Bug 修复
+
+- 修复 `vc-layer-imagery` 组件提示 `appendForwardSlash` 未定义的问题。
+- 修复 `vc-overlay-windmap` 组件在新版 Cesium 中启用 webgl2 情况下的崩溃问题。
+
 ### 3.1.9
 
 _2023-06-08_

packages/components/overlays/wind/glsl/calculateSpeed.frag.ts

@@ -7,6 +7,9 @@
  * @FilePath: \vue-cesium@next\packages\components\overlays\wind\glsl\calculateSpeed.frag.ts
  */
 export default `
+
+precision highp float;
+
 // the size of UV textures: width = lon, height = lat*lev
 uniform sampler2D U; // eastward wind
 uniform sampler2D V; // northward wind
@@ -23,9 +26,7 @@ uniform vec2 vSpeedRange;
 uniform float pixelSize;
 uniform float speedFactor;
 
-// float speedScaleFactor = speedFactor * pixelSize;
-
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
 
 vec2 mapPositionToNormalizedIndex2D(vec3 lonLatLev) {
   // ensure the range of longitude and latitude
@@ -54,7 +55,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;
 }
 
@@ -121,8 +122,8 @@ vec3 convertSpeedUnitToLonLat(vec3 lonLatLev, vec3 speed) {
 vec3 calculateSpeedByRungeKutta2(vec3 lonLatLev) {
   // see https://en.wikipedia.org/wiki/Runge%E2%80%93Kutta_methods#Second-order_methods_with_two_stages for detail
   const float h = 0.5;
-
   float speedScaleFactor = speedFactor * pixelSize;
+
   vec3 y_n = lonLatLev;
   vec3 f_n = linearInterpolation(lonLatLev);
   vec3 midpoint = y_n + 0.5 * h * convertSpeedUnitToLonLat(y_n, f_n) * speedScaleFactor;
@@ -142,11 +143,12 @@ float calculateWindNorm(vec3 speed) {
 
 void main() {
   // texture coordinate must be normalized
-  vec3 lonLatLev = texture2D(currentParticlesPosition, v_textureCoordinates).rgb;
+  vec3 lonLatLev = texture(currentParticlesPosition, v_textureCoordinates).rgb;
+  float speedScaleFactor = speedFactor * pixelSize;
   vec3 speed = calculateSpeedByRungeKutta2(lonLatLev);
   vec3 speedInLonLat = convertSpeedUnitToLonLat(lonLatLev, speed);
-  float speedScaleFactor = speedFactor * pixelSize;
+
   vec4 particleSpeed = vec4(speedInLonLat, calculateWindNorm(speed / speedScaleFactor));
-  gl_FragColor = particleSpeed;
+  out_FragColor = particleSpeed;
 }
 `

packages/components/overlays/wind/glsl/fullscreen.vert.ts

@@ -7,14 +7,14 @@
  * @FilePath: \vue-cesium@next\packages\components\overlays\wind\glsl\fullscreen.ts
  */
 const text = `
-attribute vec3 position;
-attribute vec2 st;
+in vec3 position;
+in vec2 st;
 
-varying vec2 textureCoordinate;
+out vec2 textureCoordinate;
 
 void main() {
-    textureCoordinate = st;
-    gl_Position = vec4(position, 1.0);
+  textureCoordinate = st;
+  gl_Position = vec4(position, 1.0);
 }
 `
 export default text

packages/components/overlays/wind/glsl/postProcessingPosition.frag.ts

@@ -1,12 +1,13 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-28 09:20:11
- * @LastEditTime: 2021-10-28 15:46:30
- * @LastEditors: zouyaoji
+ * @LastEditTime: 2023-06-12 20:22:45
+ * @LastEditors: zouyaoji [email protected]
  * @Description:
  * @FilePath: \vue-cesium@next\packages\components\overlays\wind\glsl\postProcessingPosition.frag.ts
  */
 const text = `
+
 uniform sampler2D nextParticlesPosition;
 uniform sampler2D particlesSpeed; // (u, v, w, norm)
 
@@ -18,7 +19,7 @@ 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;
 
 // pseudo-random generator
 const vec3 randomConstants = vec3(12.9898, 78.233, 4375.85453);
@@ -43,8 +44,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;
 
@@ -54,9 +55,9 @@ 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
+    out_FragColor = vec4(randomParticle, 1.0); // 1.0 means this is a random particle
   } else {
-    gl_FragColor = vec4(nextParticle, 0.0);
+    out_FragColor = vec4(nextParticle, 0.0);
   }
 }
 `

packages/components/overlays/wind/glsl/screenDraw.frag.ts

@@ -1,26 +1,26 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-28 09:20:11
- * @LastEditTime: 2021-10-28 09:37:17
- * @LastEditors: zouyaoji
+ * @LastEditTime: 2023-06-12 18:10:22
+ * @LastEditors: zouyaoji [email protected]
  * @Description:
  * @FilePath: \vue-cesium@next\packages\components\overlays\wind\glsl\screenDraw.frag.ts
  */
 const text = `
 uniform sampler2D trailsColorTexture;
 uniform sampler2D trailsDepthTexture;
 
-varying vec2 textureCoordinate;
+in vec2 textureCoordinate;
 
 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;
+    out_FragColor = trailsColor;
   } else {
-    gl_FragColor = vec4(0.0);
+    out_FragColor = vec4(0.0);
   }
 }
 `

packages/components/overlays/wind/glsl/segmentDraw.frag.ts

@@ -9,7 +9,7 @@
 const text = `
 void main() {
   const vec4 white = vec4(1.0);
-  gl_FragColor = white;
+  out_FragColor = white;
 }
 `
 export default text

packages/components/overlays/wind/glsl/segmentDraw.vert.ts

@@ -1,7 +1,7 @@
 const text = `
-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;
@@ -93,11 +93,11 @@ vec4 calculateOffsetOnMiterDirection(adjacentPoints projectedCoordinates, float
   vec4 offset = vec4(0.0);
   // avoid to use values that are too small
   if (projection > 0.1) {
-    float miterLength = offsetLength / projection;
-    offset = vec4(offsetSign * miter * miterLength, 0.0, 0.0);
-    offset.x = offset.x / aspect;
+      float miterLength = offsetLength / projection;
+      offset = vec4(offsetSign * miter * miterLength, 0.0, 0.0);
+      offset.x = offset.x / aspect;
   } else {
-    offset = calculateOffsetOnNormalDirection(PointB, PointC, offsetSign);
+      offset = calculateOffsetOnNormalDirection(PointB, PointC, offsetSign);
   }
 
   return offset;
@@ -106,13 +106,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) {

packages/components/overlays/wind/glsl/trailDraw.frag.ts

@@ -7,6 +7,7 @@
  * @FilePath: \vue-cesium@next\packages\components\overlays\wind\glsl\trailDraw.ts
  */
 const text = `
+
 uniform sampler2D segmentsColorTexture;
 uniform sampler2D segmentsDepthTexture;
 
@@ -15,26 +16,26 @@ uniform sampler2D trailsDepthTexture;
 
 uniform float fadeOpacity;
 
-varying vec2 textureCoordinate;
+in vec2 textureCoordinate;
 
 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);
+  out_FragColor = vec4(0.0);
   if (pointsDepth < globeDepth) {
-    gl_FragColor = gl_FragColor + pointsColor;
+    out_FragColor = out_FragColor + pointsColor;
   }
   if (trailsDepth < globeDepth) {
-    gl_FragColor = gl_FragColor + trailsColor;
+    out_FragColor = out_FragColor + trailsColor;
   }
-  gl_FragDepthEXT = min(pointsDepth, trailsDepth);
+  gl_FragDepth = min(pointsDepth, trailsDepth);
 }
 `
 export default text

packages/components/overlays/wind/glsl/updatePosition.frag.ts

@@ -10,15 +10,15 @@ const text = `
 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;
 
 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);
+  out_FragColor = vec4(nextParticle, 0.0);
 }
 `
 export default text

packages/components/overlays/wind/particlesComputing.ts

@@ -14,15 +14,15 @@ class ParticlesComputing {
     this.data = data
     this.createWindTextures(context, data)
     this.createParticlesTextures(context, particleSystemOptions, viewerParameters)
-    this.createComputingPrimitives(data, particleSystemOptions, viewerParameters)
+    this.createComputingPrimitives(data, particleSystemOptions, viewerParameters, context)
   }
 
   createWindTextures(context, data) {
     const windTextureOptions = {
       context: context,
       width: data.dimensions.lon,
       height: data.dimensions.lat * data.dimensions.lev,
-      pixelFormat: Cesium.PixelFormat.LUMINANCE,
+      pixelFormat: !context?.webgl2 ? Cesium.PixelFormat.LUMINANCE : Cesium.PixelFormat.RED,
       pixelDatatype: Cesium.PixelDatatype.FLOAT,
       flipY: false,
       sampler: new Cesium.Sampler({
@@ -83,7 +83,30 @@ class ParticlesComputing {
     })
   }
 
-  createComputingPrimitives(data, particleSystemOptions, viewerParameters) {
+  createComputingPrimitives(data, particleSystemOptions, viewerParameters, context) {
+    const webgl2 = context?.webgl2
+
+    let calculateSpeedFragText = calculateSpeedFrag
+    if (!webgl2) {
+      calculateSpeedFragText = calculateSpeedFragText.replace('in vec2 v_textureCoordinates;', 'varying vec2 v_textureCoordinates;')
+      calculateSpeedFragText = calculateSpeedFragText.replace(/texture\(/g, 'texture2D(')
+      calculateSpeedFragText = calculateSpeedFragText.replace(/out_FragColor/g, 'gl_FragColor')
+    }
+
+    let updatePositionFragText = updatePositionFrag
+    if (!webgl2) {
+      updatePositionFragText = updatePositionFragText.replace('in vec2 v_textureCoordinates;', 'varying vec2 v_textureCoordinates;')
+      updatePositionFragText = updatePositionFragText.replace(/texture\(/g, 'texture2D(')
+      updatePositionFragText = updatePositionFragText.replace(/out_FragColor/g, 'gl_FragColor')
+    }
+
+    let postProcessingPositionFragText = postProcessingPositionFrag
+    if (!webgl2) {
+      postProcessingPositionFragText = postProcessingPositionFragText.replace('in vec2 v_textureCoordinates;', 'varying vec2 v_textureCoordinates;')
+      postProcessingPositionFragText = postProcessingPositionFragText.replace(/texture\(/g, 'texture2D(')
+      postProcessingPositionFragText = postProcessingPositionFragText.replace(/out_FragColor/g, 'gl_FragColor')
+    }
+
     const dimension = new Cesium.Cartesian3(data.dimensions.lon, data.dimensions.lat, data.dimensions.lev)
     const minimum = new Cesium.Cartesian3(data.lon.min, data.lat.min, data.lev.min)
     const maximum = new Cesium.Cartesian3(data.lon.max, data.lat.max, data.lev.max)
@@ -136,7 +159,7 @@ class ParticlesComputing {
           }
         },
         fragmentShaderSource: new Cesium.ShaderSource({
-          sources: [calculateSpeedFrag]
+          sources: [calculateSpeedFragText]
         }),
         outputTexture: this.particlesTextures.particlesSpeed,
         preExecute: function () {
@@ -162,7 +185,7 @@ class ParticlesComputing {
           }
         },
         fragmentShaderSource: new Cesium.ShaderSource({
-          sources: [updatePositionFrag]
+          sources: [updatePositionFragText]
         }),
         outputTexture: this.particlesTextures.nextParticlesPosition,
         preExecute: function () {
@@ -198,7 +221,7 @@ class ParticlesComputing {
           }
         },
         fragmentShaderSource: new Cesium.ShaderSource({
-          sources: [postProcessingPositionFrag]
+          sources: [postProcessingPositionFragText]
         }),
         outputTexture: this.particlesTextures.postProcessingPosition,
         preExecute: function () {