原文链接及内容

效果如下所示:给模型打了马赛克的效果。

示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
geocoder: false,
sceneModePicker: false,
homeButton: false,
navigationHelpButton: false,
baseLayerPicker: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
timeline: false,
fullscreenButton: false,
selectionIndicator: false,
skyBox: false,
});

const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
const url = "../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});

const fragmentShaderSource = `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
const int KERNEL_WIDTH = 16;
void main(void)
{
vec2 step = czm_pixelRatio / czm_viewport.zw;
vec2 integralPos = v_textureCoordinates - mod(v_textureCoordinates, 8.0 * step);
vec3 averageValue = vec3(0.0);
for (int i = 0; i < KERNEL_WIDTH; i++)
{
for (int j = 0; j < KERNEL_WIDTH; j++)
{
averageValue += texture(colorTexture, integralPos + step * vec2(i, j)).rgb;
}
}
averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH);
out_FragColor = vec4(averageValue, 1.0);
}
`;
viewer.scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
}),
);