WebGPU Sky Clouds Interesting projects mix this effect with skybox background Night time sky version moon in background stars Add customizable version tweak fiddle with magic numbers in shader var script document createElement script script type text javascript script async false script src https cdnjs cloudflare com ajax libs gl matrix 2 6 0 gl matrix min js document head appendChild script const canvas document createElement canvas document body appendChild canvas canvas width canvas height 512 console log canvas width canvas height const context canvas getContext webgpu const gpu navigator gpu console log gpu gpu const adapter await gpu requestAdapter const device await adapter requestDevice const devicePixelRatio 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 uvs vec2 f32 vertex fn main builtin vertex_index VertexIndex u32 VSOut var s 0 9 var pos array vec2 f32 4 vec2 f32 s s vec2 f32 s s vec2 f32 s s vec2 f32 s s s 1 0 var uvs array vec2 f32 4 vec2 f32 s s vec2 f32 s s vec2 f32 s s vec2 f32 s s var vsOut VSOut vsOut Position vec4 f32 pos VertexIndex 0 0 1 0 vsOut uvs uvs VertexIndex 0 5 0 5 0 1 return vsOut var fragWGSL struct Uniforms mytimer f32 group 0 binding 0 var mySampler sampler group 0 binding 1 var myTexture texture_2d f32 group 0 binding 2 var uniform uniforms Uniforms fn mysmoothstep edge0 f32 edge1 f32 x f32 f32 var t clamp x edge0 edge1 edge0 0 0 1 0 return t t 3 0 2 0 t fn hash p vec2 f32 vec2 f32 var pp vec2 f32 dot p vec2 f32 127 1 311 7 dot p vec2 f32 269 5 183 3 return 1 0 2 0 fract sin pp 43758 5453123 fn noise p vec2 f32 f32 var K1 0 366025404 sqrt 3 1 2 var K2 0 211324865 3 sqrt 3 6 var i floor p p x p y K1 var a p i i x i y K2 var o vec2 f32 1 0 0 0 a x a y vec2 f32 1 0 0 0 vec2 f32 0 0 1 0 if a x a y o vec2 f32 0 0 1 0 var o a x a y vec2 f32 1 0 0 0 vec2 f32 0 0 1 0 vec2 of 0 5 0 5 vec2 f32 sign a x a y sign a y a x var b a o K2 var c a 1 0 2 0 K2 var h max 0 5 vec3 f32 dot a a dot b b dot c c vec3 f32 0 0 0 0 0 0 var n h h h h vec3 f32 dot a hash i 0 0 dot b hash i o dot c hash i 1 0 return dot n vec3 f32 70 0 fn fbm n vec2 f32 f32 var m mat2x2 f32 vec2 f32 1 6 1 2 vec2 f32 1 2 1 6 var total 0 0 var amplitude 0 1 var nn n for var i 0 i 7 i i 1 total total noise nn amplitude nn m n amplitude amplitude 0 4 return total fragment fn main location 0 uvs vec2 f32 location 0 vec4 f32 var m mat2x2 f32 vec2 f32 1 6 1 2 vec2 f32 1 2 1 6 var cloudscale 1 1 var speed 0 03 var clouddark 0 5 var cloudlight 0 3 var cloudcover 0 2 var cloudalpha 8 0 var skytint 0 5 var skycolour1 vec3 f32 0 2 0 4 0 6 var skycolour2 vec3 f32 0 4 0 7 1 0 var iTime uniforms mytimer var p uvs xy var uv p var time iTime speed var q fbm uv cloudscale 0 5 ridged noise shape var r 0 0 uv uv cloudscale uv uv q time var weight 0 8 for var i 0 i 8 i i 1 r r abs weight noise uv uv m uv time weight weight 0 7 noise shape var f 0 0 uv p uv uv cloudscale uv uv q time weight 0 7 for var i 0 i 8 i i 1 f f weight noise uv uv m uv time weight weight 0 6 f f r f noise colour var c 0 0 time iTime speed 2 0 uv p uv uv cloudscale 2 0 uv uv q time weight 0 4 for var i 0 i 7 i i 1 c c weight noise uv uv m uv time weight weight 0 6 noise ridge colour var c1 0 0 time iTime speed 3 0 uv p uv uv cloudscale 3 0 uv uv q time weight 0 4 for var i 0 i 7 i i 1 c1 c1 abs weight noise uv uv m uv time weight weight 0 6 c c c1 var skycolour mix skycolour2 skycolour1 p y var cloudcolour vec3 f32 1 1 1 1 0 9 clamp clouddark cloudlight c 0 0 1 0 f cloudcover cloudalpha f r var result mix skycolour clamp skytint skycolour cloudcolour vec3 f32 0 0 vec3 f32 1 0 clamp f c 0 0 1 0 var fragColor vec4 f32 result 1 0 return fragColor let textureSampler device createSampler minFilter linear magFilter linear const img document createElement img img src https notebook xbdev net var images test512 png await img decode const basicTexture device createTexture size img width img height 1 format presentationFormat bgra8unorm rgba8unorm usage 0x2 0x4 GPUTextureUsage COPY_DST GPUTextureUsage TEXTURE_BINDING const imageCanvas document createElement canvas imageCanvas width img width imageCanvas height img height const imageCanvasContext imageCanvas getContext 2d imageCanvasContext drawImage img 0 0 imageCanvas width imageCanvas height const imageData imageCanvasContext getImageData 0 0 imageCanvas width imageCanvas height let textureData new Uint8Array img width img height 4 for let x 0 x img width img height 4 x textureData x imageData data x device queue writeTexture texture basicTexture textureData offset 0 bytesPerRow img width 4 rowsPerImage img height img width img height 1 const timerUniformBuffer device createBuffer size 4 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST const timestep new Float32Array 0 0 device queue writeBuffer timerUniformBuffer 0 timestep const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d binding 2 visibility GPUShaderStage FRAGMENT buffer type uniform const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource textureSampler binding 1 resource basicTexture createView binding 2 resource buffer timerUniformBuffer const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip frontFace ccw cullMode back stripIndexFormat uint32 GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadOp clear clearValue r 0 0 g 0 5 b 0 5 a 1 0 storeOp store function frame timestep 0 0 005 device queue writeBuffer timerUniformBuffer 0 timestep renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setBindGroup 0 uniformBindGroup renderPass draw 4 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log ready
for var i 0 i 7 i i 1 c c weight noise uv uv m uv time weight weight 0 6 noise ridge colour var c1 0 0 time iTime speed 3 0 uv p uv uv cloudscale 3 0 uv uv q time weight 0 4 for var i 0 i 7 i i 1 c1 c1 abs weight noise uv uv m uv time weight weight 0 6 c c c1 var skycolour mix skycolour2 skycolour1 p y var cloudcolour vec3 f32 1 1 1 1 0 9 clamp clouddark cloudlight c 0 0 1 0 f cloudcover cloudalpha f r var result mix skycolour clamp skytint skycolour cloudcolour vec3 f32 0 0 vec3 f32 1 0 clamp f c 0 0 1 0 var fragColor vec4 f32 result 1 0 return fragColor let textureSampler device createSampler minFilter linear magFilter linear const img document createElement img img src https notebook xbdev net var images test512 png await img decode const basicTexture device createTexture size img width img height 1 format presentationFormat bgra8unorm rgba8unorm usage 0x2 0x4 GPUTextureUsage COPY_DST GPUTextureUsage TEXTURE_BINDING const imageCanvas document createElement canvas imageCanvas width img width imageCanvas height img height const imageCanvasContext imageCanvas getContext 2d imageCanvasContext drawImage img 0 0 imageCanvas width imageCanvas height const imageData imageCanvasContext getImageData 0 0 imageCanvas width imageCanvas height let textureData new Uint8Array img width img height 4 for let x 0 x img width img height 4 x textureData x imageData data x device queue writeTexture texture basicTexture textureData offset 0 bytesPerRow img width 4 rowsPerImage img height img width img height 1 const timerUniformBuffer device createBuffer size 4 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST const timestep new Float32Array 0 0 device queue writeBuffer timerUniformBuffer 0 timestep const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d binding 2 visibility GPUShaderStage FRAGMENT buffer type uniform const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource textureSampler binding 1 resource basicTexture createView binding 2 resource buffer timerUniformBuffer const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip frontFace ccw cullMode back stripIndexFormat uint32 GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadOp clear clearValue r 0 0 g 0 5 b 0 5 a 1 0 storeOp store function frame timestep 0 0 005 device queue writeBuffer timerUniformBuffer 0 timestep renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setBindGroup 0 uniformBindGroup renderPass draw 4 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log ready