the code is not working with new versions of Cesium (webgl2 Update in cesium)

[maxsoft65]

Good evening,
I am facing an issue due to monthly Cesium update (ver 1.101) and I report the following console messages:

Cesium.js:92 [Cesium WebGL] Fragment shader source:
#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
precision highp int;
#else
precision mediump float;
precision mediump int;
#define highp mediump
#endif

#define OES_texture_float_linear

#define OES_texture_float

#line 0

#line 0

uniform sampler2D U;
uniform sampler2D V;
uniform sampler2D currentParticlesPosition;

uniform vec3 dimension;
uniform vec3 minimum;
uniform vec3 maximum;
uniform vec3 interval;

uniform vec2 uSpeedRange;
uniform vec2 vSpeedRange;
uniform float pixelSize;
uniform float speedFactor;

float speedScaleFactor = speedFactor * pixelSize;

varying vec2 v_textureCoordinates;

vec2 mapPositionToNormalizedIndex2D(vec3 lonLatLev) {

lonLatLev.x = mod(lonLatLev.x, 360.0);
lonLatLev.y = clamp(lonLatLev.y, -90.0, 90.0);

vec3 index3D = vec3(0.0);
index3D.x = (lonLatLev.x - minimum.x) / interval.x;
index3D.y = (lonLatLev.y - minimum.y) / interval.y;
index3D.z = (lonLatLev.z - minimum.z) / interval.z;

vec2 index2D = vec2(index3D.x, index3D.z * dimension.y + index3D.y);
vec2 normalizedIndex2D = vec2(index2D.x / dimension.x, index2D.y / (dimension.y * dimension.z));
return normalizedIndex2D;

}

float getWindComponent(sampler2D componentTexture, vec3 lonLatLev) {
vec2 normalizedIndex2D = mapPositionToNormalizedIndex2D(lonLatLev);
float result = texture2D(componentTexture, normalizedIndex2D).r;
return result;
}

float interpolateTexture(sampler2D componentTexture, vec3 lonLatLev) {
float lon = lonLatLev.x;
float lat = lonLatLev.y;
float lev = lonLatLev.z;

float lon0 = floor(lon / interval.x) * interval.x;
float lon1 = lon0 + 1.0 * interval.x;
float lat0 = floor(lat / interval.y) * interval.y;
float lat1 = lat0 + 1.0 * interval.y;

float lon0_lat0 = getWindComponent(componentTexture, vec3(lon0, lat0, lev));
float lon1_lat0 = getWindComponent(componentTexture, vec3(lon1, lat0, lev));
float lon0_lat1 = getWindComponent(componentTexture, vec3(lon0, lat1, lev));
float lon1_lat1 = getWindComponent(componentTexture, vec3(lon1, lat1, lev));

float lon_lat0 = mix(lon0_lat0, lon1_lat0, lon - lon0);
float lon_lat1 = mix(lon0_lat1, lon1_lat1, lon - lon0);
float lon_lat = mix(lon_lat0, lon_lat1, lat - lat0);
return lon_lat;

}

vec3 linearInterpolation(vec3 lonLatLev) {

float u = interpolateTexture(U, lonLatLev);
float v = interpolateTexture(V, lonLatLev);
float w = 0.0;
return vec3(u, v, w);

}

vec2 lengthOfLonLat(vec3 lonLatLev) {

float latitude = radians(lonLatLev.y);

float term1 = 111132.92;
float term2 = 559.82 * cos(2.0 * latitude);
float term3 = 1.175 * cos(4.0 * latitude);
float term4 = 0.0023 * cos(6.0 * latitude);
float latLength = term1 - term2 + term3 - term4;

float term5 = 111412.84 * cos(latitude);
float term6 = 93.5 * cos(3.0 * latitude);
float term7 = 0.118 * cos(5.0 * latitude);
float longLength = term5 - term6 + term7;

return vec2(longLength, latLength);

}

vec3 convertSpeedUnitToLonLat(vec3 lonLatLev, vec3 speed) {
vec2 lonLatLength = lengthOfLonLat(lonLatLev);
float u = speed.x / lonLatLength.x;
float v = speed.y / lonLatLength.y;
float w = 0.0;
vec3 windVectorInLonLatLev = vec3(u, v, w);

return windVectorInLonLatLev;

}

vec3 calculateSpeedByRungeKutta2(vec3 lonLatLev) {

const float h = 0.5;

vec3 y_n = lonLatLev;
vec3 f_n = linearInterpolation(lonLatLev);
vec3 midpoint = y_n + 0.5 * h * convertSpeedUnitToLonLat(y_n, f_n) * speedScaleFactor;
vec3 speed = h * linearInterpolation(midpoint) * speedScaleFactor;

return speed;

}

float calculateWindNorm(vec3 speed) {
vec3 percent = vec3(0.0);
percent.x = (speed.x - uSpeedRange.x) / (uSpeedRange.y - uSpeedRange.x);
percent.y = (speed.y - vSpeedRange.x) / (vSpeedRange.y - vSpeedRange.x);
float norm = length(percent);

return norm;

}

void main() {

vec3 lonLatLev = texture2D(currentParticlesPosition, v_textureCoordinates).rgb;
vec3 speed = calculateSpeedByRungeKutta2(lonLatLev);
vec3 speedInLonLat = convertSpeedUnitToLonLat(lonLatLev, speed);

vec4 particleSpeed = vec4(speedInLonLat, calculateWindNorm(speed / speedScaleFactor));
gl_FragColor = particleSpeed;

}

Cesium.js:12052 An error occurred while rendering. Rendering has stopped.
RuntimeError: Fragment shader failed to compile. Compile log: ERROR: 0:16: '=' : global variable initializers must be constant expressions
ERROR: 0:18: 'varying' : Illegal use of reserved word

I guess the .frag files are not updated with the new versions of Cesium, do you have any suggestion to fix the issue?.
Thank you in advance.

[leylines]

I'm also interessted in getting the code working with webgl2 but I am completely overwhelmed with the code.

[RaymanNg]

According to the document, you should be able to force Cesium to use WebGL1.

to request a WebGL 1 context, set requestWebgl1 to true when providing ContextOptions as shown below:

const viewer = new Viewer("cesiumContainer", {
  contextOptions: {
    requestWebgl1: true,
  },
});

If you really need to use WebGL2, then the old WebGL1 code need to be rewritten

[zouyaoji]

The VcOverlayWindmap component in vue-cesium utilizes 3D-Wind-Field and includes compatibility adjustments for the relevant GLSL, supporting both WebGL1 and WebGL2. Here is the demo link: https://zouyaoji.top/vue-cesium/#/en-US/component/overlays/vc-overlay-windmap.

Feel free to use it as needed. If you're interested in the specific implementation details, please refer to the vue-cesium source code. You can find it here: vue-cesium source code - particlesRendering.ts

[leylines]

Thank you Rayman, I try to use your framework to display global ocean currents. I'll work on it.

Thanks again,

Jörg