This project was for learning purposes only, it is not intended for production use
This project was an exercise to see if I could make a complete rasterizer without OpenGL, only using one function that draws a pixel on the screen. This means I had to write the a method for drawing lines, triangles, etc. all from scratch and optimize it so that it had at least a semi-decent frame rate. The library itself is not very practical for others to use, but I decided to make a bit of documentation so that I remember how to use everything and so that I remember what needs to be done.
Strikethrough indicates a feature that is yet to be implemented or completed.
-
In terminal, cd to the directory where the folder was downloaded.
-
Type the following command into terminal:
$ ./RUN
Rasterized Teapot using Graphics3D.js
Raytraced spheres using RayTracer.js
- Graphics3D(context) Handles rasterized 3d graphics
- Context: canvas context that will be drawn to.
- Light(l) When used with the new keyword it creates a new light. Takes object i.e. {"type": "point", "diffusion": 1, "specularity": 1}
- l["type"]: Type of light. Can be "point" "directional" or
"spot" - l["diffusion"]: The diffusion component for the light, a value from 0 to 1
- l["specularity"]: The specular component for the light, a value from 0 to 1
- l["type"]: Type of light. Can be "point" "directional" or
- Material(m) When used with the new keyword it creates a new Material. Takes object i.e. {"color": "#808080", "diffusion:" 1, ... etc.}
- m["color"]: color of material
- m["diffusion"]: diffusion component of material, a value from 0 to 1
- m["specularity"]: specular component of material, a value from 0 to 1
- m["shine"]: shine component of material
- Graphics2D(context) Handles 2d graphics
- RayTracer(context) Handles RayTraced 3D graphics.
• Graphics3D
- addLight(l) Adds a light to the scene.
- setMaterial(m) Takes a Material (see above Constructors, 3) object only.
- getMaterial()
- setCoordinates(t) A value of true centers the origin and makes positive y values go towards the top of the canvas.
- getCoordinates()
- setSensor(x,y,z) Sets the position of the "light sensor" of the camera.
- getSensor() Returns a vector as the position of the sensor.
- setFocalLength() The distance of the camera lens from the light sensor.
- getFocalLength() Returns the focal length.
rotateCamera(xr,yr,zr) Rotates the camera.xr rotation about x axisyr rotation about y axiszr rotation about z axis
- getLens() As of now the lens can only be a flat plane horizontal to the xy plane, returns z component of lens position.
- setConcavePolygons(t) If set to true, concave polygons can be drawn in space.
- draw(t) As of now, the painter's algorithm is being used. As a result, this method must be called before anything is actually drawn to the canvas.
- t["lights"]: Boolean that turns lights on or off.
- t["ambience"]: Boolean that turns ambient lighting on or off.
- t["ambienceOnly"]: Boolean, setting to true will show only the ambient lighting.
- sortQueue() Sorts the render queue of polygons from furthest away from the camera to closest to the camera.
- projectPoint(x,y,z) Projects a point in 3d space onto the lens. Returns 2d vector with the x y value of the new point on the canvas.
- drawLine(x1,y1,z1,x2,y2,z2) Adds a line to the render queue.
- x1,y1,z1: First point of the line
- x2,y2,z2: Second point of the line
- drawPrism(x,y,z,w,h,d) Adds the wireframe of a prism to the render queue.
- x,y,z: The center point of the prism (not the corner)
- w: width
- h: height
- d: depth
- fillTriangle(x1,y1,z1,x2,y2,z2,x3,y3,z3) Adds a triangle to the render queue.
- x1,y1,z1 First vertex of the triangle
- x2,y2,z2 Second vertex of the triangle
- x3,y3,z3 Third vertex of the triangle
- drawGrid() Adds a 600x600 grid centered at the origin and parallel to the xz plane to the render queue.
• RayTracer
- sphere(x, y, z, r, m) Adds a sphere at point (x y z) with radius r and material m.
- plane(x, y, z, n, m) Adds a plane passing through the point (x y z) with a normal vector n and material m.
- render() Renders the scene.