raytracing2 animation

index.html

@@ -15,6 +15,6 @@
     <script type="module" src="/src/cg/perspectiveDivide.ts"></script>
     <script type="module" src="/src/cg/walkToVec.ts"></script>
     <script type="module" src="/src/cg/basis.ts"></script-->
-    <script type="module" src="/src/cg/raytracing2.ts"></script>
+    <script type="module" src="/src/cg/raytracing2animation.ts"></script>
   </body>
 </html>

src/cg/raytracing2.ts

@@ -4,7 +4,7 @@ import { ISphere, Vec3, raySphereIntersect } from "./utils";
 const width = 200
 const height = 200
 const framebuffer = new Framebuffer(width, height);
-const imagePlaneDist = -1
+const imagePlaneDist = -0.5
 
 const tNear = 1;
 const tFar = 1000;
@@ -12,14 +12,19 @@ const tFar = 1000;
 const spheres = [
     {
         position: [0, 0, -3],// <--- 
-        radius: 2,// <--- 
+        radius: 1,// <--- 
         color: [255,0,0]// <--- 
     },
     {
         position: [3,2,-3],// <--- 
-        radius: 2,// <--- 
+        radius: 0.5,// <--- 
         color: [0,255,0]// <--- 
     },
+    {
+        position: [-2, -2, -4],
+        radius: 1,
+        color: [0,0,255]
+    }
     //... add more spheres if you like
 ]
 

src/cg/raytracing2animation.ts

+import Framebuffer from "./framebuffer";
+import { Vec3, Matrix4, Matrix3, matrix3ToMatrix4, matrix4Product, raySphereIntersect, ISphere, rotX, rotY, multVec3Matrix4 } from "./utils";
+
+const width = 600
+const height = 600
+const framebuffer = new Framebuffer(width, height);
+const imagePlaneDist = -0.5
+
+const tNear = 1;
+const tFar = 1000;
+
+const spheres = [
+    {
+        "position": [-2.5, 0, 0],
+        "radius": 1,
+        "color": [128, 0, 0]
+    },
+    {
+        "position": [0, 0, 0],
+        "radius": 1,
+        "color": [0, 128, 0]
+    },
+    {
+        "position": [2.5, 0, 0],
+        "radius": 1,
+        "color": [0, 0, 128]
+    },
+]
+
+const o: Vec3 = [0, 0, 0]
+
+
+const camT: Matrix4 = [
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 3, 1  // <--- 4x4 matrix that moves the camera in Z
+]
+
+const camRx = matrix3ToMatrix4(rotX(-30))// <--- rotation matrix around X. Convert it to 4x4. 
+
+const camInitialTransform = matrix4Product(camT, camRx)// <--- combine camT and camRX into a new matrix
+
+let currentFrame = 0
+
+for (let i = 0; i <= 1; i += .1) {
+    framebuffer.clear()
+
+    
+    const camRot = rotY(360*i)// <--- rotation matrix around Y using 360 * i in each frame 
+
+    
+    const combinedCameraTransform = matrix4Product(camInitialTransform, matrix3ToMatrix4(camRot)) // <--- Combine transformations: 
+                                    // initial transform then rotate
+
+
+    // Loop over framebuffer pixels
+    for (let x = 0; x <= width; x++) {
+        for (let y = 0; y <= height; y++) {
+
+            // Convert to screen space
+            const v = framebuffer.rasterToScreen(x, y, width, height, imagePlaneDist)// <--- convert raster to screen space 
+            const vTransformed = multVec3Matrix4(v, combinedCameraTransform)// <--- apply camera transform
+            const oTransformed = multVec3Matrix4(o, combinedCameraTransform)// <--- apply camera transform
+
+            // ...
+            // ... same as in previous task but using transformed camera vectors
+            let closestSphere = null;
+            let closestIntersection = 9999;
+
+            for (let i = 0; i < spheres.length; i++) {
+
+                const [t1, t2] = raySphereIntersect(vTransformed, oTransformed, spheres[i] as ISphere)// <--- Calculate intersections
+    
+                if (t1 < closestIntersection && tNear < t1 && t1 < tFar) {
+                    closestIntersection = t1;
+                    closestSphere = spheres[i]
+                }
+    
+                if (t2 < closestIntersection && tNear < t2 && t2 < tFar) {
+                    closestIntersection = t2;
+                    closestSphere = spheres[i];
+                }
+            }
+            if (!closestSphere) {
+                framebuffer.draw(x,y,[0,0,50]) // <--- Draw a background color
+            } else {
+                framebuffer.draw(x,y,closestSphere.color) // <--- Draw color of closest sphere
+            }
+
+        }
+
+    }
+    framebuffer.update();
+    framebuffer.save("spheres." + ++currentFrame);
+
+}
\ No newline at end of file

src/cg/utils.ts

@@ -124,7 +124,7 @@ export function multVecMatrix(v: Array<number>, m: Array<number>){
     ]
 }
 
-export function rotX(degrees: number){
+export function rotX(degrees: number): Matrix3{
     const radian = degrees * Math.PI / 180
     return [
         1, 0, 0,
@@ -133,7 +133,7 @@ export function rotX(degrees: number){
     ]
 }
 
-export function rotY(degrees: number){
+export function rotY(degrees: number): Matrix3{
     const radian = degrees * Math.PI / 180
     return [
         Math.cos(radian), 0, -1*Math.sin(radian),
@@ -142,7 +142,7 @@ export function rotY(degrees: number){
     ]
 }
 
-export function rotZ(degrees: number){
+export function rotZ(degrees: number): Matrix3{
     const radian = degrees * Math.PI / 180
     return [
         Math.cos(radian), Math.sin(radian), 0,