Raytracer.js

Raytracer.js is an interactive raytracing tool that utilizes WebGL to allow users to construct their scene interactively and then immediately render their image. They have plenty of options for setting up their image and quickly get the resultant image in a format that they can save to their computer.

Controls:

There are a number of controls that can allow you to specify exactly how you wish the scene to be set up:

Scene options:

Scene options allow you to set up the environment and allow you to denote the quality of the image you are looking for

Pixel Width (resolution): this denotes the size of each pixel in the 640x480 image. The larger the pixel width, the lower the resolution of the final image. Increasing this will increase the speed of the application
Light Location: Here is where you can specify the coordinates of the light in the scene. You can note the x,y,z coordinates and the changes will show immediately in the WebGL scene as well as the raytraced image
Ambient Intensity: this denotes the effect the ambient light has on the object. The greater the ambient light, the less the shadows appear
Light Intensity: this denotes the effect the actual light has on the object. Both Diffuse and specular lighting depend on the intensity of the light
Specular: determines the range of the specular highlight. A low value gives a large specular highlight where a high value gives a very tight specular highlight
Max number of recursions:This denotes how many reflections/refractions occur before the program stops calculating. Lowering this can speed up execution but a higher number of recursions will lead to a more realistic image (NOTE: you need to set it to at least 1 for reflections/refraction)
Background Color:You can also edit the background color of the scene. This will appear both immediately in the WebGL scene but also in the finished image
Polygon Background:Sets up a line of green polygons to simulate trees. It also shows that the raytracer can handle polygons

Shape Options

The shape options allow you a shape and add it to the scene. Shapes can then be selected and dragged into the correct spot in the scene

Object Location:This specifies where the image will be placed when it is added to the scene. Once on the scene it can then be dragged around but this make it easier to manipulate the z-index
Radius:This specifies the radius of the sphere. The bigger the number, the bigger the sphere
Reflective:Checking this off denotes the object is reflective (NOTE: an object can't be both reflective and refractive)
Reflectivity:this denotes how much of an effect the current shapes color has on the final value. 0 means it takes all the colour from the reflected material. Higher numbers mean it has less of an impact
Refractive: denotes that the shape is refractive (Note: an object can't be both refractive and reflective)
Refractivity: determines the effect the shape has on the ray vector. The higher refractivity, the more the light bends around it. 2.4 is the refractivity of a diamond. Color:The color allows you to change the color of the shape you are adding. You can edit this before you add the shape to the scene
Add Sphere:This button will add a sphere with the established settings into the scene. again, the sphere can be dragged around the scene to put it in the desired location

RayTrace

This button underneath the scene will start the raytracing functionality. A loading screen will appear as the image is being generated. Depending on the complexity of the scene it may take a couple seconds. Once it is completed, the image will appear and the RayTrace button will change to 'Set Environment'. From here, you can save your image by right clicking on the image and selecting save as. This is the same process as saving any image from the internet. Selecting the 'Set Environment' button will take you back to the scene canvas where you are able to add new objects and customize the scene even further.

Implementation Details

To allow for the usability that comes with websites, we developed the Raytracer entirely in javascript. This allowed us to make it more interactive and give the users the control to customize their scenes and set things up the way they want to. This was done by setting up 2 HTML5 canvases. One uses WebGL with a 3D perspective that allows users to set up the scene, and the other uses HTML5 2D canvas to print the 2D image returned by the ray tracer.

WebGL

The WebGL canvas uses ThreeJS (see resources) to build a 3D plane that you can manipulate. Changes to the settings appear in real-time on the 3D plane and allows you to very easily customize your image to your liking. Adding an object will have it immediately appear inside the plane. Once it is on the plane, you can select the image and move it around. This is done by capturing the mouse click event and then sending out a raycast to find the first object in the scene that it hits. That object will then be able to be moved around until the mouse is released, at which point the object will remain in the location it was dragged to. Everything from lighting and colors to resolution and number of reflections can be specified before hand. The raytracing doesn't begin until the user selects the 'RayTrace' button.

RayTrace

To ensure the raytracer doesn't halt the usability of the website, we utilized HTML WebWorkers for javascript multi-threading. The thread will go through the scene pixel by pixel and will return the final image to the UI thread at which point it will draw it onto the canvas. The raytracing is performed by sending a ray from the 'eye' through each pixel. If this ray hits an object, depending on the properties of the object, it will bounce off; bend; or return the color of that object. From there, lighting is also computed by it's relation to the light. If the normal of the shape points directly into the light, it is noted as specular and is often the brightest part of the object. If the pixel is in the light radius of the light, it will be lit to a degree based on the angle, which is called diffuse. Finally, if the part of the shape is out of direct light, it is in the shadow and only the ambient light shows. Finally, shadows are calculated where if the object the ray bounces off does not have a direct vector to the light without hitting another object, it is considered a shadow and, again, only ambient light is shown. When the ray calculates the color for every pixel, the values of these pixels is returned to the UI thread for drawing

2D Canvas

Now that the image is returned to the UI thread, it can be drawn to the screen. If does this by individually drawing each pixel onto the 2D canvas. Depending on the size of the pixels (see resolution above) it will draw the pixels to the specification of the raytracer. This allows for the image to then be saved by right clicking the canvas and selecting 'save image as'. Once you are finished saving the image or if you decide you wish to go back and make some changes to the scene, you can do so by selecting the 'Set Environment' button underneath the canvas.

Future Additions

Due to the limited time alotted for this project, a number of features were planned but needed to be scrapped since they were not completed for the due date of the Project. These may be completed in the near future:
- Camera Rotation and Zooming
- Pre-made shapes (including cubes, pyramids, and basic polygonal objects)
- Textures

Resources

A couple javascript libraries were used to help create this website:
SlidesJs - is used for the carosel image selector at the bottom of the page to display screenshots
ThreeJS - is a WebGL library that makes it easier to set up 3D scenes
RayTracing PDF - the PDF provided in class was the primary resource for developing the raytracer

Screenshots