Cesium中DrawCommand使用【转】
Cesium中DrawCommand使用
viewer.scene.primitives.add(object)方法在添加自定义的物体时,首先会加载object里的update方法,若没有则会报如下错误
代码如下:
//定义一个Trangles类
function Trangles(options) {
this._viewer = options.viewer
this._modelMatrix = options.modelMatrix
this.arr = options.arr
}
//用prototype给定方法和属性
Trangles.prototype.getCommand = function(context) {
//顶点着色器
let v = `
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
void main()
{
vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
p = czm_modelViewProjectionRelativeToEye * p;
gl_Position = p;
}
`
//片元着色器
let f = `void main()
{
gl_FragColor = vec4(0,1,0,1);
}
`
//shaderProgram将两个着色器合并
var shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: v,
fragmentShaderSource: f
})
//渲染状态
var renderState = Cesium.RenderState.fromCache({
depthTest: {
enabled: false
},
depthMask: false,
blending: Cesium.BlendingState.ALPHA_BLEND
})
//索引数组Buffer
var indexBuffer = Cesium.Buffer.createIndexBuffer({
context: context,
typedArray: new Uint32Array([0, 1, 2]), //索引顺序
usage: Cesium.BufferUsage.STATIC_DRAW,
indexDatatype: Cesium.IndexDatatype.UNSIGNED_INT
})
//顶点数组Buffer
var vertexBuffer = Cesium.Buffer.createVertexBuffer({
context: context,
typedArray: Cesium.ComponentDatatype.createTypedArray(
Cesium.ComponentDatatype.FLOAT,
this.arr //顶点位置数组
),
usage: Cesium.BufferUsage.STATIC_DRAW
})
//用来表示逐个顶点的信息
var attributes = []
attributes.push({
index: 0,
vertexBuffer: vertexBuffer,
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
normalize: false
})
//顶点数组(设置顶点属性和索引Buffer)
var vertexArray = new Cesium.VertexArray({
context: context,
attributes: attributes,
indexBuffer: indexBuffer
})
//新建一个DrawCommand
this.pointCommand = new Cesium.DrawCommand({
primitiveType: Cesium.PrimitiveType.TRIANGLES,
shaderProgram: shaderProgram,
renderState: renderState,
vertexArray: vertexArray,
pass: Cesium.Pass.OPAQUE,
modelMatrix: this._modelMatrix
})
}
Trangles.prototype.destroy = function() {
//this.arr = [];
}
Trangles.prototype.update = function(frameState) {
if (this.pointCommand) {
var commandList = frameState.commandList
commandList.push(this.pointCommand)
this._viewer.scene.requestRender()
} else {
this.getCommand(this._viewer.scene.context)
}
}
//模型矩阵
var position = Cesium.Cartesian3.fromDegrees(119, 40, 0)
var heading = Cesium.Math.toRadians(0)
var pitch = Cesium.Math.toRadians(0)
var roll = Cesium.Math.toRadians(0)
var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
//顶点数组
var arr = [0, 0, 0, 0, 100000, 0, 100000, 100000, 0]
var temp = new Trangles({ viewer, modelMatrix, arr })
viewer.scene.primitives.add(temp)
------------------------------------------------------------------------------------------------------
原文链接:https://blog.csdn.net/sinat_41537539/article/details/106941041