How awesome would be if we could controler the powerful GPU from the browser using JavaScript? Well, we can with WebGL. The WebGL has limitation if we compare with modern OpenGL, but it is still offer a great way to create 3D graphics in the browser. Canvas and WebGL Context The <canvas> element is the HTML element that we need to use to access the WebGL context. The WebGL context is the object that we will use define programs, shaders, buffers, etc. ...
If you’re into computer graphics, there’s a chance you’ve come across the famous ray tracing in one weekend. If not, well, I’m happy to be the first to introduce you. I decided to take on the challenge and try to make a simplified version using a simple HTML Canvas. Algorithm In a rough way, the overwall algorithm goes like this 1. Create the world (aka scene) 2. Put the eye (aka camera) in the scene. It can be at origin and poiting towards +z axis for now. 3. Put the virtual canvas (aka viewport) in the scene, in front of the camera. 4. Compute the viewport_step_x as viewport_w / image_w 5. For each pixel of the canvas (aka image). 5.1. Create a ray from eye to viewport. 5.2. For each sphere in scene. 5.2.1. Check if ray hits using baskara, parametric equation, sphere equation. 5.3. Update loop variables