const data = {
"type": "FeatureCollection",
"name": "buildingarea_line",
"features": [{
"type": "Feature",
"properties": {
"namec": "北京首都国际机场"
},
"geometry": {
"type": "LineString",
"coordinates": [
[116.627055232491998, 40.055627378113897],
[116.628141, 40.055613],
[116.628182612350003, 40.052731304190502],
[116.627999, 40.052519108073099],
[116.627729852233003, 40.052339832412997],
[116.627641, 40.052291],
[116.627513, 40.052240612866598],
[116.627302163703007, 40.0521314031106],
[116.627238054231, 40.0520453360134],
[116.627246056027005, 40.051963338797698],
[116.627321, 40.051763398357899],
[116.627745, 40.049174657589198],
[116.625625250102999, 40.048982643604198],
[116.625505, 40.0498365847169],
[116.623803613307999, 40.0497157617746],
[116.623555007438, 40.050923856097],
[116.62318932881, 40.050885001264703],
[116.621927998901, 40.0507663847945],
[116.621865877236004, 40.051151025730597],
[116.620551591161998, 40.051039124700701],
[116.620412595565995, 40.051080541221303],
[116.620087208000996, 40.051072310851602],
[116.619909967167004, 40.050817172072797],
[116.619305195405005, 40.050241725451897],
[116.618728471896006, 40.049651310425503],
[116.618466141591995, 40.049328122743297],
[116.618093931214005, 40.048682076928202],
[116.617936395319006, 40.048121864032701],
[116.617881926034997, 40.047582420690198],
[116.617943288744002, 40.047076662161999],
[116.616684972740998, 40.046957910814001],
[116.614991335862001, 40.046800999762198],
[116.614925817154997, 40.047053214132298],
[116.614783589089996, 40.047466057352302],
[116.614630021707995, 40.047749129793999],
[116.614452278260998, 40.048087052302101],
[116.614165354696993, 40.048470042886699],
[116.613779, 40.048852545832297],
[116.613269099166004, 40.0492082303846],
[116.612110688010006, 40.049875921990001],
[116.611828508984999, 40.050082159142498],
[116.611666595610004, 40.050262628599597],
[116.611498978555005, 40.050573733040402],
[116.611369969660004, 40.051223726640998],
[116.610234500008005, 40.0511250363922],
[116.610155700418005, 40.051047646482203],
[116.610127231861995, 40.0510280279643],
[116.610088208074998, 40.051014949310499],
[116.609172881516997, 40.050928778884803],
[116.608987429524007, 40.052183076416803],
[116.608967473879005, 40.052309663266897],
[116.608972035719006, 40.052356713382899],
[116.608948716708994, 40.052726067425702],
[116.608768081424003, 40.052733203963399],
[116.608757099152996, 40.053031114710002],
[116.607212517264003, 40.052882640794003],
[116.607452197590007, 40.051253823726299],
[116.607431706751001, 40.051166274632401],
[116.607397480298005, 40.051087136899199],
[116.60730732351, 40.051030554223601],
[116.607217166721995, 40.050982382925604],
[116.604739456291, 40.050751317388404],
[116.603803, 40.050663],
[116.603447358753002, 40.052943401322302],
[116.603351163672002, 40.053051],
[116.603257, 40.053089409244997],
[116.599147, 40.052656752479002],
[116.598734803067003, 40.052856842775697],
[116.597527, 40.052969],
[116.597265, 40.052997],
[116.597118942066004, 40.053029233639201],
[116.596992964140995, 40.053079271245601],
[116.596859, 40.053173],
[116.595897, 40.054068662544601],
[116.595873, 40.054136674547301],
[116.595905281555005, 40.054195],
[116.596389042454007, 40.054413644523898],
[116.595952879495997, 40.056727582144802],
[116.595987820480005, 40.056808211283403],
[116.596044602709995, 40.056910789888803],
[116.596320628336997, 40.057492739578699],
[116.596336629484995, 40.0575227365375],
[116.596396624012996, 40.057559],
[116.597347, 40.057649],
[116.597706506058003, 40.057913382912702],
[116.597628587349007, 40.0584954386077],
[116.597871, 40.058723394254599],
[116.598369764824, 40.058770164614799],
[116.598301581344998, 40.059162959975701],
[116.598321209046006, 40.059194957430201],
[116.598353209604994, 40.059210951526197],
[116.598875414499005, 40.059266930297397],
[116.598777377626007, 40.059873317461999],
[116.599339918951003, 40.059919418523201],
[116.599203, 40.060903254533898],
[116.599409, 40.060917219577298],
[116.599339, 40.061337],
[116.599164894707997, 40.061433],
[116.598339, 40.061347],
[116.598311, 40.061619],
[116.598031, 40.061600538863601],
[116.597849, 40.062895],
[116.597933, 40.062913],
[116.596999, 40.068827],
[116.596695, 40.068805],
[116.596649, 40.069147393475497],
[116.596770310020005, 40.069159989424797],
[116.596551538778002, 40.070373852529102],
[116.596001795220005, 40.0703255531267],
[116.595919060086999, 40.070928444675801],
[116.595368400602993, 40.070893222346399],
[116.595330575757004, 40.071179],
[116.595033, 40.071153060132197],
[116.594451255839004, 40.074743],
[116.589205, 40.074313],
[116.589083, 40.074621],
[116.589030777095999, 40.074669397828401],
[116.588936838669994, 40.0747014600583],
[116.582800660526004, 40.074135],
[116.582713, 40.074085],
[116.582625, 40.074009347802502],
[116.582573, 40.073895],
[116.581307145894996, 40.073771],
[116.581530729448005, 40.072419],
[116.581119, 40.072383],
[116.581523, 40.069877099353803],
[116.581072878963994, 40.069834538216803],
[116.581177, 40.069169389875697],
[116.580509194808002, 40.069097486247401],
[116.580380345313998, 40.069761221688999],
[116.579995493968994, 40.0697309382805],
[116.579616607188001, 40.072272111030898],
[116.578743889015001, 40.072230240800799],
[116.576947, 40.084397],
[116.576857149475003, 40.085464849289501],
[116.576486677662004, 40.087615277914303],
[116.575643, 40.092459277049599],
[116.573527, 40.105195039068498],
[116.574455, 40.105277],
[116.574059, 40.107795],
[116.575526843239004, 40.107923],
[116.575933, 40.105429],
[116.576333396436993, 40.105457],
[116.576528968359, 40.104231],
[116.577546934531, 40.104313006950697],
[116.577729, 40.103164685892501],
[116.578013859967001, 40.103003348079497],
[116.585122443265007, 40.103680506041201],
[116.585714300939998, 40.103719038342597],
[116.585793904829998, 40.103706722889903],
[116.585870690975995, 40.103656535549398],
[116.585904390183003, 40.103596052329799],
[116.585931179868993, 40.103533657190702],
[116.588783981849005, 40.103821985252502],
[116.598735802023995, 40.104641168803496],
[116.611048714991, 40.105718482908799],
[116.610520765931, 40.108905],
[116.610553, 40.108971],
[116.610615, 40.109009],
[116.613597, 40.109259],
[116.614104527612994, 40.106276180214699],
[116.614429, 40.106304901673397],
[116.614159415249006, 40.107917],
[116.616253367107007, 40.108104987527199],
[116.616047, 40.106293],
[116.615976858905995, 40.106230679428499],
[116.615235141482998, 40.106087],
[116.615359196377995, 40.105619],
[116.615796540367995, 40.105091488065298],
[116.615950617362003, 40.104543],
[116.616045, 40.104365],
[116.618710561989005, 40.097424580783702],
[116.618930765635, 40.097101],
[116.621727, 40.089493],
[116.622529168287002, 40.084389],
[116.627055232491998, 40.055627378113897]
]
}
}, ]
}
function SportsOuterGlow(cesiumContainer) {
// 初始化SportsOuterGlow类
if (!cesiumContainer) {
throw new Error('CesiumContainer does not exist')
}
this.viewer = undefined;
this.scene = undefined;
this.bloom = undefined;
this.positions = undefined;
this.indices = undefined;
this.st = [];
this.wallPositions = [];
this.geometry = undefined;
this.instance = undefined;
this.appearance = undefined
this.createCesiumXxample(cesiumContainer);
}
SportsOuterGlow.prototype.createCesiumXxample = function(cesiumContainer) {
// 创建Cesium实例
this.viewer = new Cesium.Viewer(cesiumContainer,{
imageryProvider: new Cesium.UrlTemplateImageryProvider ({
url: baseMapUrl.night,
maximumLevel : 16
})
});
this.configOptions();
this.init();
}
SportsOuterGlow.prototype.configOptions = function() {
// 初始化场景信息
if (!this.viewer) {
throw new Error('Please pass in the Cesium instance first')
}
this.viewer.scene.fxaa = true;
this.viewer.scene.postProcessStages.fxaa.enabled = true;
this.bloom = this.viewer.scene.postProcessStages.bloom;
this.bloom.enabled = true;
this.bloom.uniforms.glowOnly = false;
this.bloom.uniforms.contrast = 100;
this.bloom.uniforms.brightness = -0.3;
this.bloom.uniforms.delta = 1;
this.bloom.uniforms.sigma = 2;
this.bloom.uniforms.stepSize = 1;
}
SportsOuterGlow.prototype.initializaPositions = function() {
// 多边形位置信息构建
for (let i = 0; i < this.positions.length; i++) {
const bottomPoint = Cesium.Cartesian3.fromDegrees(...this.positions[i]);
const topPoint = Cesium.Cartesian3.fromDegrees(...this.positions[i], 500);
this.wallPositions.push(topPoint.x, topPoint.y, topPoint.z);
this.wallPositions.push(bottomPoint.x, bottomPoint.y, bottomPoint.z);
this.viewer.scene.camera.flyTo({
destination: topPoint
})
}
}
SportsOuterGlow.prototype.initializaIndex = function() {
// 多边形索引信息构建
for (let i = 0; i < this.positions.length * 2; i++) {
this.indices[i * 3] = i;
this.indices[i * 3 + 1] = i + 1;
this.indices[i * 3 + 2] = i + 2;
}
}
SportsOuterGlow.prototype.initializaUv = function () {
// 构建uv信息
for (let i = 0; i < this.positions.length / 2; i++) {
this.st[i * 8] = 1.0;
this.st[i * 8 + 1] = 1.0;
this.st[i * 8 + 2] = 1.0;
this.st[i * 8 + 3] = 1.0;
this.st[i * 8 + 4] = 1.0;
this.st[i * 8 + 5] = 1.0;
this.st[i * 8 + 6] = 1.0;
this.st[i * 8 + 7] = 1.0;
}
}
SportsOuterGlow.prototype.init = function() {
// 初始化数据
this.positions = data.features[0].geometry.coordinates;
this.initializaPositions();
this.indices = new Uint16Array(this.positions.length * 2 * 3);
this.initializaIndex();
this.initializaUv();
// 开始绘制墙体
this.drawWall();
}
SportsOuterGlow.prototype.createGeometry = function() {
// 创建geometry实例
this.geometry = new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: this.wallPositions
}),
st: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 2,
values: this.st
})
},
indices: this.indices,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: Cesium.BoundingSphere.fromVertices(this.wallPositions)
})
}
SportsOuterGlow.prototype.createInstance = function() {
// 创建Instance实例
this.instance = new Cesium.GeometryInstance({
geometry: this.geometry,
});
}
SportsOuterGlow.prototype.drawWall = function() {
// 绘制墙体
this.createGeometry();
this.createInstance();
if (this.instance && this.geometry) {
this.createPrimitive();
} else {
throw new Error("Draw the failure!");
}
}
SportsOuterGlow.prototype.createPrimitive = function() {
// console.log(this.st, this.wallPositions, this.indices)
this.createAppearance();
this.viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: this.instance,
appearance: this.appearance,
asynchronous: false,
}));
}
SportsOuterGlow.prototype.createAppearance = function() {
this.appearance = new Cesium.Appearance({
translucent: false,
renderState: {
blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND, //使用Alpha混合功能启用混合
depthTest: {
enabled: true,
}, //深度检测
depthMask: false, //将深度值写入深度缓冲区
},
material: new Cesium.Material({
fabric: {
uniforms: {
speed: 0.1,
},
source: getMS(),
},
}),
vertexShaderSource: createVertex(), //顶点着色器
fragmentShaderSource: createFragment(), //片段着色器
});
}
function createVertex() {
return `
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 normal;
attribute vec2 st;
attribute float batchId;
varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;
void main()
{
vec4 p = czm_computePosition();
v_positionEC = (czm_modelViewRelativeToEye * p).xyz; // position in eye coordinates
v_normalEC = czm_normal * normal; // normal in eye coordinates
v_st = st;
gl_Position = czm_modelViewProjectionRelativeToEye * p;
}
`
}
function createFragment() {
return `
varying vec2 v_st;
varying vec4 v_color;
uniform float speed;
void main() {
float speed = getSpeed();
float time= czm_frameNumber *speed;
// float a = abs( sin(v_st.y + time/2.5)) ;
gl_FragColor = vec4(v_st.x, v_st.y, 0., 1.);
}
`
}
function getMS() {
return `
uniform float speed;
float getSpeed(){
return speed;
}
`;
}
const cesium = new SportsOuterGlow('cesiumContainer');
This is my code,I passed in the ST property,But in my shader, my ST is 0