WebGPU Example let canvas document createElement canvas document body appendChild canvas canvas width canvas height 512 const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat Note the extra usage as you ll be accessing copying context configure device device format presentationFormat size presentationSize usage GPUTextureUsage RENDER ATTACHMENT GPUTextureUsage COPY SRC const timerUniformBuffer device createBuffer size 4 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY DST const timestep new Float32Array 0 0 device queue writeBuffer timerUniformBuffer 0 timestep Create a sampler with linear filtering for smooth interpolation const textureSampler device createSampler magFilter linear minFilter linear const texture0 device createTexture size presentationSize format presentationFormat usage 0x2 0x4 0x10 GPUTextureUsage TEXTURE BINDING GPUTextureUsage COPY DST pipeline 1 var triangleVertWGSL struct vout builtin position pos vec4 f32 location 0 uvs vec2 f32 stage vertex fn main builtin vertex index VertexIndex u32 builtin instance index instanceIdx u32 vout let 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 pos array vec2 f32 4 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 var vo vout vo pos vec4 f32 pos VertexIndex 0 0 1 0 vo uvs uvs VertexIndex 0 5 0 5 0 1 return vo var redFragWGSL block struct Uniforms mytimer f32 group 0 binding 0 var mySampler sampler group 0 binding 1 var myTexture0 texture 2d f32 group 0 binding 2 var uniform uniforms Uniforms fn getv p vec2 f32 vec4 f32 return textureSample myTexture0 mySampler p 2 0 1 0 let m mat3x3 f32 vec3 f32 0 00 0 80 0 60 vec3 f32 0 80 0 36 0 48 vec3 f32 0 60 0 48 0 64 fn hash n f32 f32 return fract sin n 43758 5453 fn noise x vec3 f32 f32 var p floor x var f fract x f f f 3 0 2 0 f var n p x p y 57 0 113 0 p z var res mix mix mix hash n 0 0 hash n 1 0 f x mix hash n 57 0 hash n 58 0 f x f y mix mix hash n 113 0 hash n 114 0 f x mix hash n 170 0 hash n 171 0 f x f y f z return res fn fbm pp vec3 f32 f32 var p pp var f 0 5000 noise p p m p 2 02 f f 0 2500 noise p p m p 2 03 f f 0 1250 noise p return f fn scene p vec3 f32 f32 return 0 1 length p 05 fbm p 3 stage fragment fn main location 0 uvs vec2 f32 location 0 vec4 f32 let iTime uniforms mytimer let iResolution vec2 f32 1 0 1 0 let fragCoord uvs var q fragCoord xy iResolution xy var v 1 0 2 0 q v x v x iResolution x iResolution y var mo vec2 f32 iTime 1 cos iTime 25 3 camera by iq var org 25 0 normalize vec3 f32 cos 2 75 3 0 mo x 0 7 1 0 mo y 1 0 sin 2 75 3 0 mo x var ta vec3 f32 0 0 1 0 0 0 var ww normalize ta org var uu normalize cross vec3 f32 0 0 1 0 0 0 ww var vv normalize cross ww uu var dir normalize v x uu v y vv 1 5 ww var color vec4 f32 0 let nbSample 64 let nbSampleLight 6 var zMax 40 var step zMax f32 nbSample var zMaxl 20 var stepl zMaxl f32 nbSampleLight var p org var T 1 0 var absorption 100 0 let sun direction normalize vec3 f32 1 0 0 for var i 0 i nbSample i i 1 var density scene p if density 0 0 var tmp density f32 nbSample T T 1 tmp absorption if T 0 01 break Light scattering var Tl 1 0 for var j 0 j nbSampleLight j j 1 var densityLight scene p normalize sun direction f32 j stepl if densityLight 0 Tl Tl 1 densityLight absorption f32 nbSample if Tl 0 01 break Add ambiant light scattering color color color vec4 f32 1 50 tmp T vec4 f32 1 7 4 1 80 tmp T Tl p p dir step var fragColor color return fragColor const sceneUniformBindGroupLayout1 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 uniformBindGroup1 device createBindGroup layout sceneUniformBindGroupLayout1 entries binding 0 resource textureSampler binding 1 resource texture0 createView binding 2 resource buffer timerUniformBuffer const pipeline1 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout1 vertex module device createShaderModule code triangleVertWGSL entryPoint main fragment module device createShaderModule code redFragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 const renderPassDescriptor colorAttachments GPURenderPassDescriptor view undefined set later loadValue r 0 0 g 0 0 b 0 0 a 1 0 storeOp store function frame device queue writeBuffer timerUniformBuffer 0 timestep const screenTexture context getCurrentTexture renderPassDescriptor colorAttachments 0 view screenTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline1 passEncoder setBindGroup 0 uniformBindGroup1 passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish timestep 0 0 01 if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log done
let fragCoord uvs var q fragCoord xy iResolution xy var v 1 0 2 0 q v x v x iResolution x iResolution y var mo vec2 f32 iTime 1 cos iTime 25 3 camera by iq var org 25 0 normalize vec3 f32 cos 2 75 3 0 mo x 0 7 1 0 mo y 1 0 sin 2 75 3 0 mo x var ta vec3 f32 0 0 1 0 0 0 var ww normalize ta org var uu normalize cross vec3 f32 0 0 1 0 0 0 ww var vv normalize cross ww uu var dir normalize v x uu v y vv 1 5 ww var color vec4 f32 0 let nbSample 64 let nbSampleLight 6 var zMax 40 var step zMax f32 nbSample var zMaxl 20 var stepl zMaxl f32 nbSampleLight var p org var T 1 0 var absorption 100 0 let sun direction normalize vec3 f32 1 0 0 for var i 0 i nbSample i i 1 var density scene p if density 0 0 var tmp density f32 nbSample T T 1 tmp absorption if T 0 01 break Light scattering var Tl 1 0 for var j 0 j nbSampleLight j j 1 var densityLight scene p normalize sun direction f32 j stepl if densityLight 0 Tl Tl 1 densityLight absorption f32 nbSample if Tl 0 01 break Add ambiant light scattering color color color vec4 f32 1 50 tmp T vec4 f32 1 7 4 1 80 tmp T Tl p p dir step var fragColor color return fragColor const sceneUniformBindGroupLayout1 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 uniformBindGroup1 device createBindGroup layout sceneUniformBindGroupLayout1 entries binding 0 resource textureSampler binding 1 resource texture0 createView binding 2 resource buffer timerUniformBuffer const pipeline1 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout1 vertex module device createShaderModule code triangleVertWGSL entryPoint main fragment module device createShaderModule code redFragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 const renderPassDescriptor colorAttachments GPURenderPassDescriptor view undefined set later loadValue r 0 0 g 0 0 b 0 0 a 1 0 storeOp store function frame device queue writeBuffer timerUniformBuffer 0 timestep const screenTexture context getCurrentTexture renderPassDescriptor colorAttachments 0 view screenTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline1 passEncoder setBindGroup 0 uniformBindGroup1 passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish timestep 0 0 01 if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log done