Cesium 实体点发光
时间: 2023-11-27 17:59:48 浏览: 191
Cesium实体加载演示案例
Cesium 可以通过以下步骤实现实体点发光:
1. 在 Cesium 中创建一个实体对象,例如:
```javascript
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.170726, 39.920866),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
});
```
2. 调整点的颜色和大小,例如:
```javascript
entity.point.color = Cesium.Color.fromCssColorString('#00FF00').withAlpha(0.5);
entity.point.pixelSize = 20;
```
3. 将点设置为发光状态,例如:
```javascript
entity.point.outlineColor = Cesium.Color.WHITE;
entity.point.outlineWidth = 3;
entity.point.disableDepthTestDistance = Number.POSITIVE_INFINITY;
```
这将使点周围出现一个白色的发光效果,并且该点不会被其他实体遮挡。
4. 最后,如果需要控制点的发光强度和范围,可以使用着色器实现,例如:
```javascript
var glowingShader =
'uniform vec4 color;\n' +
'uniform float glowPower;\n' +
'varying vec3 v_positionEC;\n' +
'void main() {\n' +
' vec4 position = czm_modelViewProjection * vec4(v_positionEC, 1.0);\n' +
' vec4 color = vec4(color.rgb * (1.0 - glowPower), 1.0);\n' +
' vec4 outlineColor = vec4(color.rgb * glowPower, 1.0);\n' +
' vec4 outline = vec4(0.0);\n' +
' float outlineWidth = 3.0;\n' +
' vec2 st = gl_FragCoord.xy / czm_viewport.zw;\n' +
' float d = length((st - vec2(0.5)) * 2.0);\n' +
' if (d > 1.0 - outlineWidth / czm_viewport.zw.x) {\n' +
' outline = outlineColor;\n' +
' }\n' +
' gl_FragColor = mix(outline, color, 1.0 - pow(1.0 - d, 10.0));\n' +
'}\n';
entity.point.shaderBuilder = new Cesium.ShaderBuilder();
entity.point.shaderBuilder.addUniform('color', 'vec4');
entity.point.shaderBuilder.addUniform('glowPower', 'float');
entity.point.shaderBuilder.addVarying('v_positionEC', 'vec3');
entity.point.shaderBuilder.addFragmentShaderLines(glowingShader);
entity.point.shaderBuilder.addFragmentShaderLines('czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.shininess = 5.0; material.alpha = color.a; return material; }');
entity.point.shaderBuilder.addVertexShaderLines('v_positionEC = (czm_modelView * vec4(position, 1.0)).xyz;');
entity.point.shaderBuilder.addFragmentShaderLines('gl_FragColor = czm_gammaCorrectOutput(gl_FragColor);');
entity.point.customShader = true;
entity.point.color = Cesium.Color.fromCssColorString('#FFFF00').withAlpha(0.5);
entity.point.pixelSize = 40;
entity.point.uniforms = {
color: entity.point.color,
glowPower: 1.0
};
```
这将使用一个着色器来控制点的发光效果,其中可以通过调整 `glowPower` 来控制发光强度,通过调整着色器中的 `outlineWidth` 来控制发光范围。
阅读全文