X3DOM - Tentative Final

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...

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

• This work is finalized through fast and brief implementation for paper submission of Pacific Graphics 2014

• The concept of cluster rendering is illustrated in below figure.

- Web server consisted of HTML page and network server for real-time networking using socket.

- Rendering cluster requests the page as a slave or master, through web browser

- Display device, provides final image from web browser running in the rendering cluster.

• Two major issues : Configuration & Data distribution

1. Configuration - through local storage

- In cluster rendering, we should select one of the data distribution model, server-client or master-slave.

- We selected master-slave, since it requires less bandwidth, which is usually the headaches in real-time 3D, more than the computing power.

 - Configuration lets the cluster know their state(master or slave) and changes it's behavior.

 - Typically, division of the view frustum should be done so the related view frustum information should be described somewhere.

- HTML5 local storage is appropriate technology for it.

- So when the cluster connects, it reads the configuration information from local storage and rebuild the web page for cluster rendering, especially if it is the slave node, which also predefined through local storage.

View frustum division

Result of the configuration. For the same page, (a) shows the result when connected as a master and (b) shows the result when connected as a slave.

• Results

• Experiments from 4 different display platforms, three are the large high-resolution display and one is the array of tablets.
• It works. The detailed evaluation would be published somewhere.

Since it runs through the Internet, the display device and Web server can be geographically distributed.

The results.

• The related paper and conference presentation is submitted.

• A lot of interesting research issues, will be discussed in later posting.

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
• 
  

X3DOM - Day 2

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...

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

• (Added)How to apply render texture?

- See THIS EXAMPLE.

- By using <renderedTexture> node(But not described in THIS PAGE. Why?)

- Camera(=<viewpoint>) is referred in the <renderedTexture> node.

- Also, <group> node, which contains contents of the scene, has to be referred.
If not, the rendered texture is mixed up with the background(?) scene like below, as well as the viewpoint setting.

- Next, the <composedShader> from the last posting is used to render the image from the camera.

- We can separate the vertex shader and fragment shader for the independent use.

1. Vertex Shader --> setting the viewport of the rendering result.
2. Fragment Shader --> edge blending fct.

- And...HERE is my result.

The scene composed with a red box and a camera.

The left side shows the rendered texture image with edge blending shader.

(you can see the attenuation at both ends like the result in DAY1.)

The right side shows the rendered texture image with default fragment shader.

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

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

Additional Resources

• 
  

X3DOM - Day 1

X3DOM

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

Goal : Multi-channel visualization based on the X3DOM

Todo :

1. Study

• How to apply shader for edge blending and warping?
• 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 apply shader for edge blending and warping?

- X3DOM supports GLSL,HLSL,Cg shader language

- <ComposedShader> and <ShaderPart>node is used until now

- Shader code can be separated with x3d body, which will be tested later

- Toon Shading Test (done)

• Modify a little for my own from examples HERE

- Edge Blending Test (ongoing)

• Shader of existing edge blending(for Unity3D use) is converted in GLSL for test
• You can see the attenuation on the side parts.
• Warping also implemented, but the result shows something wrong with the UV coord. Should be checked later.

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

Additional Resources

1. Existing multi-channel visualization environment using Unity3D

   2. Edge blending and warping shader for each channel.

  3. Links for shder-related X3DOM documents

• Programmable Shader Components
• GLSL Binding
• Attributes and Uniforms
• More examples in addition to the official X3DOM site.