1. A concise explanation of the problem you’re experiencing.
I want to draw a 3d radar image, my thinking is very simple.
- Read the data of each layer. Each layer of data has about 50,000 data points, the total is 19 layers.
2 .Draw 2 triangles for each point to form a rectangle, then forming a layer of radar images.
My idea may not be good, if there is a better way, please forward.
Now the problem is that after drawing 3 layers of data, the memory has occupied more than 200M, and there is no release.
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
var PrimitiveTriangles = (function(){
var vertexShader;
var fragmentShader;
var viewer;
function _(options){
if (!(options.Cartesians && options.Cartesians.length >= 2)) {
return;
}
viewer = options.viewer;
vertexShader = getVS();
fragmentShader = getFS();
var postionsTemp = [];
var colorsTemp = [];
var indicesTemp = [];
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;
}
for (var i = 0; i < options.Cartesians.length; i+=3) {
indicesTemp.push(i);
indicesTemp.push(i+1);
indicesTemp.push(i+2);
}
this.positionArr = new Float64Array(postionsTemp);
this.colorArr = new Float32Array(colorsTemp);
this.indiceArr = new Uint32Array(indicesTemp);
this.geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);
this.appearance = CreateAppearence(fragmentShader, vertexShader);
this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: this.geometry
}),
appearance: this.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.TRIANGLES,
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,
//lineWidth: 4.0
},
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;\
}\
";
}
function getFS() {
return "varying vec4 v_color;\
void main()\
{\
gl_FragColor =v_color;\
}\
";
}
return _;
})();
var startLng = 65;
var endLng = 145;
var startLat = 17;
var endLat = 55;
var imageWidth = 1366;
var imageHeight = 570;
var lngInterval = (endLng - startLng) / imageWidth;
var latInterval = (endLat - startLat) / imageHeight;
function drawImage(data, height){
var instances = [];
var positions = [];
var colors = [];
for(var row=0;row<imageHeight;row++){
for(var col=0;col<imageWidth;col++){
var i = ((imageWidth * row) + col) * 4;
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var a = data[i+3];
if(!(r == 0 && g == 0 && b == 0)){
var indexNext = 0;
for(var pointerCol=col+1;pointerCol<imageWidth;pointerCol++){
var iNext = ((imageWidth * row) + pointerCol) * 4;
var rNext = data[iNext];
var gNext = data[iNext+1];
var bNext = data[iNext+2];
var aNext = data[iNext+3];
if(!(rNext == 0 && gNext == 0 && bNext == 0)){
if(r == rNext && g == gNext && b == bNext){
indexNext++;
}
else{
break;
}
}
else{
break;
}
}
var sLng = startLng + col * lngInterval;
var eLng = startLng + (col + indexNext + 1) * lngInterval;
var sLat = endLat - (row + 1) * latInterval;
var eLat = endLat - row * latInterval;
positions.push(Cesium.Cartesian3.fromDegrees(sLng, eLat , height));
positions.push(Cesium.Cartesian3.fromDegrees(sLng, sLat , height));
positions.push(Cesium.Cartesian3.fromDegrees(eLng, sLat , height));
positions.push(Cesium.Cartesian3.fromDegrees(eLng, sLat , height));
positions.push(Cesium.Cartesian3.fromDegrees(eLng, eLat , height));
positions.push(Cesium.Cartesian3.fromDegrees(sLng, eLat , height));
r = r / 255;
g = g / 255;
b = b / 255;
colors.push(r,g,b,0.7);
colors.push(r,g,b,0.7);
colors.push(r,g,b,0.7);
colors.push(r,g,b,0.7);
colors.push(r,g,b,0.7);
colors.push(r,g,b,0.7);
col = col + indexNext;
}
}
}
var test = new PrimitiveTriangles({
viewer: viewer,
Cartesians: positions,
Colors: colors
});
}
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
4. The Cesium version you’re using, your operating system and browser.
window7 + Cesium1.44 + chorme