Custom material error reported under Cesium 1.02.0 and above: [Cesium WebGL] Fragment shader compile log: ERROR: 0:8: 'texture2D'
Updated April 19, 2023 —Made a Cesiummirror, welcome to use: sandbox example and API
After seeing the official update log of Cesium, 最新版（1.103.0）it supports smooth zooming, so I tried to upgrade.
As a result, I accidentally found that the dynamic effect of the wall I wrote before reported an error . After debugging, I found the reason. The new version of Cesium WebGL2has changed the support for , and I will record it here.
This article consists of 报错原因、解决方法、在线示例three parts.
Error reason
Reason for the error: Cesium 自 1.102.0At the beginning, in order to better support cross-platform, especially the mobile terminal, Cesium uses WebGL2the context by default. If you want to use WebGL1the context, you need to set the corresponding parameters when the earth is initialized.
In order to work in the WebGL2 context, any custom materials, custom primitives and custom shaders will need to be upgraded to use GLSL 300.
See explanation for details:
API learning of openGL (35) texture and texture2D
The custom material written by the author should use a syntax lower than GLSL 300, so it is not supported, just update the syntax.
Involving syntax:
vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));
Full error:
[Cesium WebGL] Fragment shader compile log: ERROR: 0:8: 'texture2D' : no matching overloaded function found
ERROR: 0:8: '=' : dimension mismatch
ERROR: 0:8: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
[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
layout(location = 0) out vec4 out_FragColor;
CesiumWidget.js:703 An error occurred while rendering. Rendering has stopped.
RuntimeError: Fragment shader failed to compile. Compile log: ERROR: 0:8: 'texture2D' : no matching overloaded function found
ERROR: 0:8: '=' : dimension mismatch
ERROR: 0:8: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
Solution
Here are two ways to solve the problem 推荐第二种.
1. When initializing the earth (not recommended), pass in parameters and use the WebGL1 context
const viewer = new Viewer("cesiumContainer", {
// 指定上下文
contextOptions: {
requestWebgl1: true,
},
});
2. Fix GLSL code（推荐）
Error code ( texture2D):
vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));
Corrected to:
vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));
Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8"/>
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Cesium model adjust</title>
<script src="./Cesium.js"></script>
<script src="./cesium_init.js"></script>
<script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script>
<style>
@import url(./Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzVlZmUzZi0xMWRmLTQxZGEtYWQyMS1iMDhmYWM3NDkyZjMiLCJpZCI6MTIzMTAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA4MzkzNTZ9.ORdbpPmws56kqB_GOcdYo-v38ezBkYUVqjPJiZ73JvA';
// 创建三维球
const viewer = init();
viewer.scene.debugShowFramesPerSecond = true;
/**
* @description:立体墙效果
* @date：2022-02-12
* @param：viewer
* @positions: 墙体底部位置坐标
*/
function drawWall(positionsTemp) {
// 绘制墙体
viewer.entities.add({
name: "立体墙效果",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
118.286419,31.864436,20000.0,
119.386419,31.864436,20000.0,
119.386419,32.864436,20000.0,
118.286419,32.864436,20000.0,
118.286419,31.864436,20000.0,
]),
// 设置高度
maximumHeights: new Array(5).fill(10000),
minimumHeights: new Array(5).fill(1000),
material: new DynamicWallMaterialProperty({
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
duration: 1000
}),
}
});
}
/**
* @description:动态立体墙材质
* @date: 2022-02-11
*/
//动态墙材质
function DynamicWallMaterialProperty(options) {
// 默认参数设置
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = options.color;
this.duration = options.duration;
this.trailImage = options.trailImage;
this._time = (new Date()).getTime();
}
Object.defineProperties(DynamicWallMaterialProperty.prototype, {
isConstant: {
get: function() {
return false;
}
},
definitionChanged: {
get: function() {
return this._definitionChanged;
}
},
color: Cesium.createPropertyDescriptor('color')
});
DynamicWallMaterialProperty.prototype.getType = function(time) {
return 'DynamicWall';
};
DynamicWallMaterialProperty.prototype.getValue = function(time, result) {
if (!Cesium.defined(result)) {
result = {
};
}
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
if (this.trailImage) {
result.image = this.trailImage;
} else {
result.image = Cesium.Material.DynamicWallImage;
}
if (this.duration) {
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
}
viewer.scene.requestRender();
return result;
};
DynamicWallMaterialProperty.prototype.equals = function(other) {
return this === other ||
(other instanceof DynamicWallMaterialProperty &&
Cesium.Property.equals(this._color, other._color));
};
Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
Cesium.Material.DynamicWallType = 'DynamicWall';
Cesium.Material.DynamicWallImage = "http://openlayers.vip/resources/polylineTrailLinkMaterial.png";
Cesium.Material.DynamicWallSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;\n\
vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));\n\
vec4 fragColor;\n\
fragColor.rgb = color.rgb / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.alpha = colorImage.a * color.a;\n\
material.diffuse = color.rgb;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}";
Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
fabric: {
type: Cesium.Material.DynamicWallType,
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
image: Cesium.Material.DynamicWallImage,
time: 0
},
source: Cesium.Material.DynamicWallSource
},
translucent: function(material) {
return true;
}
});
drawWall();
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
Online example
The example shows,3D map dynamic wall effect。
