X3DOM - Day 3

X3DOM

%-------------------------------------------------------------------------------

Goal : Multi-channel visualization based on the X3DOM

Todo :

1. Study

• How to apply shader for edge blending and warping? 
• (Added)How to apply render texture?

• How to manipulate camera projection matrix on X3DOM?
• How to synchronize variables using js?

    2. Design

• Web-based system
• What will be the main difference with multi-channel visualization using Unity3D?
• Connect-and-play?

    3. Implementation

• TBA...

%-------------------------------------------------------------------------------

• How to manipulate camera projection matrix on X3DOM?

- It takes about a full week to do this.

- At first, X3DOM is under development now so the functionality is somewhat limited.

- Also, I think the documentation should supplemented more.

- Which leads me to see the source codes of X3DOM libraries, which is unnecessary until now.

- You can find source codes in HERE

1. Development Environments

- Until the last posting, I only used notepad(EDITPLUS, actually) to editing the code.

- I found the FIREBUG, which is a nice web development tool runs in the Firefox browser.

- Also this tool enables the debugging with the breakpoints, which helped me A LOT!!!

     2. <RenderedTexture> and <ViewFrustum>

- Currently, <renderedtexture> node only works(rendered) well with <viewpoint> node reference.

- "Works well" means automated update according to the changes on the camera.

- But I need to manipulate the projection matrix of the camera, to have a proper multi-channel viewfrustum.

- So, with <ViewFrustum> node, I had to find the way to update rendered texture.

- I checked the main camera returns the right value of position and orientation, through event listener. The code snippets are like below

%---------------------

function addIt() { //onload, initialize the cam01 node with 'viewpointChanged' listener

            document.getElementById('cam01').addEventListener('viewpointChanged', viewFunc, false);

};

var viewFunc = function(evt) {

pos = evt.position; //position. vector 3

        rot = evt.orientation; // orientation. quaternion(vector 4)

mat = evt.matrix;// ???. matrix 4 by 4

}

%-----------------------------

- In short, I need to manually make a MV(modelview) matix from position and orientation values.

- I failed all, since I don't know how exactly the 'modelview' attribute is handled.

- Also the evt.matrix is really weird one, which is somewhat similar with MV matrix but not exactly.

- I solved the problem by tracking the source code which generates the evt.matrix, and inversely calculating the MV matrix of the original camera.

- Actually it was very simple.

%---------------------

var t = document.getElementById('cam01'); //cam1 object

var m = t._x3domNode.getCurrentTransform(); //cam1 transform

var m2 = m.mult(mat); //cam1 transform * mat

var m3 = m2.inverse(); //inverse of it

var m4 = m3.transpose();// and transpose

%-----------------------------

- the m4 matrix is the original MV matrix.

- And then passing the value of the MV matrix to the <viewfrustum> node of <renderedtexture> is enough for synchronization.

You can see the camera position & orientation for 

rendered texture is synchronized with the original scene camera.

Only the projection matrix is different, which I intended, 

for multi-channel visualization.

※ All of my web pages showing results are available only when I'm running my web-server.

%------------------------------------------------------------------------------

Additional Resources

•  Understanding Model, View, Projection matrix
•