在线示例
Cesium全屏红色渐变闪烁告警
代码
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/CesiumUnminified/Cesium.js"></script>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script>
window.CESIUM_BASE_URL =
"https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium";
const viewer = new Cesium.Viewer("cesiumContainer", {});
const fragmentShaderSource = `
// b.x = width
// b.y = height
// r.x = roundness top-right
// r.y = roundness boottom-right
// r.z = roundness top-left
// r.w = roundness bottom-left
float sdRoundBox( in vec2 p, in vec2 b, in vec4 r )
{
r.xy = (p.x>0.0)?r.xy : r.zw;
r.x = (p.y>0.0)?r.x : r.y;
vec2 q = abs(p)-b+r.x;
return min(max(q.x,q.y),0.0) + length(max(q,0.0)) - r.x;
}
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
void main(void)
{
// gl_FragCoord.xy / czm_viewport.zw 根据视口的宽度和高度, 通过除法将窗口坐标分量缩放到[0, 1]
// cesium是以左下角为远点, 而sdRoundBox是根据中点为原点实现的, 所以将p的范围从[0,1]更改为[-1,1],这样它就可以在两个方向上都跨越原点。
// 这将使p.x > 0.0和p.y > 0.0这样的判断有意义,这样你就可以在四个方向上都看到红色边缘了。
// 1.缩放:我们将gl_FragCoord.xy除以(czm_viewport.zw / 2.0)。这样得到的结果p就在[0, 2]的范围内。这是因为gl_FragCoord.xy的最大值是czm_viewport.zw,除以czm_viewport.zw / 2.0得到的结果就是2。
// 2.偏移:然后,我们从得到的结果中减去1,将范围从[0, 2]转化到了[-1, 1]。
vec2 p = (gl_FragCoord.xy / (czm_viewport.zw / 2.0)) - 1.0;
float d= sdRoundBox(p,vec2(0.8, 0.7),vec4(0.1));
// vec3 col = mix(vec3(0.0), vec3(1.0, 0.0, 0.0), d > 0.0 ? 1.0 : 0.0);
vec3 col = mix(vec3(0.0), vec3(1.0, 0.0, 0.0)* abs(sin(czm_frameNumber*9.5))* (d / 0.35), d > 0.0 ? 1.0 : 0.0);
vec3 originalColor = texture(colorTexture, v_textureCoordinates).rgb;
out_FragColor = mix(vec4(originalColor, 1.0)*2.0, vec4(col, 1.0), 0.5);
// out_FragColor = vec4(col,1.0);
}
`;
viewer.scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
})
);
</script>
</body>
</html>