Adding a Fragment Shader to a 3D Tileset

CesiumJS
1

Hi, I’m trying to overlay a shader onto a 3D tileset to make the tiles different colors based on their model coordinates (east side of the model shade red, west side shade blue). To do this, I was going to transform the camera’s position and view angle to the tileset coordinate system, and then calculate each vertex’ position in the tileset coordinate system to shade each vertex.

What is the best way to get the camera’s position in the tileset’s coordinate system?

2

I figured it out, the following function from Camera Sandcastle allowed me to transform into model coordinates:

function setReferenceFrame() {
Sandcastle.declare(setReferenceFrame);

var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

// View in east-north-up frame
var camera = viewer.camera;
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(
transform,
new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
);

// Show reference frame. Not required.
referenceFramePrimitive = scene.primitives.add(
new Cesium.DebugModelMatrixPrimitive({
modelMatrix: transform,
length: 100000.0,
})
);
}

And then using the czm_windowToEyeCoordinates function within the shader gave me Eye Coordinates that were easier to translate to the model coordinates.

Cheers

3

@jarchibald14

Thank you for posting an update. I looked over your work and your solution seems robust. I will point other community members to this thread if a similar question comes up.

-Sam