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