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.