Forcing a low poly look on Cesium3DTileset

CesiumJS
4

You can indeed change the quality setting, by increasing the maximum screen space error on the globe (see https://cesium.com/docs/cesiumjs-ref-doc/Globe.html?classFilter=globe#maximumScreenSpaceError). If you use the Cesium inspector (see https://sandcastle.cesium.com/index.html?src=Cesium%20Inspector.html) and trigger “Terrain > Wireframe” or “Terrain > show tile coordinates” you can see the exact tiles loading in.

But then a second piece to this is you’d need the right shading. From the article you linked, by default it’s going to look like the image on the right side, even if you get this low poly geometry:

image
image3284×1151 197 KB

Here’s what this looks like in CesiumJS. Move the timeline slider to change the lighting.

Flat shading isn’t actually supported in WebGL as far as I’m aware. You’d need to implement one of the solutions in this post, which I think requires modifying the source code. If you’re comfortable doing that, you can modify GlobeFS.glsl here: https://github.com/CesiumGS/cesium/blob/bb9f245cef5659b2d7020ce70cf072b9f6add92e/Source/Shaders/GlobeFS.glsl#L231.

First add #extension GL_OES_standard_derivatives : enable at the very top of the file. Then your new main function would look like this:

void main()
{
    vec3 U = dFdx(v_positionEC);
    vec3 V = dFdy(v_positionEC);   
    vec3 N = normalize(cross(U,V));
    gl_FragColor = vec4(N, 1.0);
    return;

Here’s what the globe looks like this with this view:

image
image1086×977 250 KB

And at the grand canyon:

image
image1230×643 103 KB

Of course this is just visualizing the normal. You could apply any custom lighting equation here, or base it on the sun position etc. Let me know if you end up using this - I’d love to see how this art project turns out! It’s kind of fun playing with this stylized view of the global terrain.

1 Like