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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported 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 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 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 const 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 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 loadOp clear clearValue 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 end device queue submit commandEncoder finish timestep 0 0 01 if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log done
oord 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 loadOp clear clearValue 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 end device queue submit commandEncoder finish timestep 0 0 01 if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log done