Help with Cesium NetCDF Project

CesiumJS
1

Hello,
I am trying to make a new visualization project using Cesium. I need some assistance with a problem. I think it is my lack of graphics and geo knowledge. I used Java to extract longitude and latitude from a NetCDF file.
Then I extracted the water temperature. Now I have 3 arrays of data, lat, long, and temp. I want to make a layer over the globe and color each lat, long point the appropriate color. I have tried everything. I made points, rectangles, polylines, and custom fabrics. Also, my arrays are of size lat:876, lon:626, temp: 876 * 626 = 548376. If you have some optimizations I might use for this size data set, that would be great also.

This is my point collection which works best. This is ok, but I would rather have a flat surface.
function drawWaterTemp() {
tempCollection = scene.primitives.add(new Cesium.PointPrimitiveCollection());
for(var i = 0; i < latLen; i++) {
for(var j = 0; j < lonLen; j++) {
if(waterTemp[i * lonLen + j] !== -10.0) { // no data at -10.0
tempCollection.add({
position : new Cesium.Cartesian3.fromDegrees(lonPoints[j], latPoints[i]),
color : new Cesium.Color.fromCssColorString(tempColorScale(waterTemp[i * lonLen + j]))
});
}
}
}
}

``

This is my polylines with my custom fabric. It won’t update for every fragment, it just puts the whole line to the last color of the loop.
Cesium.Material._materialCache.addMaterial(‘WaterTemp’, {
fabric : {
type : ‘WaterTemp’,
uniforms : {
color : new Cesium.Color(0.0, 1.0, 0.0, 1.0)
},
components : {
diffuse : ‘color.rgb’,
alpha : ‘color.a’
}
}
});

function drawTempLine() {
var material = Cesium.Material.fromType(‘WaterTemp’);

polylines = scene.primitives.add(new Cesium.PolylineCollection());
for(var 02; i < latLen; i++) {
    var positions = [];
   
    for(var j = 0; j < lonLen; j++) {
        positions.push(lonPoints[j], latPoints[i]);
        if(waterTemp[i * lonLen + j] !== -10.0) {
            material.uniforms.color = `new Cesium.Color.fromCssColorString(tempColorScale(waterTemp[i * lonLen + j]));`
        }
    }
   
    polylines.add({
        positions : Cesium.Cartesian3.fromDegreesArray(positions),
        width : 1,
        material : material
    });
}

}

``

This is my rectangles solution. Its sort of ok, but really slow.
function drawWaterTempLotRect() {
var instances = ;

for(var i = 0; i < latLen; i+=2) {
    for (var j = 0; j < lonLen; j+=2) {
        if(waterTemp[i * lonLen + j] !== -10.0) {  // no data at -10.0
            instances.push(new Cesium.GeometryInstance({
                geometry : new Cesium.RectangleGeometry({

rectangle : Cesium.Rectangle.fromDegrees(lonPoints[j], latPoints[i], lonPoints[j] + 0.25, latPoints[i] + 0.25)
}),
attributes : {

color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color.fromCssColorString(tempColorScale(waterTemp[i * lonLen + j])))
}
}));
}
}
}

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : instances,
    appearance : new Cesium.PerInstanceColorAppearance()
}));

}

``

If anyone can help, I would greatly appreciate it. I have been struggling with finding solutions to this for a couple of weeks.

2

Hi Trevor,

I had a similar problem too.

Perhaps, instead of RectangleGeometry, it may be use the billboard or point.

Please take a look at our demo site (render in real time volume rendering netcdf on cesium) at

http://153.149.8.117/grid_viz.html?varCols=temp,rh&gridStep=10&zAdjustment=1000

Thanks,

Ryousuke

2015年9月2日水曜日 6時28分10秒 UTC+9 Trevor Skelton:

3

Thanks for the help! I had found your project before and viewed it. I knew it would help me. Although, I have looked through your source code to see what you did. I saw you just made a billboard for each point with a white 3*3 square png and multiplied the point by a color. So, I copied the png onto my site, made billboards, and then ran it. Mine was running so slow, it crashed the browser. So then I split my data in half because I thought the data might be to large. That didn’t work. So, my question is, is there any optimization or certain steps to make it load differently? I have 548,376 points to render if I render them all. When I load your project up, it’s pretty much instant and never slows down.

4

I may have found a solution. I just found some code. I am going to try it out today. It simply renders a few thousand points at each frame of requestanimationframe. I didn’t even think of that. I was telling it to load 548 thousand at one time.