Computer Graphics Programming Assignment #5

 Here, I want to write a program that visualizes a 3D scene and uses 2D canvas drawing operations to construct a 2D projected view of it on the screen.

This presentation shows how to visualize a 3D scene that uses Canvas drawing instructions. The example demonstrates all of the transforms involved the 3D modelling pipeline, including the model, the LookAt, the Projection(s) and the viewPort transforms. I want to create a visualization that is similar to the camera view of this example. 

I can take the project from project #3 and #4 and "lift it to 3d by having the drawing happen on a plane. It is ideal, though to have the code to be natively 3-dimenaional.

The requirements are as specified: 

There has to be a movable camera. 

The 3D world must contain a hierarchical network, or a parametric curve, or both. 

I have to make it certain that a 3D scene is being observed.

And I need to use a projection transform

Create a object that uses 3D motion and transforms, and have objects fly along 3d curves. 

Or have solid-filled polygons "hide" each other. We should only be able to see 3 of the 6 faces of a cube, for example. Or maybe create an airplane that flies along a spiral-shaped path. 

So first, I want to be able to implement the moveable camera, but in 2 screens, not one. 

The first thing that I want to do is to open up visual studio and type the HTML skeleton code. 

and the following is my code: 

Now it's time to write the Javascript code. 

Now, I'm taking a look into TransformMat4. 

This link does a good job in describing mat4 functionality.

transformMat4(out, a, m) → {vec4}

is a method where vec4 is the receiving vector, a is the vector to transform and m is the matrix to transform with. 

fromValues(x, y, z) → {vec3}

returns a bunch of values with the given x, y, and z coordinates. 

I found a link in how to render 3 dimensional images, given here.

This is what I have so far, the image successfully rotates, which is a good thing. 

Here, I want to draw a rectangular diagram, kind of like a cube, but with one side longer than the other. 

My first goal is to create a 3-dimensional cube using the WebGL library. Use this link.

I realized that I can just emulate the creation of the camera or a simple 3d shape, and then just connect the vertices, so I can do that instead. 

I have now had a weird 2D curve as follows: 

And this was the result image. I hope I don't get in trouble for this.

I am going to make a 20 minutes summary of the code to make sure I get the graphics concepts set in and stone, before I move onto a LeetCode assignment. 

 

function setup() {

    var observerCanvas = document.getElementById('observerCanvas');

    var cameraCanvas = document.getElementById('cameraCanvas');

    var observerContext = observerCanvas.getContext('2d');

    var cameraContext = cameraCanvas.getContext('2d');

    var slider1 = document.getElementById('slider1');

    slider1.value = 0;

    var slider2 = document.getElementById('slider2');

    slider2.value = 0;

The code begins by importing all the modules and setting 2 sliders. 1 slider is for rotating the image, and the other slider is to rotate the object around a parametric curve. 

   var context = cameraContext; 

    function draw() {

      

    observerCanvas.width = observerCanvas.width;

    cameraCanvas.width = cameraCanvas.width;

    var tParam = slider1.value*0.015;

    var viewAngle = slider2.value*0.01*Math.PI;

     

    function moveToTx(loc,Tx)

    {var res=vec3.create(); vec3.transformMat4(res,loc,Tx); context.moveTo(res[0],res[1]);}

    function lineToTx(loc,Tx)

    {var res=vec3.create(); vec3.transformMat4(res,loc,Tx); context.lineTo(res[0],res[1]);}

A matrix transformation is then applied to move to a point of the image, or connect a line to a point in the image. 

 function drawRocket(color, TxU, scale){

        var Tx = mat4.clone(TxU);

        mat4.scale(Tx,Tx,[scale,scale,scale]);

        context.beginPath();

        context.fillStyle = color;

        moveToTx([-.05,-.05,.03],Tx);

        lineToTx([-.05,.05,.03],Tx);

        lineToTx([.05,.05,.03],Tx);

        lineToTx([.1,0,.03],Tx);

        lineToTx([.05,-.05,.03],Tx);

        moveToTx([-.05,-.05,-.03],Tx);

        lineToTx([-.05,.05,-.03],Tx);

        lineToTx([.05,.05,-.03],Tx);

        lineToTx([.1,0,-.03],Tx);

        lineToTx([.05,-.05,-.03],Tx);

        context.closePath();

        context.fill();

    }

    

    function drawCamera(color,TxU,scale) {

        var Tx = mat4.clone(TxU);

        mat4.scale(Tx,Tx,[scale,scale,scale]);

        context.beginPath();

        context.strokeStyle = color;

        // Twelve edges of a cropped pyramid

        moveToTx([-6,-6,-4],Tx);lineToTx([6,-6,-4],Tx);

        lineToTx([6,6,-4],Tx);lineToTx([-6,6,-4],Tx);

        moveToTx([6,-6,-4],Tx);lineToTx([4,-4,0],Tx);

        lineToTx([4,4,0],Tx);lineToTx([6,6,-4],Tx);

        moveToTx([4,-4,0],Tx);lineToTx([-4,-4,0],Tx);

        lineToTx([-4,4,0],Tx);lineToTx([4,4,0],Tx);

        moveToTx([-4,-4,0],Tx);lineToTx([-6,-6,-4],Tx);

        lineToTx([-6,6,-4],Tx);lineToTx([-4,4,0],Tx);

        context.stroke();

    }

Then, sprites that look like a camera viewpoint and rocket are drawn by connecting certain lines

to each other.