X3DOM
%-------------------------------------------------------------------------------
Goal : Multi-channel visualization based on the X3DOM
Todo :
- 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
- 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
