Fun with ray tracing Distribute rays over pixels with some randomness Allowing the rays to make some random decisions along the way a k a Monte Carlo path tracing means lots more samples but produces a nicer more realistic picture with less of the over perfect problems Simple Ray Tracer with Monte Carlo function validf val if typeof val undefined throw Error invalid value if isNaN val throw Error NaN value if val 9999999 throw Error number warning range if val 9999999 throw Error number warning range function validv val if typeof val undefined throw Error invalid value validf val x validf val y validf val z function vec3 x y z if typeof x undefined x 0 if typeof y undefined y 0 if typeof z undefined z 0 if typeof x number throw Error invalid value not a number if typeof y number throw Error invalid value not a number if typeof z number throw Error invalid value not a number this x x this y y this z z validv this return this vec3 add function v0 v1 return new vec3 v0 x v1 x v0 y v1 y v0 z v1 z vec3 add3 function v0 v1 v2 validv v0 validv v1 validv v2 return vec3 add v0 vec3 add v1 v2 vec3 sub function v0 v1 return new vec3 v0 x v1 x v0 y v1 y v0 z v1 z vec3 scale function v0 s return new vec3 v0 x s v0 y s v0 z s vec3 mult function v0 v1 return new vec3 v0 x v1 x v0 y v1 y v0 z v1 z vec3 cross function v0 v1 return v0 x v1 y v0 y v1 x vec3 cross function v0 v1 return new vec3 v0 y v1 z v0 z v1 y v0 z v1 x v0 x v1 z v0 x v1 y v0 y v1 x vec3 dot function v0 v1 return v0 x v1 x v0 y v1 y v0 z v1 z note you can t use length word vec3 dist function v0 return Math sqrt v0 x v0 x v0 y v0 y v0 z v0 z vec3 norm function v0 let ln Math sqrt v0 x v0 x v0 y v0 y v0 z v0 z validf ln return vec3 scale v0 1 0 ln function Ray o_ d_ this o o_ this d d_ validv this o validv this d const REFL DIFF 0 SPEC 1 REFR 2 material types function Sphere r_ p_ e_ c_ refl_ this r r_ radius this p p_ position this e e_ emission this c c_ color this refl refl_ reflection type DIFFuse SPECular REFRactive this intersect function ray returns distance 0 if nohit let op vec3 sub this p ray o Solve t 2 d d 2 t o p d o p o p R 2 0 let eps 1e 4 let b vec3 dot op ray d let det b b vec3 dot op op this r this r if det 0 return 0 else det Math sqrt det let t b det return t eps t t b det eps t 0 const spheres Scene radius position emission color material new Sphere 1e5 new vec3 1e5 1 40 8 81 6 new vec3 new vec3 1 0 25 25 REFL DIFF Left new Sphere 1e5 new vec3 1e5 99 40 8 81 6 new vec3 new vec3 25 1 0 75 REFL DIFF Rght new Sphere 1e5 new vec3 50 40 8 1e5 new vec3 new vec3 25 25 1 0 REFL DIFF Back new Sphere 1e5 new vec3 50 40 8 1e5 170 new vec3 new vec3 REFL DIFF Frnt new Sphere 1e5 new vec3 50 1e5 81 6 new vec3 new vec3 1 0 1 0 25 REFL DIFF Botm new Sphere 1e5 new vec3 50 1e5 81 6 81 6 new vec3 new vec3 0 25 1 0 1 0 REFL DIFF Top new Sphere 16 5 new vec3 27 16 5 47 new vec3 new vec3 0 99 0 99 0 99 REFL SPEC Mirr new Sphere 16 5 new vec3 73 16 5 78 new vec3 new vec3 0 99 0 99 0 99 REFL REFR Glas new Sphere 600 new vec3 50 681 6 27 81 6 new vec3 12 12 12 new vec3 REFL DIFF Lite function clamp x return x 0 0 x 1 1 x function toInt x return Math round Math pow clamp x 1 2 2 255 5 function intersect o o ray t id const n spheres length let inf 1e20 o t inf for let i n i let d spheres i intersect o ray if d d o t o t d o id i return o t inf function erand48 return Math random const M_PI Math PI let cos Math cos let sin Math sin let sqrt Math sqrt let fabs Math abs function trace ray depth let t distance to intersection let id 0 id of intersected object let o ray ray t t id id if intersect o return new vec3 if miss return black id o id t o t const obj spheres id the hit object let x vec3 add ray o vec3 scale ray d t validv x let n vec3 norm vec3 sub x obj p validv n let nl vec3 dot n ray d 0 vec3 scale n 1 0 vec3 scale n 1 validv nl let f new vec3 obj c x obj c y obj c z validv f let p f x f y f x f z f x f y f z f y f z max refl validf p if depth 3 return obj e return vec3 add obj e obj c if depth 5 if erand48 p f vec3 scale f 1 p else let res1 new vec3 obj e x obj e y obj e z validv res1 return res1 R R if obj refl REFL DIFF Ideal DIFFUSE reflection let r1 2 M_PI erand48 0 2PI let r2 erand48 0 1 r1 M_PI r2 0 5 let r2s sqrt r2 let w nl const refd fabs nl x 0 1 new vec3 0 1 0 new vec3 1 0 0 let nnn vec3 cross refd nl let u vec3 norm nnn let v vec3 cross nl u v vec3 norm v validv v let aa11 vec3 scale u cos r1 r2s let aa22 vec3 scale v sin r1 r2s let aa33 vec3 scale nl sqrt 1 r2 validv aa11 validv aa22 validv aa33 let aabb vec3 add3 aa11 aa22 aa33 validv aabb let d vec3 norm aabb validv d if fabs p 0 0001 f vec3 scale f 1 0 p let tt trace new Ray x d depth validv tt let res0 vec3 add obj e vec3 mult f tt return res0 else if obj refl REFL SPEC Ideal SPECULAR reflection let refv vec3 sub ray d vec3 scale n 2 vec3 dot n ray d let tt trace new Ray x refv depth let res2 vec3 add obj e vec3 mult f tt console log res2 res2 validv res2 return res2 let reflRay new Ray x vec3 sub ray d vec3 scale n 2 vec3 dot n ray d Ideal dielectric REFRACTION console log reflRay reflRay validv n validv nl let into vec3 dot n nl 0 Ray from outside going in validf into let nc 1 let nt 1 5 let nnt into nc nt nt nc let ddn vec3 dot ray d nl let cos2t 1 nnt nnt 1 ddn ddn console log ddn ddn console log cos2t cos2t cos2t fabs cos2t if cos2t 0 Total internal reflection console log total inter let res3 vec3 add obj e vec3 mult f trace reflRay depth console log res3 res3 return res3 let aaa vec3 norm vec3 scale ray d nnt console log cos2t cos2t let bbb vec3 scale n into 1 1 ddn nnt sqrt cos2t console log bbb bbb let tdir vec3 sub aaa bbb console log tdir tdir let a nt nc b nt nc R0 a a b b c 1 into ddn vec3 dot tdir n let Re R0 1 R0 c c c c c let Tr 1 Re let P 25 5 Re let RP Re P let TP Tr 1 P let dd dd vec3 add vec3 scale trace reflRay depth 0 1 vec3 scale trace new Ray x tdir depth 0 9 if depth 2 Russian roulette const rv erand48 dd rv P vec3 scale trace reflRay depth RP vec3 scale trace new Ray x tdir depth TP else console log Re Tr dd vec3 add vec3 scale trace reflRay depth Re vec3 scale trace new Ray x tdir depth Tr console log dd dd let res4 vec3 add obj e vec3 mult f dd console log res4 res4 return res4 function main nx ny count let w 512 256 1024 let h 512 256 768 let dw w 1 nx let dh h 1 ny const inside x y let iy count count nx ny let ix count nx if x ix dw x ix 1 dw y iy dh y iy 1 dh return true return false let samps 8 samples let cam new Ray new vec3 50 52 295 6 vec3 norm new vec3 0 0 042612 1 cam pos dir let cx new vec3 w 5135 h let cy vec3 scale vec3 norm vec3 cross cx cam d 0 5135 if typeof c undefined c Array from Array w h map return vec3 g Array from Array w h map return 0 for let y 0 y h y Loop over image rows for let x 0 x w x Loop cols if inside x y continue let i h y 1 w x for let sy 0 sy 1 sy 2x2 subpixel rows for let sx 0 sx 1 sx 2x2 subpixel cols let r new vec3 for let s 0 s samps s multiple samples through single pixel let r1 2 erand48 dx r1 1 sqrt r1 1 1 sqrt 2 r1 dx 1 to 1 let r2 2 erand48 dy r2 1 sqrt r2 1 1 sqrt 2 r2 dy 1 to 1 dx 0 0 dy 0 0 dx 0 5 dy 0 5 let d vec3 add3 vec3 scale cx sx 5 dx 2 x w 5 vec3 scale cy sy 5 dy 2 y h 5 cam d let cd2 vec3 add cam o vec3 scale d 140 let rr2 trace new Ray cd2 vec3 norm d 0 let t2 vec3 scale rr2 1 0 samps r vec3 add r t2 s Camera rays are pushed forward to start in interior let nss 1 0 1 1 1 4 0 25 c i vec3 add c i vec3 scale vec3 clamp r x clamp r y clamp r z nss return return sx sy g i g i 1 x y let canvas document getElementById canvas if canvas null canvas document createElement canvas canvas id canvas document body appendChild canvas canvas width w canvas height h console log creating canvas let context2d canvas getContext 2d let image_data context2d getImageData 0 0 w h raw_data image_data data for let y 0 y h y for let x 0 x w x if inside x y continue let i h y 1 w x let i x y w image_data data i 4 0 toInt c i x 1 0 g i image_data data i 4 1 toInt c i y 1 0 g i image_data data i 4 2 toInt c i z 1 0 g i image_data data i 4 3 255 context2d putImageData image_data 0 0 console log finished render const nx 6 const ny 6 const maxcount nx ny let count 0 let doRender true let statusEl null function renderFrame if doRender return main nx ny count maxcount count count count maxcount setTimeout renderFrame 500 if statusEl statusEl innerHTML Math floor count maxcount count maxcount maxcount renderFrame document body appendChild document createElement br statusEl document createElement div statusEl id status statusEl innerHTML document body appendChild statusEl let button document createElement button document body appendChild button button innerHTML Toggle Render Iteration document body appendChild document createElement br button onclick doRender doRender renderFrame console log ready
validv aabb let d vec3 norm aabb validv d if fabs p 0 0001 f vec3 scale f 1 0 p let tt trace new Ray x d depth validv tt let res0 vec3 add obj e vec3 mult f tt return res0 else if obj refl REFL SPEC Ideal SPECULAR reflection let refv vec3 sub ray d vec3 scale n 2 vec3 dot n ray d let tt trace new Ray x refv depth let res2 vec3 add obj e vec3 mult f tt console log res2 res2 validv res2 return res2 let reflRay new Ray x vec3 sub ray d vec3 scale n 2 vec3 dot n ray d Ideal dielectric REFRACTION console log reflRay reflRay validv n validv nl let into vec3 dot n nl 0 Ray from outside going in validf into let nc 1 let nt 1 5 let nnt into nc nt nt nc let ddn vec3 dot ray d nl let cos2t 1 nnt nnt 1 ddn ddn console log ddn ddn console log cos2t cos2t cos2t fabs cos2t if cos2t 0 Total internal reflection console log total inter let res3 vec3 add obj e vec3 mult f trace reflRay depth console log res3 res3 return res3 let aaa vec3 norm vec3 scale ray d nnt console log cos2t cos2t let bbb vec3 scale n into 1 1 ddn nnt sqrt cos2t console log bbb bbb let tdir vec3 sub aaa bbb console log tdir tdir let a nt nc b nt nc R0 a a b b c 1 into ddn vec3 dot tdir n let Re R0 1 R0 c c c c c let Tr 1 Re let P 25 5 Re let RP Re P let TP Tr 1 P let dd dd vec3 add vec3 scale trace reflRay depth 0 1 vec3 scale trace new Ray x tdir depth 0 9 if depth 2 Russian roulette const rv erand48 dd rv P vec3 scale trace reflRay depth RP vec3 scale trace new Ray x tdir depth TP else console log Re Tr dd vec3 add vec3 scale trace reflRay depth Re vec3 scale trace new Ray x tdir depth Tr console log dd dd let res4 vec3 add obj e vec3 mult f dd console log res4 res4 return res4 function main nx ny count let w 512 256 1024 let h 512 256 768 let dw w 1 nx let dh h 1 ny const inside x y let iy count count nx ny let ix count nx if x ix dw x ix 1 dw y iy dh y iy 1 dh return true return false let samps 8 samples let cam new Ray new vec3 50 52 295 6 vec3 norm new vec3 0 0 042612 1 cam pos dir let cx new vec3 w 5135 h let cy vec3 scale vec3 norm vec3 cross cx cam d 0 5135 if typeof c undefined c Array from Array w h map return vec3 g Array from Array w h map return 0 for let y 0 y h y Loop over image rows for let x 0 x w x Loop cols if inside x y continue let i h y 1 w x for let sy 0 sy 1 sy 2x2 subpixel rows for let sx 0 sx 1 sx 2x2 subpixel cols let r new vec3 for let s 0 s samps s multiple samples through single pixel let r1 2 erand48 dx r1 1 sqrt r1 1 1 sqrt 2 r1 dx 1 to 1 let r2 2 erand48 dy r2 1 sqrt r2 1 1 sqrt 2 r2 dy 1 to 1 dx 0 0 dy 0 0 dx 0 5 dy 0 5 let d vec3 add3 vec3 scale cx sx 5 dx 2 x w 5 vec3 scale cy sy 5 dy 2 y h 5 cam d let cd2 vec3 add cam o vec3 scale d 140 let rr2 trace new Ray cd2 vec3 norm d 0 let t2 vec3 scale rr2 1 0 samps r vec3 add r t2 s Camera rays are pushed forward to start in interior let nss 1 0 1 1 1 4 0 25 c i vec3 add c i vec3 scale vec3 clamp r x clamp r y clamp r z nss return return sx sy g i g i 1 x y let canvas document getElementById canvas if canvas null canvas document createElement canvas canvas id canvas document body appendChild canvas canvas width w canvas height h console log creating canvas let context2d canvas getContext 2d let image_data context2d getImageData 0 0 w h raw_data image_data data for let y 0 y h y for let x 0 x w x if inside x y continue let i h y 1 w x let i x y w image_data data i 4 0 toInt c i x 1 0 g i image_data data i 4 1 toInt c i y 1 0 g i image_data data i 4 2 toInt c i z 1 0 g i image_data data i 4 3 255 context2d putImageData image_data 0 0 console log finished render const nx 6 const ny 6 const maxcount nx ny let count 0 let doRender true let statusEl null function renderFrame if doRender return main nx ny count maxcount count count count maxcount setTimeout renderFrame 500 if statusEl statusEl innerHTML Math floor count maxcount count maxcount maxcount renderFrame document body appendChild document createElement br statusEl document createElement div statusEl id status statusEl innerHTML document body appendChild statusEl let button document createElement button document body appendChild button button innerHTML Toggle Render Iteration document body appendChild document createElement br button onclick doRender doRender renderFrame console log ready