Custom Rendering Question

I’m trying to get some basic custom rendering working, but not having much luck. I want to be able to take a large collection of latitude/longitude pairs and quickly push these to the cesium display. I’ve used billboards to do this previously, which worked fine, however I’m also trying to offload as much out of main memory as possible. Billboards continue to consume main memory it appears. So I tried my hand at some customer rendering. My sample code is below, but nothing is appearing. I don’t believe I’m properly setting the position information, but not entirely certain how to do this, so would appreciate any pointers.


What space are your coordinates in? Window coordinates? Try

gl_Position = czm_viewportOrthographic * vec4(position, 0.0, 1.0);

in the vertex shader. Also, I would make u_size much, much bigger when testing just to make sure that the points are being rendered.

Hi Daniel-
Thanks for the reply. My coordinates are Geographic Coordinate System (GCS), WGS-84-based latitude/longitude values such as 45.0 / 20.0.

In reading about czm_viewportOrthographic, it looks like that matrix transforms from window to clip coordinates. I tried that but it didn’t work either.

I also tried using the czm_inverseModel which transfroms from world to model coordinates and then czm_modelViewProjection that transforms from model to clip coordinates, such as:

gl_Position = czm_modelViewProjection * czm_inverseModel * vec4(position, 0.0, 1.0);

thinking that I basically want to go from world coordinates to clip coordinates, but still no luck. I also bumped u_size up to 50 just to be sure, but still no effect.


You may not need full custom rendering for this. Have you considered creating a new geometry and appearance? Here’s a simple but incomplete example for rendering points:

And here’s a draft tutorial:


Thanks for the tip Patrick, I will have a look at those. I’m still a bit baffled why this custom rendering won’t work.

A question for you, what format is gl_Position looking for anyways for a cesiumWidget-based canvas? Those should be clip coordinates, yes? I’m using a standard cesiumWidget. I’ve tried passing in decimal degrees, radians, and even cartesian coordinates, and then using various permutations of the czm matrix transformations from your glsl library in the vertex shader to determine gl_Position, but still no luck. I would note, that outside of using cesium, and just a standard html5-based canvas I am able to get my decimal degrees values to plot just fine by a basic transformation that converts my longitude values from -180 -> 180 over to -1 -> +1 and my latitude values from -90 -> +90 to -1 -> +1. But that clearly is a much simpler rendering canvas. Thanks for any insight you can offer.

Yes, gl_Position should be in clip coordinates. To render by passing WGS-84 latitude/longitude coordinates as a position attribute, you would need to convert them to Cartesian (x, y, z) coordinates and multiply it by the czm_viewProjection matrix to transform from world (Earth Fixed) to clip coordinates. Cesium converts all cartographic coordinates to Cartesian coordinates before rendering.

If you convert the coordinates to Cartesian space in the vertex shader, you are going to run into problems with the limited precision. You should convert the cartographics to cartesians with Ellipsoid.WGS84.cartographicToCartesian. If you inspect them after the conversion, you will see how large the values are and why you would run into precision problems using a shader. (NOTE: the cartographic coordinate units are expected to be in radians.)

After you can render the points, you will start to see jittering when you move the camera closer to the points. You can find out details about the problem and the solution we use in Cesium here:

You should check out the BillboardCollection.js for how the positions are encoded into the vertex buffer and BillboardCollectionVS.glsl for how they are decoded in the vertex shader.