WebGL - More

FinalMesh generates html, javascript and data files. Javascript loads 3D data. If you want to insert 3D content into your own page you should:

Insert canvas element in the place where 3D mode should be displayed. Size is up to you of course. We use ivwindow3d as canvas Id, you can change it as well.

 <canvas id="ivwindow3d"  width="700" height="500"></canvas>

Add script file:

<script type="text/javascript" src="iv3d.js"></script>

Initialise 3D view. For instance:

<body onload="ivCommonInit3d()">

Where ivCommonInit3d is simple script. You may put it into separate js file.

<script type="text/javascript">
var view3d;
function ivCommonInit3d()
{
view3d=new ivwindow3d(document.getElementById("ivwindow3d"),"tree.json",0xf0f0f0);
}

First parameter is a canvas object, second - scene file name, last - optional background color.

view3d variable holds our 3d window object, it is possible to control this window via this variable. For instance - set background color, restore initial view, switch textures on/off, setup model-view and more.

3D Window API

Initializations

view3d= new ivwindow3d(canvas,filename,bkColor);

This function creates and attaches 3d window to existing canvas element. filename points to file with scene hierachy, bkColor is background color. Background color may be changed via m_color property.

Properties and Methods

m_color	background color
setDefView()	restores default view
setTextures(bShow)	sets textures on/off
getTextures()	returns current status of displaying textures
Invalidate()	repaints viewport.
getNodeById()	returns 3D node by its name.
setView()	activate on of predefined model-views.

Sample:

var  view3d=new ivwindow3d(document.getElementById("ivwindow3d"),"tree.json",0xcccccc);
view3d.m_color=0x353743;

Note for OpenGL developers

Shortly, for whom who familiar with OpenGL, WebGL is just a javascript port of classic OpenGL. At the same time it does not have many standard and usefull things:

All glu prefixed functions are missed, this means absence of all matrix functions.
No standard T&L - transform and lighting. This limitations sounds reasonable for the final product in limited web environment, but it makes development from scratch much more compicated, since it's imposssible to start from standard lighting.
No glBegin, glEnd, glVertex, glColor - only buffer objects. Again, this is reasonable from javascript performance point of view, but makes life much harder. For instance wireframe bounding boxes or just arrows should be rendered via object buffers and shaders.
No matrix and point classes. Even with all sort matrix libraries, 3d calculations in javascript is much harder then in c++.

As result making an WebGL project could be kind of complicated, even for skilled OpenGL developer. Many intial steps should be done in a different way - there is no strong foundation and bugs are possible in each component and visualize evem simple objects is kind of hard. But when first cube is diplayed, matrices are multiplyed and shaders work the whole situation is not that scary.

Performance

What to expect from WebGL graphics? Actually it works and not bad, quite close to classic applications. Javascripts is not that fast as C++, but it also puts static objects into graphics queue while the main time is spended in video card. So actual performance is quite close. Classic keyframe animation is possible as well, but non static geometry is limited. Something like autosmoothing, sufrace subdivisions, skinning will work slower.