Clouds in Cesium here: http://www.geo-fs.com/geofs.php - How did they do it?

[Geoneer]

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: http://www.geo-fs.com/geofs.php but just the visual approach.

On this website it's amazing how the clouds are looking: http://www.geo-fs.com/geofs.php 

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

            model.activeAnimations.addAll();

        });

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:

#1:

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;

}

#2:

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.

[Sean Lilley]

Could you upload the glTF file?

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

[Geoneer]

In the GeoFS project, billboards are used for the clouds:

https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=https%3A%2F%2Fcesiumjs.org%2Fforum%2F#!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.

[Xavier Tassin]

Hi,

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.

Cheers,

Xavier.

[Geoneer]

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!