Cesium 1.02.0 以降のカスタム マテリアル エラー: [Cesium WebGL] フラグメント シェーダー コンパイル ログ: エラー: 0:8: 'texture2D'
2023 年 4 月 19 日更新 —ミラーを作成しましたCesium。使用を歓迎します:サンドボックスのサンプルとAPI
スムーズなスケーリングをサポートするCesium の公式アップデート ログを見て最新版（1.103.0）、アップグレードを試してみました。
その結果、以前書いた壁のダイナミックエフェクトがエラーを報告していたことを偶然発見し、デバッグしてみたら原因が判明したので、新しいバージョンの Cesium のWebGL2サポートに変更があったので、ここに記録しておきます。
この記事は报错原因、解决方法、在线示例3 つの部分で構成されています。
エラーの理由
エラーの理由:Cesium 自 1.102.0当初、クロスプラットフォーム、特にモバイル端末をより適切にサポートするために、Cesium はWebGL2デフォルトでコンテキストを使用します。WebGL1コンテキストを使用したい場合は、地球の初期化時に対応するパラメーターを設定する必要があります。
WebGL2 コンテキストで動作させるには、カスタム マテリアル、カスタム プリミティブ、およびカスタム シェーダを使用できるようにアップグレードする必要がありますGLSL 300。
詳細については説明を参照してください。
openGL(35)テクスチャとtexture2DのAPI学習
作成者が作成したカスタム マテリアルは GLSL 300 より前の構文を使用する必要があるため、サポートされていません。構文を更新するだけです。
関連する構文:
vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));
完全なエラー:
[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'
解決
この問題を解決するには 2 つの方法があります推荐第二种。
1. Earth を初期化するとき (非推奨)、パラメータを渡して WebGL1 コンテキストを使用します。
const viewer = new Viewer("cesiumContainer", {
// 指定上下文
contextOptions: {
requestWebgl1: true,
},
});
2. GLSLコードを修正（推荐）
エラーコード ( texture2D):
vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));
次のように修正されました:
vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));
完全なコード
<!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>
オンラインの例
例で示すと、3Dマップのダイナミックな壁効果。
