WebGL - Templates

Templates may simplify life if you want to save many WebGL pages. Most likely your HTML pages should look similar while 3D content will be different.

Template consists of html file where FinalMesh will put information regarding 3D content, additional files like css and image files and information XML file. XML file may contain one or several templates. For example:

<templates>
<template name="Full Screen White" html="fullscreen.htm" />
</templates>

Where name is name of template, it's displayed in the list of templates. html - name of html file.

Or little bit more complicated template:

 <template name="Full Screen" html="fullscreen.htm" />
<template name="Dark" html="dark.htm" ><file src="dark.css" dst="dark.css"/> <file src="home.png" dst="home.png"/></template>

<File> here is additional file to copy. src name of file in template folder, dst name of file in destination folder. In this example dark.css and home.png will be copied. Files may be images, css, javascript. Each file may have condition attribute, This condition may be defined in config section of template or FinalMesh may set specific macros depending on user settings in FinalMesh UI or content of 3d file.

Template attributes

<template name="3D Viewer Full Screen" html="i_viewer_full_screen.htm" behavior="3" 
help="Full page viewer with tree view, render modes and views." order="10">

name	Name of template. Must be unique.
html	Name of main HTML file.
behaviour	Enable behaviour page in WebGL Export panel. &1 - allow modification of mouse buttons. &2 - allow configuration of object selection. Possible options are: select on mouse down or select on mouse up.
help	One extra description of template. Will be displayed in the list of templates.
order	Sort order of template. Less number, higher the template in the list.
icon	Possible options are: "html", "div", "canvas". This option is just to show main nature of template.

HTML variables

HTML is processed in a specail way. FinalMesh inserts in it name of generated data files, script files, name of model, etc. Places where required fragments should be located are defined by HTML comments. For instance:

<title><!--title--></title>

will be replaced by name of model. All possible macros are:

<!--title-->	title of model
<!--scripts-->	Will be replaced with scripts.
<!--file-->	Name of scene file.
<!--color-->	Background color
<!--numpoints-->	Number of points in generated model
<!--numfaces-->	Number of polygons in generated model
<!--view-->	Template for activating single model view
<!--views-->	Placeholder for list of all modelviews.
<!--css-->	Link css files will be here. If minify option is checked, all css files will be combined into single one.

For instance, below is fragment of template:

var view3d;
function ivCommonInit3d()
{
  var canvas=document.getElementById("ivwindow3d");
  view3d=new iv.window({canvas:canvas,file:<!--file-->,color:<!--color-->});
}
</script>
<!--scripts-->
</head>

Will be converted to:

var view3d;
function ivCommonInit3d()
{
  var canvas=document.getElementById("ivwindow3d");
  view3d=new iv.window({canvas:canvas,file:"tree.iv3d",color:0x353743});
</script>
<script type="text/javascript" src="ivmatrix3d.js"></script>
<script type="text/javascript" src="ivwindow3d.js"></script>
<script type="text/javascript" src="ivspace3d.js"></script>
</head>

Configurable Templates

A template, optionally, may be configured by the user by checking options in FinalMesh UI.

<template name="3D Viewer Full Screen" html="i_viewer_full_screen.htm" behavior="3" help="Full page viewer with tree view, render modes and views." order="10">
<config>
<value type="float" name="UI Scale" id="_UISCALE_" value="1.0" >
<select>
<value name="100%" value="1.0"/>
<value name="112%" value="1.125"/>
<value name="125%" value="1.25"/>
<value name="150%" value="1.5"/>
</select >
</value>
<value type="bool" name="Dark Theme" id="_UI_DARK_" value="false"/>
<value type="bool" name="Progress Indicator" id="_LOADPROGRESS_" value="true"/>
<value type="bool" name="Search" id="_TREEVIEW_SEARCH_" value="true"/>
<value type="bool" name="Metadata Viewer" id="_METAVIEW_" value="false"/>
<value type="bool" name="Open Tree View" id="treeviewopen" value="false"/>
<value type="bool" name="Offset Selected Objects" id="zoffset" value="false"/>
<value type="bool" name="XRay Effect" id="xrayon" value="false"/>
<value type="bool" name="Render Modes" id="renderModesControl" value="true"/>
</config>
<macro name="_HITTEST_" />
<macro name="_TREEVIEW_" />
<macro name="_EXTRA_BOX_" />
<macro name="_XRAY_" condition="xrayon" />
<macro name="_ILLUSTRATION_" />
<file src="ivview3d.js" dst="ivview3d.js" type="text/javascript"/>
<file src="viewer_full_screen.css" dst="viewer_full_screen.css"/> 
<file src="ivdivider.js" dst="ivdivider.js" type="text/javascript"/>
</template>

All configuration options are located in <config> section. Each option is in <value> node. This option will create macro, available during processing javscript, css of html file. In template itself these macros may be used in condition attributes. Propertis of each option are:

type	Value type. Possible values are float and bool. bool will create checkbox control.
name	Name of property used in UI.
id	Name of macro which will defined during generation of javascript code.
value	Default value.
select	List of possible selection items. Eacj item may have name value. See example above.

Macros may be set without condition with help of <macro> node. See example above.

Sample usage of macros in javascript file

iv.initViewer3d=function(file,bk,path,size)
{
var canvas=document.getElementById("ivwindow3d");
var v=new iv.window({canvas:canvas,color:bk});
iv.uiScale=size;
v.treeView=new iv.treeView(iv.getSubElementById(panel,"tree"),v,16*iv.uiScale);
{$if _LOADPROGRESS_}new iv.progressIndicator(v,{size:100,color:"#202020",animation:false});{$endif}
v.treeDivider=new iv.vdivider(iv.getSubElementById(panel,"main.divider"));
v.treeDivider.value={$calc 300*_UISCALE_};

Macros

Macros may be defined in template config section, with help of macro node or by FinalMesh itself.

For instance _SHADOW_ macro is defined if shadows are activated in current viewport. When this macro is defined, then special shadows rendering code will be inserted into javascript files. To force this feature on, you may set this macro with help of <macro> of <config> section.

List of system reserved macros.

_EDITOR_	Editor Functionality
_CLIPPLANE_	Clipping planes.
_SKIN_	Skin support and skin animation.
_BILLBOARD_	Billboards functionality. May be used by markups.
_SOUND_	Audio objects
_TEXTURE_	Support of textures.
_BUMP_	Bump mapping.
_VIDEO_	Video textures.
_SHADOW_	Shadows
_EXTRA_MATH_	Mathematical functions: mat4.getTranslate, mat4.rotate, mat4.setRotate
_ANIMATION_	Support of animations.
_MARKUP_	Support of markups created in 3d files.
_THICKLINE_	Support of thick lines in markups.
_ILLUSTRATION_	Illustration render mode.
_HITTEST_	Hit testing - select object in 3d window by mouse click.
_PMI_	PMI support.
_WORLD_AXIS_	World space axes.
_TEXTURED_BK_	Texture background.
_CFG_BK_TRANSPARENT	Transparent background.
_VERTEX_COLOR_	Per vertex colors
_TREEVIEW_	Treeview window - Objects window.
_TREEVIEW_SEARCH_	Search in tree view.
_METAVIEW_	Meta data viewer.
_NODE_GIZMO_	Selected node gizmo - for rotate, scale, move modes.
_RECT_SEL_	Select node by rectangle.
_XRAY_	XRay effect.
_EXTRA_BOX_	iv.node.getBoundingBox function and associated functions.
_ALPHA_BK_	Transparent background.
_EXTRA_SEARCH_	iv.node.search and iv.window.searchNode fucntions.
_EXTRA_LOAD_	loadObject, merging functionality.
_EXTRA_MODELVIEW_	iv.window.setModelView function.
_WND_ANIMATION_	Animtion in window itself, like camera transition and rotation.

Examples

CSS file

body {
font-size: 100%;
font-family:"Segoe UI",Tahoma, Arial, Helvetica;
color: #000;
line-height: 150%;
background: #FFF;
margin: 0px;
padding: 0px;
{$if _BOTTOM_PART_}
overflow:always;
{$else}
overflow:hidden;
{$endif}
}

HTML File

<li><a onclick="iv.onMenuSelected(this);" id="view3d-cfg-materials"><span>Materials On/Off</span></a></li>
<li><a onclick="iv.onMenuSelected(this);" id="view3d-cfg-dblside"><span>Show Backfacing Polygons</span></a></li>
{$if _SHADOW_}
<li><a onclick="iv.onMenuSelected(this);" id="view3d-cfg-shadows"><span>Shadows</span></a></li>
{$endif}
<li><a onclick="iv.onMenuSelected(this);" id="view3d-cfg-xray"><span>XRay</span></a></li>

JS File

iv.window.prototype.uiOnCommand=function(btn)
{
switch(btn.id)
{
case "ivfullscreen":this.uiSwitchFullScreen();break;
{$if _TREEVIEW_}
case "ivtreeview":this.uiSwitchTreeView();break;
{$endif}
{$if _BUTTON_CONFIG_}
case "ivconfig":this.uiSwitchConfig();break;
{$endif}
{$if _BUTTON_VIEW_}
case "ivview":this.uiSwitchView();break;
{$endif}
}
}

Template Installation

If template is in zip file, extract .zip files to any folder. In FinalMesh, in Save As -> WebGL. In templates list, click on Browse, locate that folder and select templates.xml. Click OK. Now additional templates will be there.