解决Cesium开发中遇到Compile log: ERROR: 0:3: ‘varying’: Illegal use of reserved word问题-五八三

本篇记录了我在使用Cesium.SkyBox源码更换天空盒图片时，却遇到 Fragment 着色器编译失败的问题。
问题：已解决。

查看地址

仓库地址

来源

如图所示，这个错误导致了我程序渲染停止了，而且报出提示：

编译日志:ERROR: 0:3: ‘varying’:非法使用保留字。

排查

我之前有一篇文章记录（解决 Cesium(版本 1.99.0 )开发中遇到 ERROR: 0:1: ‘in’ : storage qualifier supported in GLS）：

该文描述了我使用 Cesium(版本 1.99.0)，编辑 GLSL(版本 3.0)代码时遇到的错误，这和我现在遇到的问题其实是一个方向，都是使用的 GLSL 版本的语法不兼容的问题。

之所以这么肯定是，因为我看到CesiumJS官方更新日志:

如图所示，有几点必须标注出来：

CesiumJS在版本 1.102 以后默认使用 WebGL2 上下文进行渲染
为了在 WebGL2 上下文中工作，任何自定义材质、自定义基元或自定义着色器都需要升级以使用 GLSL 300
可以通过Cesium.FeatureDetection.supportsWebgl2来检测当前浏览器中是否存在 WebGL2 呈现上下文
可以设置ContextOptions.requestWebgl1为true，回退到 WebGL1 版本

查验

为了查证，当前版本的CesiumJs是不是使用 WebGL2 上下文渲染的，我通过 APICesium.FeatureDetection.supportsWebgl2(viewer.scene)来测试:

如图所示，的确当前版本的CesiumJs的确使用 WebGL2 上下文渲染，从而任何自定义材质、自定义基元或自定义着色器都需要升级以使用 GLSL 300，而 GLSL3.0 与 2.0 差异中就是有:

用 in 和 out 取代 attribute 和 varying

解难

于是乎，我排查出原因后，后面的操作就很简单了，有两种方式。

设置ContextOptions.requestWebgl1为true，回退到 WebGL1 版本，使用 GLSL 2.0 的代码

const options: Viewer.ConstructorOptions = {
  infoBox: false,
  selectionIndicator: false,
  shadows: true,
  shouldAnimate: true,
  contextOptions: {
    requestWebgl1: false,
  },
};

export const viewer = new Viewer("cesium-container", options);

// 片元着色器

uniform samplerCube u_cubeMap;

varying vec3 v_texCoord;



void main() {

  vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));
  gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
}

// 顶点着色器

uniform mat3 u_rotateMatrix;

attribute vec3 position;
varying vec3 v_texCoord;



void main() {

  vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));

  gl_Position = czm_projection * vec4(p, 1.0);

  v_texCoord = position.xyz;

}

将 GLSL 2.0 代码修改升级为 GLSL3.0 的，完美展示 WebGL2 的渲染效果

// 片元着色器

in vec3 v_texCoord;
void main()
{
  vec4 color = texture(u_cubeMap, normalize(v_texCoord));
  out_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
}

// 顶点着色器

uniform mat3 u_rotateMatrix;

in vec3 position;
out vec3 v_texCoord;
void main()
{
  vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));

  gl_Position = czm_projection * vec4(p, 1.0);

  v_texCoord = position.xyz;

}