加载中…Cesium学习笔记-工具篇17-PrimitivePoint自定义渲染-点
(2018-08-28 16:12:06)
标签：
cesiumprimitive自定义渲染shadercesium自定义画点 |
分类： Cesium |
今天我们来学习下cesium最重要一个对象--primitive，在之前基础系列中，我们已经接触过primitive，但是接触的都是primitive为我们封装好的接口，我们今天来学习下primitive更深层次的api。我们有时候绘制对象时，需要自己灵活控制渲染对象的顶点和颜色（纹理），虽然cesium已经给我们提供了很多现成的基础图元，但还是不够灵活，今天我们就从三维基础绘制原理来学习下在cesium中，如何绘制基本图元：点、线、三角面片以及纹理贴图。如果你熟悉三维渲染底层，那么对点、线、三角面片、纹理这些概念一定非常了解，应为它们是组成三维渲染对象的基础。任何三维对象几何属性都是由复杂的点、线、三角面片这三种基本类型组成，然后加上纹理贴图就有了逼真的外观。那么今天我们就先来了解下如何用primitive接口绘制自定义点。在这里我要感谢我的好朋友MikesWei，在我学习cesium过程中给予无私地帮助。
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);
}
}
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 _;
})();
首先我们看primitive的官方api：
查看geometry：
然后我们来看appearance：
material：设置材质
vertexShaderSource：设置顶点着色器代码
fragmentShaderSource：设置片源着色器代码。
顶点着色器和片源着色器都是使用GLSL语言编写，接触webgl的童鞋对此一定非常了解，我对此还没入门，无法说出个所以然来。
知道绘制primitive的要点后，下面就是具体实现，直接上代码：
var PrimitivePoints=(
代码中我们定义了PrimitivePoints自定义渲染点类，可以绘制任意多个点，并且改变点的位置和颜色。
其中定义geometry代码：
http://s5/mw690/006pZnPwzy7nbw43kdC04&690
在attributes中指定位置和颜色，primitiveType指定为POINTS。特别注意位置和颜色传入的数据类型。
在attributes中指定位置和颜色，primitiveType指定为POINTS。特别注意位置和颜色传入的数据类型。
定义appearance代码：
顶点着色器代码：
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔