Skip to content

How to fly among hundreds of 3d spheres drawn on a 2D canvas in pure JS without WebGL nor ASM.

License

Notifications You must be signed in to change notification settings

tolokoban/demo-raytracing-no-webgl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

demo-raytracing-no-webgl

How to fly among hundreds of 3d spheres drawn on a 2D canvas in pure JS without WebGL nor ASM.

Launch the demo!

How it works?

All the logic is done in the class painter of the file ray.painter.js.

ray-tracing principle

The above image is a good illustration of how ray-tracing works. Just place a screen in front of a camera and cast a light's ray through each pixel. If this ray hits a sphere, you can determine the pixel's color by looking at the angle of incidence for that collision. To get more realism, you can make the ray bounce until it reaches a light source or dies in the darkness.

You can see at the WebGL version of this demo, which is much faster!

About

How to fly among hundreds of 3d spheres drawn on a 2D canvas in pure JS without WebGL nor ASM.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published