0.3 Progress

Today, I had another working session with Andor on the Picking project. With the help of the newly made C3D demo page, we managed to make a big step forward.

So now, we've changed the way we were converting the mouse window coord into 3D vector back into calculating with trig. Before the change, we were

1) Converting windows coord to NDC

var Cx = ((2 * currX) / ( tempDiv.width)) - 1 ;
var Cy = (2 * currY) / tempDiv.height;
var Cz = (2 * currZ) - 1;
var Cw = 1;


2) NDC to Viewspace

var viewCoord = multiplyMatrixByVector(projMatInv, new Array(currX, currY, currZ));
viewCoord[2] = -5;
viewCoord[3] = 6;

The multiplyMatrixByVector only calculates 3x3 matrix and a vector of 3 values. Therefore, the 3rd value will be calculated wrong and the 4th value will never be calculated. What we assumed here, is that the projMatInv never changes (since it's something we define), and with it, the 3rd and 4th value will always be calculated to be -5 and 6.

3) Viewspace to Model
modelMat x viewCoord
modelMat is a 4x4 matrix and viewCoord is a 4 value vector.


So what we did now instead, is back to using trig to calculate the distance from the camera position to the far clipping pan, and using that, we can calculate the dimension of it using ratio of the canvas dimension. And what we end up having in code now, is implementing Jeremy's idea of
1) Find distance to project plane

var dx = 0.5 * tempDiv.width; // tempDiv.width is canvas width
var theta = 0.5 * C3DL_FIELD_OF_VIEW; // angel of view in degrees
var dz = dx / Math.tan(theta); // distance

2) Make the vector of mouse picked point

var vPick = makeVector( currX, currY, dz );

3) Calculate the scale value to change the vector length to reach the far clipping plane and apply it to mouse vector

var scale = (C3DL_FAR_CLIPPING_PLANE - C3DL_NEAR_CLIPPING_PLANE) / dz;
vPick = multiplyVector(vPick, scale);

4) Orient the mouse vector to match our current camera view

viewMatrix = makePoseMatrix(scn.getCamera().getLeft(), scn.getCamera().getUp(), scn.getCamera().getDir(), scn.getCamera().getPosition());
vPick = multiplyMatrixByVector(viewMatrix, vPick);

Now, what we have here, is a vector of 3 value, which is the ending point of our mouse vector. In other words, this is the 3D coordinate of the point on our mouse vector intersecting the far clipping plane.

The next step now, is to try and make the actual line for this mouse vector, and do some initial intersection test for the line and the objects in the scene. After some time, Andor suggested that I try applying the object's trans matrix onto the mouse vector, and from that, we'd have both vector and object within the same space (model space). In that, we can then proceed to doing a bounding box check, and after that, I can do the actual object's intersection test.

What I need now, is
1) Mouse Vector Equation
2) Bounding Box/Object Face's Plane Equation
3) Equation for testing line/plane intersection

Onto testing and math review I go now...

0.3 Updates

Although the theory behind picking is known and understood, but the actual work for it seems much harder than I thought it'd be.

At first, I used trigonometry to calculate the projected vector from the point where the mouse was clicked on the canvas, and aimed it directly to the back of the scene. Before I read the documentations on the stages of transformation, I thought this had produced the correct vector. But now that understood the stages, what I have actually created was a vector in Perspective View. So, instead of using trig, I approached it differently and try converting the mouse coord through the different stages of transformation to get to 3D Space.

After following the steps to converting 3D coordinates from 2D:

1) Windows Coord -> NDC

2) NDC -> Viewspace

3) Viewspace -> Model

The results doesn't seem to look accurate. The math calculation done was double checked and they were correct, but it seems that the numbers used are performing incorrect transformations.

Since the existing benchmark was hard to test out the picking functionality, I have now created a custom Canvas 3D demo that's more suitable for testing it. Now, I can actually draw the testing scenario on paper, and actually have it tested out in the demo.

Picking - Harder Than It Seems

Picking isn't as easy as I thought it'd be. After further discussion and thinking about it, I've realize how big a project this. There is actually a lot more to it than just simple coordinate retrieving and coordinate conversions.

Now that I've done more reading and researching into this, there is a lot more work to do before I can complete this project. For example, from reading, I found out about the mathematics involved and the stages involved in 3D programming. The picture below shows the stages a 3D object needs to go through before it can appear as 2D object on our screen.

(Source from www.glprogramming.com)

With the vertices of a 3D object, it needs to go through the following transformation in order:
1) Viewing Transformation
2 & 3) Projection and Viewport (Any order)
4) Modeling Transformation

From understanding this, I would most likely need to go back to my 0.2 and fix some of the work. Because now that I understand these stages, I realize that what I have done, was just turned the windows coordinate of the mouse, and converted to perspective view (projection) but not 3D (modeling).

Now that I've understand theoretically what needs to be done, I need to go back, fix my mistakes, and put the rest to work.

Canvas 3D Picking 0.2 Release

So far, everything has been going smooth. The beginning was a bit slow due to understanding what's been done already and how the structure of the code works, but it's worth the time to spend on. Things that's been completed so far:
- Managed to catch the mouse click event when it's on the canvas
- Able to convert the mouse coord to be relative to the canvas (mouse coord is relative to the window browser, therefore it needs to be recalculated to be relative to the canvas)
- Converted the mouse coord to two 3D points in the canvas (near clipping plane and far clipping plane)
- Added function to Model class to return it's vertices
- Added function to return the bounding box's vertices (might need some more work)

The project details and updates can be found here

Now to continue pressing on hard and get that 0.3 done~!

Project Changed: Canvas 3D - Picking

It's a little late in the term, but I've decided to change project. After discussing with Dave about how my previous project wasn't going anywhere, I've decided to make a switch.

I was looking through the remaining list of potential projects and unfortunately, none was appealing to me anymore. So I decided to talk with Cathy and see if there's any projects she has for Canvas 3D. Luckily, there's a project for Picking.

One thing I liked right away for this project is that I'm actually going to be doing lots of coding =) That was something I found lacking in my previous project.

To put the project description simply, what it does is that when you click in Canvas 3D, you will select the object that is in the most front in the current camera angle you are looking at.
So the details of this Picking project is this:

- Convert the mouse coord in Windows to Canvas coord
- In the current scene, find all objects that intersect where the mouse is clicked
- Find the object closest to the camera from the list of intersecting objects

So for my 0.2 Release, I will aim for the following:

- Make functions that will help complete the project
- Model.getVertices() which returns a reference of all the vertices in the object
- mouse coord convert: converting the mouse coord in Canvas coord
- other functions that might come up

And for 0.3 Release:

- Have the project working or at least close to working (with few minor bugs)

Wiki Page: Canvas 3D JS Library

The 0.2 Release Hurdle

Just when I thought the work on 0.2 has been going smoothly, I've run into a bump now. So here's what's been going on with the 0.2 release.

- been following up on the suggestions posted on bugzilla
- tried using Process Explorer to track process spawned during mozilla build
- research other apps that can log (Process Explorer can't log)
- found Process Monitor
- logged process spawned during mozilla build
- updated bugzilla


At first, when I was trying out Process Explorer, it doesn't seem to do what I needed, but after a bit more tweaking, I finally got it to show the process name, pid, ppid, time, and duration. However, I couldn't find the most important function, which was logging. I mean, that was the main thing I was trying to get - a log of the processes and their info.

So then, I dug around the Internet, and stumbled upon a similar app called Process Monitor. The tool is great, it's the perfect thing I needed. It shows all the things I needed, and I can even filter out what I want to see. The best thing is, I could export the log out in different formats like CSV and XML. But then, the program always crashes whenever I track down the processes during firefox build. Of course, the first problem that came to mind was that maybe it's incompatible with Vista, which usually is the case I find. After doing some reading, found out that it wasn't the case, Process Monitor was are built to support the later platforms. Then suddenly, EUREKA~! I notice that it's trying to show Registry Activity, File System Activity, Network Activity, and Process And Thread Activity. So I thought, it must be lagging so much from all these info it's trying to show that it's crashing. I turned all the others and showed only Process and Thread Activity, tried recapturing during the build, and SUCCESS.

I've posted a brief description of this log on bugzilla (since the CSV log is about 112 MB), and have gotten reply from Benjamin asking for possibly more information in the log, or more accurate data.

So now, I've going back to try and find those data. Hopefully I won't need to find another app to do this.

0.2 Further Updates

After looking into Process Explorer even more, I found out that it pretty much does what I needed, it shows the process name, it shows the start time, it has the duration of the process, and it gives the PID. What it's missing and the most important part is that I need is logging. If only it can log and keep a history, then it'd be the perfect tool.

Maybe I can somehow capture the "kill process" event and log it manually. This will require some more investigation on my part. Maybe I'll find another app that will do the "magic" as I do more research.

Dive into Mozilla Modifying Firefox using Extension Lab

Since I don't work with extension much myself, I've taken the easy way and followed the instructions. At first glance at the instructions, I thought to myself, "Oh man...this is gonna be one long lab".

After finished reading the entire lab, I was still a little confused, so I talked w/ Scott and he help clear things up for me. And now, the lab is clear as day.

I simply had to create 4 files and the right directory structure, copy and pasted the code, and voila, the lab is done =)

Lab 8
  |-install.rdf
  |-chrome.manifest
  |_chrome
      |_content
           |-addtabbeside.js
           |-overlay.xul

Extension file can be found here

0.2 Update

After being able to identify where (which directories) time was spent during the build, now I am suggested to try figuring out what programs get executed during build and how much time they take up. An extra to that, I will try to log the pid, ppid, start time, end time, and process name during the build.

I've taken a look at Process Explorer and it doesn't seem to do what I need. So now I've been researching on what can get this job done.