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>

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

 

See also: WebGL Help, API