Vertex shader failed to compile due to the undeclared identifier `batchId`

CesiumJS
1

import * as Cesium from ‘cesium’;

export default class MyGeometryPrimitive {

vertexShader = #version 300 es in vec3 position; // 输入的顶点坐标 void main() { gl_Position = czm_modelViewProjection * vec4(position, 1.0); }

fragmentShader = #version 300 es precision highp float; // 设置高精度的浮点数 out vec4 fragColor; // 输出的最终颜色 void main() { // 直接在片段着色器中写死颜色值，这里设置为蓝色 fragColor = vec4(0.0, 0.0, 1.0, 1.0); // 蓝色，完全不透明 } ;

constructor(viewer) {
this.viewer = viewer;
}

shaderSource(vertexShader, fragmentShader) {
return new Cesium.Appearance({
renderState: {
depthTest: {
enabled: true
}
},
blending: {
enable: true,
},
vertexShaderSource: vertexShader || this.vertexShader,
fragmentShaderSource: fragmentShader || this.fragmentShader,
})
}

drawRectangle(position = [116.39, 39.9, 0], length = 0.1) {

// 1. 计算四个角点的坐标
const bottomLeft = Cesium.Cartesian3.fromDegrees(position[0] - length/2, position[1] - length/2, position[2]);
const bottomRight = Cesium.Cartesian3.fromDegrees(position[0] + length/2, position[1] - length/2, position[2]);
const topRight = Cesium.Cartesian3.fromDegrees(position[0] + length/2, position[1] + length/2, position[2]);
const topLeft = Cesium.Cartesian3.fromDegrees(position[0] - length/2, position[1] + length/2, position[2]);

// 2. 创建顶点数组
const positions = new Float64Array([
  bottomLeft.x, bottomLeft.y, bottomLeft.z,
  bottomRight.x, bottomRight.y, bottomRight.z,
  topRight.x, topRight.y, topRight.z,
  topLeft.x, topLeft.y, topLeft.z
]);

// 3. 创建几何体
const geometry = new Cesium.Geometry({
  attributes: {
    position: new Cesium.GeometryAttribute({
      componentDatatype: Cesium.ComponentDatatype.DOUBLE,
      componentsPerAttribute: 3,
      values: positions
    })
  },
  indices: new Uint16Array([0, 1, 2, 0, 2, 3]), // 两个三角形
  primitiveType: Cesium.PrimitiveType.TRIANGLES,
  boundingSphere: Cesium.BoundingSphere.fromVertices(positions),
});

// 4. 创建几何实例
const instance = new Cesium.GeometryInstance({
  geometry: geometry,
});

// 5. 创建图元
const primitive = new Cesium.Primitive({
  geometryInstances: instance,
  asynchronous: false,
  appearance: this.shaderSource(),
});

// 6. 添加到场景
this.viewer.scene.primitives.add(primitive);

// 7. 调整视角
// this.viewer.camera.flyTo({
//   destination: Cesium.Cartesian3.fromDegrees(position[0], position[1], 200000)
// });
return primitive;

}
}

ERROR:
[Cesium WebGL] Vertex shader source:
#version 300 es
#define OES_texture_float_linear

#define OES_texture_float

#line 0
uniform mat4 czm_modelViewProjection;

#line 0

in vec3 position;

uniform highp sampler2D batchTexture;
uniform vec4 batchTextureStep;
vec2 computeSt(float batchId)
{
float stepX = batchTextureStep.x;
float centerX = batchTextureStep.y;
float numberOfAttributes = float(1);
return vec2(centerX + (batchId * numberOfAttributes * stepX), 0.5);
}

vec4 czm_batchTable_pickColor(float batchId)
{
vec2 st = computeSt(batchId);
st.x += batchTextureStep.x * float(0);
vec4 textureValue = texture(batchTexture, st);
vec4 value = textureValue;
return value;
}

void czm_non_pick_main() {
gl_Position = czm_modelViewProjection * vec4(position, 1.0);
}

out vec4 v_pickColor;
void main()
{
czm_non_pick_main();
v_pickColor = czm_batchTable_pickColor(batchId);
}

createAndLinkProgram @ ShaderProgram.js:253
reinitialize @ ShaderProgram.js:470
initialize2 @ ShaderProgram.js:463
get @ ShaderProgram.js:112
validateShaderMatching @ Primitive.js:1129
createShaderProgram @ Primitive.js:1763
Primitive.update @ Primitive.js:2216
PrimitiveCollection.update @ PrimitiveCollection.js:416
updateAndRenderPrimitives @ Scene.js:3563
executeCommandsInViewport @ Scene.js:3335
Scene4.updateAndExecuteCommands @ Scene.js:3065
render @ Scene.js:4152
tryAndCatchError @ Scene.js:4171
Scene4.render @ Scene.js:4263
CesiumWidget.render @ CesiumWidget.js:828
render2 @ CesiumWidget.js:36
requestAnimationFrame
startRenderLoop @ CesiumWidget.js:63
set @ CesiumWidget.js:607
CesiumWidget @ CesiumWidget.js:372
Viewer @ Viewer.js:485
（匿名） @ App.vue:31
（匿名） @ runtime-core.esm-bundler.js:2778
callWithErrorHandling @ runtime-core.esm-bundler.js:199
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2758
flushPostFlushCbs @ runtime-core.esm-bundler.js:385
render2 @ runtime-core.esm-bundler.js:5956
mount @ runtime-core.esm-bundler.js:3904
app.mount @ runtime-dom.esm-bundler.js:1757
（匿名） @ main.js?t=1731638660226:5
CesiumWidget.js:729 An error occurred while rendering. Rendering has stopped.
RuntimeError: Vertex shader failed to compile. Compile log: ERROR: 0:33: ‘batchId’ : undeclared identifier

The error indicates that the vertex shader failed to compile due to the undeclared identifier batchId. The shader code is trying to use batchId but this variable has not been declared or passed in the shader program. In the context of Cesium, batchId is typically used for batch rendering (e.g., instancing), and if you are not explicitly using batching or setting batchId, this error occurs.

2

Hi @jin_he,

If it would be possible to create a minimal Sandcastle example that reproduces the issue in isolation, that would help us troubleshoot.

We’ve seen similar error messages when depending on conflicting versions of CesiumJS and its dependencies. Would you be able to share your package.json file to confirm if that is the case here?

Thanks!
Gabby