我們有時候繪制對象時阿纤，需要自己靈活控制渲染對象的頂點(diǎn)和顏色（紋理）甚负，雖然cesium已經(jīng)給我們提供了很多現(xiàn)成的基礎(chǔ)圖元否淤，但還是不夠靈活，今天我們就從三維基礎(chǔ)繪制原理來學(xué)習(xí)下在cesium中沃饶，如何繪制基本圖元：點(diǎn)母廷、線、三角面片以及紋理貼圖糊肤。如果你熟悉三維渲染底層琴昆，那么對點(diǎn)、線馆揉、三角面片业舍、紋理這些概念一定非常了解，應(yīng)為它們是組成三維渲染對象的基礎(chǔ)把介。任何三維對象幾何屬性都是由復(fù)雜的點(diǎn)勤讽、線、三角面片這三種基本類型組成拗踢，然后加上紋理貼圖就有了逼真的外觀脚牍。那么今天我們就先來了解下如何用primitive接口繪制自定義點(diǎn)。
1 查看官方API
首先我們看primitive的官方api巢墅，可以看到primitive兩個重要對象：geometry和appearance：
image.png
1.1 查看geometry的官方api：
image.png
這里的PrimitiveType就是指定該幾何對象圖元類型是那種诸狭，一共有以下幾種：
image.png
1.2 查看appearance的官方api.
這里我們需要關(guān)注圖中標(biāo)出的三個屬性：
material：設(shè)置材質(zhì)
vertexShaderSource：設(shè)置頂點(diǎn)著色器代碼
fragmentShaderSource：設(shè)置片源著色器代碼。
image.png
2 繪制點(diǎn)
頂點(diǎn)著色器和片源著色器都是使用GLSL語言編寫君纫，接觸webgl的童鞋對此一定非常了解驯遇，我對此還沒入門，無法說出個所以然來蓄髓。
知道繪制primitive的要點(diǎn)后叉庐，下面就是具體實(shí)現(xiàn)，直接上代碼：
var viewer = new Cesium.Viewer('cesiumContainer');
//封裝PrimitivePoints
var PrimitivePoints=(
function () {
var vertexShader;
var fragmentShader;
var geometry;
var appearance;
var viewer;
function _(options) {
viewer = options.viewer;
vertexShader = getVS();
fragmentShader = getFS();
if (options.Cartesians && options.Cartesians.length >= 2) {
var postionsTemp = [];
var colorsTemp = [];
var indicesTesm = [];
if (options.Colors && options.Colors.length === options.Cartesians.length * 4) {
for (var i = 0; i < options.Cartesians.length; i++) {
postionsTemp.push(options.Cartesians[i].x);
postionsTemp.push(options.Cartesians[i].y);
postionsTemp.push(options.Cartesians[i].z);
}
colorsTemp = options.Colors;
} else {
for (var i = 0; i < options.Cartesians.length; i++) {
postionsTemp.push(options.Cartesians[i].x);
postionsTemp.push(options.Cartesians[i].y);
postionsTemp.push(options.Cartesians[i].z);
//
colorsTemp.push(0.0);
colorsTemp.push(0.0);
colorsTemp.push(1.0);
colorsTemp.push(1.0);
}
}
//頂點(diǎn)索引（坐標(biāo)點(diǎn)下標(biāo)的連接順序）
for (var i = 0; i < options.Cartesians.length; i++) {
indicesTesm.push(i);
}
this.positionArr = new Float64Array(postionsTemp);
this.colorArr = new Float32Array(colorsTemp);
this.indiceArr = new Uint16Array(indicesTesm);
} else {
var p1 = Cesium.Cartesian3.fromDegrees(0, 0, -10);
var p2 = Cesium.Cartesian3.fromDegrees(0, 0.001, -10);
this.positionArr = new Float64Array([
p1.x, p1.y, p1.z,
p2.x, p2.y, p2.z
]);
this.colorArr = new Float32Array([
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0
]);
this.indiceArr = new Uint16Array([0, 1]);
}
geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);
appearance = CreateAppearence(fragmentShader, vertexShader);
this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance,
asynchronous: false
}));
}
function CreateGeometry(positions, colors, indices) {
return new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: positions
}),
color: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 4,
values: colors
})
},
indices: indices,
primitiveType: Cesium.PrimitiveType.POINTS,
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
}
function CreateAppearence(fs, vs) {
return new Cesium.Appearance({
renderState: {
blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
depthTest: { enabled: true },
depthMask: true
},
fragmentShaderSource: fs,
vertexShaderSource: vs
});
}
function getVS() {
return "attribute vec3 position3DHigh;\
attribute vec3 position3DLow;\
attribute vec4 color;\
varying vec4 v_color;\
attribute float batchId;\
void main()\
{\
vec4 p = czm_computePosition();\
v_color =color;\
p = czm_modelViewProjectionRelativeToEye * p;\
gl_Position = p;\
gl_PointSize=8.0;\
}\
";
}
function getFS() {
return "varying vec4 v_color;\
void main()\
{\
float d = distance(gl_PointCoord, vec2(0.5,0.5));\
if(d < 0.5){\
gl_FragColor = v_color;\
}else{\
discard;\
}\
}\
";
}
_.prototype.remove = function () {
if (this.primitive != null) {
viewer.scene.primitives.remove(this.primitive);
this.primitive = null;
}
}
_.prototype.updateCartesianPosition = function (cartesians) {
if (this.primitive != null) {
viewer.scene.primitives.remove(this.primitive);
if (cartesians && cartesians.length < 2) { return; }
var postionsTemp = [];
var colorsTemp = [];
var indicesTesm = [];
for (var i = 0; i < cartesians.length; i++) {
postionsTemp.push(cartesians[i].x);
postionsTemp.push(cartesians[i].y);
postionsTemp.push(cartesians[i].z);
colorsTemp.push(0.0);
colorsTemp.push(0.0);
colorsTemp.push(1.0);
colorsTemp.push(1.0);
}
for (var i = 0; i < cartesians.length; i++) {
indicesTesm.push(i);
}
this.positionArr = new Float64Array(postionsTemp);
this.colorArr = new Float32Array(colorsTemp);
this.indiceArr = new Uint16Array(indicesTesm);
geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);
appearance = CreateAppearence(fragmentShader, vertexShader);
this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance,
asynchronous: false
}));
} else { return;}
}
_.prototype.updateCartesianPositionColor = function (cartesians, colors) {
if (colors.length === cartesians.length * 4) { } else { return; }
if (this.primitive != null) {
viewer.scene.primitives.remove(this.primitive);
if (cartesians && cartesians.length < 2) { return; }
var postionsTemp = [];
var indicesTesm = [];
for (var i = 0; i < cartesians.length; i++) {
postionsTemp.push(cartesians[i].x);
postionsTemp.push(cartesians[i].y);
postionsTemp.push(cartesians[i].z);
}
for (var i = 0; i < cartesians.length; i++) {
indicesTesm.push(i);
}
this.positionArr = new Float64Array(postionsTemp);
this.colorArr = new Float32Array(colors);
this.indiceArr = new Uint16Array(indicesTesm);
geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);
appearance = CreateAppearence(fragmentShader, vertexShader);
this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance,
asynchronous: false
}));
} else { return; }
}
return _;
})();
//定義要顯示的點(diǎn)坐標(biāo)（經(jīng)緯度）
var positions = new Float64Array([
110.2, 20.6,
110.2, 21.9,
111, 23
]);
var cartesian3Positions = Cesium.Cartesian3.fromDegreesArray(positions);
//定義要顯示的點(diǎn)的顏色（4個元素定義一個點(diǎn)的顏色（紅綠藍(lán)透明度））
var Colors = new Float64Array([
1.0,0.0,0.0,1.0,
0.0,1.0,0.0,1.0,
0.0,0.0,1.0,1.0
]);
var p = new PrimitivePoints({
viewer:viewer,
Cartesians:cartesian3Positions,
Colors:Colors
});
image.png
