Showing off my custom webGL shader for real-time cloud layer

[program-sam]

Here is a post for anyone who might be interested and would want to read this 😊

I already had a cloud layer image on my globus that showed the current cloud pattern thanks to the data from openweathermap. It determines a detail level, fetches the relevant tiles and stitches it into one image (serverside). One image was needed rather than an XYZ layer because the edges of different zoom levels don't match nicely. And because it disappears when zooming in, it's also not that big of a deal if the detail is lower when zooming in. If anyone would like the code, I'd be happy to share it, but it would make this post too big.

That alone looks really nice:

But I still felt like it could use a bit more 'life'. I thought it would be really cool if this cloud layer could somewhat 'wave' as clouds do, so they would feel less static. Ofc. there are ways to do video overlays, but that felt overkill, and way to much data / processing power for adding just a simple fluctuation in this cloud image. Also video does not easily support transparency. I figured using WebGL shaders would be the best fit. But because I had 0 experience with webGL ,shaders or framebuffers I postponed it and just rolled with the static images for now.

That was until yesterday when I felt brave enough to give it a go! Especially the launch of the openglobus Sandbox gave me a fun tool to just play around with some lines of code to learn what they do. There I played around with some shader samples, and seeing how I can manipulate it. But then there was one more obstacle that I couldn't find in any of the examples. Makes sense because it is very specific. I still had no idea on how to use external texture sources within the shader. But nothing that google (and ChatGPT can't help me with)

So eventually I managed to make a shader that takes the transparent pixels of the cloud image, and fluctuates the brightness, offset with some perlin noise so it is not the same fluctuation everywhere on the planet. I also used only the pixels with some transparency so that the fully dense clouds keep that look.

That shader looks like this:

precision highp float;

uniform sampler2D iChannel0;
uniform float iGlobalTime;
uniform vec2 iResolution;

vec2 hash(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}

float noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);

    vec2 u = f * f * (3.0 - 2.0 * f);

    return mix(mix(dot(hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
                dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
            mix(dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
                dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    vec4 texColor = texture2D(iChannel0, uv);

    // Calculate the brightness of the clouds image
    float cloudBrightness = texColor.a; // Assuming the clouds image is grayscale, use one of the color channels

    // Add Perlin noise to the time-dependent factor
    float noiseValue = noise(uv * 100.0) * 5.0; // Adjust the scale as needed

    // Combine time-dependent factor and Perlin noise
    float brightness = mix(0.3 + 1.0 * sin(iGlobalTime + noiseValue), 1.2, clamp(cloudBrightness * 2.0, 0.0, 1.0));

    gl_FragColor = texColor * brightness;
}

The only adaptation I needed to make to have a source image available in the shader was to create an image() object with the desired source. the onload() function of that object will then load the texture into the shader, and even adds the function to update the shader to the 'draw' event of the globus.

Eventually this is the final result:

2023-11-28.17-39-06.mp4

How do you like it? I wanted it to be subtle, but is it noticeable if you don't know it's there?

One more point I still have doubts about. To make it work, I had to bind the texture again, on every draw event of the globus. I think this is because other parts of openglobus use this texture channel as well. I feel like this shouldn't be necessary per se to bind this texture again every draw event but I couldn't get it to work yet.

globus.renderer.events.on("draw", function (r) {
            gl.bindTexture(gl.TEXTURE_2D, texture);
            ...

Thanks for reading!
I was just really excited I managed to get this to work and wanted to share this

[Zemledelec]

This is amazing @program-sam! Please give me some time to think about it more, I think I have a few relative ideas to say. Could you also show an animation of what it looks like on the poles, or one pole with clouds - North or South?

[program-sam]

Thanks! yeah the poles are still a bit difficult, because WMT tiles, by definition don't go above 85 degrees if I'm not mistaken. so the stretched image doesn't reach the poles. I also did't scale the noise to be bigger at the poles to account for the stretching of the projection yet. but doesn't seem that bad.

By adding a simple gradient onto the poles I made the area "unavailable"

[Zemledelec]

Very convenient solution!

I thought about 3D texture or cube map as a data source for cloud noise data, then getting data for epsg4326(poles) and epsg3857 projection for tiles.

[Zemledelec]

...I mean what if render your shader not in a plane, but into cube map texture...

[program-sam]

I will definitely have to look into cubemaps then 😄 Would they be that much of a performance difference? Or would it mainly be a more convenient way to wrap a sphere?