let canvas document createElement canvas document body appendChild canvas console log canvas canvas width canvas height 512 console log w canvas width h canvas height let wgsltxt struct vsout builtin position Position vec4 f32 location 0 uv vec2 f32 vertex fn main_vs 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 ret vsout ret Position vec4 f32 pos VertexIndex 0 0 1 0 ret uv uvs VertexIndex 0 5 0 5 0 1 return ret struct hitdata rayLength f32 normal vec3 f32 fn rayIntersectsSphere ray vec3 f32 dir vec3 f32 center vec3 f32 radius f32 hitdata var rc ray center var c dot rc rc radius radius var b dot dir rc var d b b c var t b sqrt abs d if d 0 0 t 0 0 t 0 0 Didn t hit var hit hitdata var hitPos ray dir t hit normal normalize hitPos center hit rayLength t return hit fn background rd vec3 f32 vec3 f32 let sky max 0 0 dot rd vec3 f32 0 0 0 2 0 7 return pow sky 1 0 vec3 f32 0 5 0 6 0 7 fragment fn main_fs location 0 uvs vec2 f32 location 0 vec4 f32 var uv 1 0 2 0 uvs var ro vec3 f32 0 0 0 0 6 0 Ray origin var rd normalize vec3 f32 uv 1 0 Ray direction var transmit vec3 f32 1 0 How much light the ray lets through var light vec3 f32 0 0 How much light hits the eye through the ray var epsilon 0 001 var bounceCount 2 0 How many rays we trace for var i 0 0 i bounceCount i i 1 0 var data rayIntersectsSphere ro rd vec3 f32 0 0 0 3 5 if data rayLength 0 0 Object hit transmit transmit 0 9 Make the ray more opaque var nml data normal Get surface normal for reflecting the ray ro ro rd data rayLength Move the ray to the hit point rd reflect rd nml Reflect the ray ro ro rd epsilon Move the ray off the surface to avoid hitting the same point twice else Background hit light light transmit background rd Put the background light through the ray and add it to the light seen by the eye break Don t bounce off the background return vec4 f32 light 1 0 Set pixel color to the amount of light seen const gpu navigator gpu const adapter await gpu requestAdapter const device await adapter requestDevice context type gpupresent is deprecated Use webgpu instead const ctx canvas getContext gpupresent const ctx canvas getContext webgpu let presentationFormat navigator gpu getPreferredCanvasFormat ctx getPreferredFormat adapter no longer supported let configuration device device format presentationFormat size the size of the canvas element in pixels width canvas width height canvas height const res ctx configure configuration console log getCurrentTexture ctx getCurrentTexture const wgsl device createShaderModule code wgsltxt const pipeline device createRenderPipeline layout auto vertex module wgsl entryPoint main_vs fragment module wgsl entryPoint main_fs targets format bgra8unorm primitive topology triangle strip let render function const commandEncoder device createCommandEncoder const textureView ctx getCurrentTexture createView const renderPassDescriptor colorAttachments view textureView loadOp clear clearValue r 1 g 1 b 1 a 1 storeOp store const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame render requestAnimationFrame render
the ray more opaque var nml data normal Get surface normal for reflecting the ray ro ro rd data rayLength Move the ray to the hit point rd reflect rd nml Reflect the ray ro ro rd epsilon Move the ray off the surface to avoid hitting the same point twice else Background hit light light transmit background rd Put the background light through the ray and add it to the light seen by the eye break Don t bounce off the background return vec4 f32 light 1 0 Set pixel color to the amount of light seen const gpu navigator gpu const adapter await gpu requestAdapter const device await adapter requestDevice context type gpupresent is deprecated Use webgpu instead const ctx canvas getContext gpupresent const ctx canvas getContext webgpu let presentationFormat navigator gpu getPreferredCanvasFormat ctx getPreferredFormat adapter no longer supported let configuration device device format presentationFormat size the size of the canvas element in pixels width canvas width height canvas height const res ctx configure configuration console log getCurrentTexture ctx getCurrentTexture const wgsl device createShaderModule code wgsltxt const pipeline device createRenderPipeline layout auto vertex module wgsl entryPoint main_vs fragment module wgsl entryPoint main_fs targets format bgra8unorm primitive topology triangle strip let render function const commandEncoder device createCommandEncoder const textureView ctx getCurrentTexture createView const renderPassDescriptor colorAttachments view textureView loadOp clear clearValue r 1 g 1 b 1 a 1 storeOp store const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame render requestAnimationFrame render