-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path6-cesium-draw-command.html
144 lines (123 loc) · 4.39 KB
/
6-cesium-draw-command.html
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
<script type="text/javascript" src="./CesiumUnminified/Cesium.js"></script>
<link href="./CesiumUnminified/Widgets/widgets.css" rel="stylesheet" />
<script>
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNzRmYThjMS1hMjE4LTQwMGYtYmYwOC1lZGQ5NWY4ZjU0MjkiLCJpZCI6MTYwNDksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Njk0NjQ0MjB9.ARU_MGaOknVNlMxTC8yTQK4lik_DXm42LKaAXA19BFI";
class MyPrimitive {
constructor(modelMatrix) {
this.modelMatrix = modelMatrix || Cesium.Matrix4.IDENTITY.clone();
this.drawCommand = null;
}
/**
* 创建 DrawCommand
* @param {Cesium.Context} context
*/
createCommand(context) {
var modelMatrix = this.modelMatrix;
var box = new Cesium.BoxGeometry({
vertexFormat: Cesium.VertexFormat.POSITION_NORMAL_AND_ST,
maximum: new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
minimum: new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0),
});
var geometry = Cesium.BoxGeometry.createGeometry(box);
var attributeLocations =
Cesium.GeometryPipeline.createAttributeLocations(geometry);
var va = Cesium.VertexArray.fromGeometry({
context: context,
geometry: geometry,
attributeLocations: attributeLocations,
});
var vs = `
attribute vec3 position;
attribute vec3 normal;
varying vec3 v_normalEC;
varying vec3 v_positionEC;
void main(){
gl_Position = czm_projection * czm_modelView * vec4( position , 1. );
v_normalEC = czm_normal * normal;
v_positionEC = (czm_modelViewRelativeToEye * gl_Position).xyz; // position in eye coordinates
}
`;
var fs = `
uniform vec3 color;
varying vec3 v_normalEC;
varying vec3 v_positionEC;
void main(){
vec3 positionToEyeEC = -v_positionEC;
vec3 normalEC = normalize(v_normalEC);
#ifdef FACE_FORWARD
normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif
czm_materialInput materialInput;
materialInput.normalEC = normalEC;
materialInput.positionToEyeEC = positionToEyeEC;
czm_material material = czm_getDefaultMaterial(materialInput);
material.diffuse = color.rgb;
material.alpha = 1.0;
// gl_FragColor=vec4( color , 1. );
gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
}
`;
var shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: vs,
fragmentShaderSource: fs,
attributeLocations: attributeLocations,
});
var uniformMap = {
color() {
return Cesium.Color.GRAY;
},
};
var renderState = Cesium.RenderState.fromCache({
cull: {
enabled: true,
face: Cesium.CullFace.BACK,
},
depthTest: {
enabled: true,
},
});
this.drawCommand = new Cesium.DrawCommand({
modelMatrix: modelMatrix,
vertexArray: va,
shaderProgram: shaderProgram,
uniformMap: uniformMap,
renderState: renderState,
pass: Cesium.Pass.OPAQUE,
});
}
/**
* 实现Primitive接口，供Cesium内部在每一帧中调用
* @param {Cesium.FrameState} frameState
*/
update(frameState) {
if (!this.drawCommand) {
this.createCommand(frameState.context);
}
frameState.commandList.push(this.drawCommand);
}
}
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.globe.depthTestAgainstTerrain = true;
var origin = Cesium.Cartesian3.fromDegrees(-120, 26, 250000 / 2);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var primitive = new MyPrimitive(modelMatrix);
viewer.scene.primitives.add(primitive);
</script>
</body>
</html>