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.

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 following 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.json",color:0x353743});
}
<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>

Template Installation

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