Clouds in Cesium here: - How did they do it?

1. A concise explanation of the problem you’re experiencing.

I want to create a natural looking 3D cloud layer on top of the globe.

Not really real time, real life like here: but just the visual approach.

On this website it’s amazing how the clouds are looking:

So check how this look there! But ok… how to implement this in Cesium globes?

I do not have experience with shaders… so maybe that’s my issue?

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var origin = Cesium.Cartesian3.fromDegrees(5.587778, 53.108611, 200.0);

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);

var cloudsSettings.model = “/clouds/flat2.gltf”

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({

        url: cloudsSettings.model,//,

        show: true,                     // default

        modelMatrix: modelMatrix,

        incrementallyLoadTextures: true,

        asynchronous: true,

        clampAnimations: true,

        shadows: true,

        color: Cesium.Color.WHITE,

        colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,

        colorBlendAmount: 0.25,

        silhouetteColor: Cesium.Color.RED,

        silhouetteSize: 10,

        scale: 2.0,                     // double size

        minimumPixelSize: 1280,          // never smaller than 128 pixels

        maximumScale: 20000,             // never larger than 20000 * model size (overrides minimumPixelSize)

        allowPicking: false,            // not pickable

        debugShowBoundingVolume: false, //false, // default

        debugWireframe: false //false


    model.readyPromise.then(function (model) {

        // Play all animations when the model is ready to render



3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I do get a failure on the shaders, wich is implemented in the flat2.gltf file.

this is the error:

WebGL: INVALID_VALUE: shaderSource: string not ASCII

Cesium.js:497 [Cesium WebGL] Fragment shader compile log: ERROR: 0:? : ‘’ : syntax error

This is the shader I’m using:


precision highp float;

uniform sampler2D u_diffuse;

varying vec2 v_texcoord0;

void main(void) {

vec4 color;

vec4 diffuse;

float alpha;

// diffuse

diffuse = texture2D(u_diffuse, v_texcoord0);

// sum

alpha = diffuse.x; // take alpha from red channel

color = vec4(vec3(1.0, 1.0, 1.0) * alpha, alpha); // pre multiply alpha

gl_FragColor = color;



precision highp float;

uniform mat3 u_normalMatrix;

uniform mat4 u_modelViewMatrix;

uniform mat4 u_projectionMatrix;

attribute vec3 a_position;

attribute vec2 a_texcoord0;

attribute vec3 a_normal;

attribute vec3 a_textangent;

attribute vec3 a_texbinormal;

varying vec3 v_normal;

varying vec3 v_tangent;

varying vec3 v_bitangent;

varying vec3 v_vertex;

varying vec2 v_texcoord0;

void main(void) {

// pass on attributes to Fragment Shader

v_texcoord0 = a_texcoord0;

// normal in viewSpace

v_normal = normalize(czm_normal * a_normal);

v_tangent = normalize(czm_normal * a_textangent);                       // tangent in eye coordinates

v_bitangent = normalize(czm_normal * a_texbinormal);                   // bitangent in eye coordinates

// vertex in viewSpace

vec4 vertexVS = u_modelViewMatrix * vec4(a_position, 1.0);

v_vertex = vec3(vertexVS);

// standard positioning

gl_Position = u_projectionMatrix * vertexVS;


4. The Cesium version you’re using, your operating system and browser.

1.40. Google chrome 64bits. W10.

Could you upload the glTF file?

The error is “string not ASCII” which suggests there is something wrong with how the glTF is constructed.

In the GeoFS project, billboards are used for the clouds:!searchin/cesium-dev/geofs/cesium-dev/ElkPcTGhTwo/sg5wAnZfDQAJ

So I will add some .png images as billboards to create clouds.

So I will not use the .glft files.

I will keep you updated on how I will create the clouds.


Cumulus clouds are billboards in GeoFS. But layered clouds (nimbus, stratus, etc…) are models (quads) with a JPG texture and a special shader to user red channel as alpha source. This is a trick to make JPGs transparent and not to use heavy PNG files for high resolution cloud textures.

PS: I would appreciate to be contacted before using and sharing GeoFS material (models, shaders, etc.) on public boards.



Hello Xavier,

Thanks for your post! I will contact you if I use some samples of your work here for the open discussions on the great Cesium app.

Have good day!