From b80352b04d0ec08b2cf2bfe51800dd272902e61d Mon Sep 17 00:00:00 2001
From: Bergmann89 <info@bergmann89.de>
Date: Tue, 22 Sep 2015 12:25:49 +0200
Subject: [PATCH] * added the rest of the documentation

---
 doc/docu.xhtml | 285 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 216 insertions(+), 69 deletions(-)

diff --git a/doc/docu.xhtml b/doc/docu.xhtml
index f4df625..c780041 100644
--- a/doc/docu.xhtml
+++ b/doc/docu.xhtml
@@ -115,33 +115,33 @@
             </li>
             <li>
                 <a class="link" href="#Class">Class</a>
-                <div class="sub">about the <span class="code">{$CLASS}</span> token</div>
+                <div class="sub">about the <span class="code">{<a href="#ebnfClass">$CLASS</a>}</span> token</div>
             </li>
             <li>
                 <div>Methods:</div>
                 <ul>
                     <li>
                         <a class="link" href="#Procedure">Procedure</a>
-                        <div class="sub">about the <span class="code">{$PROCEDURE}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfProcedure">$PROC</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Function">Function</a>
-                        <div class="sub">about the <span class="code">{$FUNCTION}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfFunction">$FUNC</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Main">Main</a>
-                        <div class="sub">about the <span class="code">{$MAIN}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfMain">$MAIN</a>}</span> token</div>
                     </li>
                     <li>
                         <div>Calls:</div>
                         <ul>
                             <li>
                                 <a class="link" href="#Call">Call</a>
-                                <div class="sub">about the <span class="code">{$CALL}</span> token</div>
+                                <div class="sub">about the <span class="code">{<a href="#ebnfCall">$CALL</a>}</span> token</div>
                             </li>
                             <li>
                                 <a class="link" href="#Inherited">Inherited</a>
-                                <div class="sub">about the <span class="code">{$INHERITED}</span> token</div>
+                                <div class="sub">about the <span class="code">{<a href="#ebnfInherited">$INHERITED</a>}</span> token</div>
                             </li>
                         </ul>
                     </li>
@@ -152,19 +152,19 @@
                 <ul>
                     <li>
                         <a class="link" href="#Include">Include</a>
-                        <div class="sub">about the <span class="code">{$INCLUDE}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfInclude">$INCLUDE</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Property">Property</a>
-                        <div class="sub">about the <span class="code">{$PROPERTY}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfProperty">$PROPERTY</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Static">Static</a>
-                        <div class="sub">about the <span class="code">{$STATIC}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfStatic">$STATIC</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#If">If</a>
-                        <div class="sub">about the <span class="code">{$IF}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfIf">$IF</a>}</span> token</div>
                     </li>
                 </ul>
             </li>
@@ -173,27 +173,27 @@
                 <ul>
                     <li>
                         <a class="link" href="#Meta">Meta</a>
-                        <div class="sub">about the <span class="code">{$META}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfMeta">$META</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Echo">Echo</a>
-                        <div class="sub">about the <span class="code">{$ECHO}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfEcho">$ECHO</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Varying">Varying</a>
-                        <div class="sub">about the <span class="code">{$VARYING}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfVarying">$VARYING</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Uniform">Uniform</a>
-                        <div class="sub">about the <span class="code">{$UNIFORM}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfUniform">$UNIFORM</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Var">Var</a>
-                        <div class="sub">about the <span class="code">{$VAR}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfVar">$VAR</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Const">Const</a>
-                        <div class="sub">about the <span class="code">{$CONST}</span> token</div>
+                        <div class="sub">about the <span class="code">{<a href="#ebnfConst">$CONST</a>}</span> token</div>
                     </li>
                     <li>
                         <a class="link" href="#Messages">Messages</a>
@@ -220,7 +220,7 @@
                 <div class="content">
                     Inside the shader file you define every needed OpenGL shader code, meta information and precompiler instructions you need. The precompiler then interprets your code and generate the normal OpenGL shader code for you. It will take care, that only the needed code parts are added to the resulting code, so the shader code is always as simple and small as needed.<br/>
                     The shader file is also a code generator. It's name is a empty string. So if you pass the empty string to the code generator creator function you will get the code generator for the whole file.<br/>
-                    A class does not need a <a href="#Main">{$MAIN}</a> method.
+                    A class does not need a {<a href="#ebnfMain">$MAIN</a>} method.<br/>
                 </div>
             </div>
 
@@ -281,7 +281,7 @@
                 <div class="content">
                     "Hello World" example:
                     <div class="code area">
-                        <span class="pre">{$MAIN}</span>
+                        <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span>
                         <br/>
                         <div>
                             <span class="buildin">gl_Position</span> = <span class="buildin">gl_ModelViewProjectionMatrix</span> * <span class="buildin">gl_Vertex</span>;<br/>
@@ -317,7 +317,7 @@
                 <div class="content">
                     A class is a logical wrapper to summarize OpenGL shader code, meta information and precompiler instructions. You can inherit a class from other classes using the $EXTENDS token. The precompiler then interprets your code and generate the normal OpenGL shader code for you. It will take care, that only the needed code parts are added to the resulting code, so the shader code is always as simple and small as needed.<br/>
                     A class is always a generator. If you use the name of class as parameter for the code generator creator function you will get a code generator for the requested class.<br/>
-                    A class or one of its parent classes always needs a <a href="#Main">{$MAIN}</a> method.
+                    A class or one of its parent classes always needs a {<a href="#ebnfMain">$MAIN</a>} method.<br/>
                 </div>
             </div>
 
@@ -419,7 +419,7 @@
                             <span class="comment">/* you can also define code here. It will be added when the code for the class is generated */</span>
                             <br/>
                             <br/>
-                            <span class="pre">{<a href="#ebnfClassFunction">$FUNC</a> 'vec4' GetColor $INLINE}</span>
+                            <span class="pre">{<a href="#ebnfFunction">$FUNC</a> 'vec4' GetColor $INLINE}</span>
                             <br/>
                             <div>
                                 <span class="pre">{<a href="#ebnfIf">$IF</a> UseColorMap}</span>
@@ -444,7 +444,7 @@
                             <span class="pre">{$END}</span>
                             <br/>
                             <br/>
-                            <span class="pre">{<a href="#ebnfClassMain">$MAIN</a>}</span>
+                            <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span>
                             <br/>
                             <div>
                                 <span class="buildin">gl_FragColor</span> = <span class="pre">{<a href="#ebnfCall">$CALL</a> GetColor}</span>;<br/>
@@ -458,7 +458,7 @@
                         <span class="pre">{<a href="#ebnfClass">$CLASS</a> ColorVert $EXTENDS Color}</span>
                         <br/>
                         <div>
-                            <span class="pre">{<a href="#ebnfClassMain">$MAIN</a>}</span>
+                            <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span>
                             <br/>
                             <div>
                                 <span class="buildin">gl_Position</span> = <span class="buildin">gl_ModelViewProjectionMatrix</span> * <span class="buildin">gl_Vertex</span>;<br/>
@@ -515,9 +515,9 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    The procedure token will generate a normal procedure in the resulting code, when the procedure is at least used one time inside a <a href="#Call">{$CALL}</a>.
+                    The procedure token will generate a normal procedure in the resulting code, when the procedure is at least used one time inside a {<a href="#ebnfCall">$CALL</a>}.<br/>
                     Inside a class you can add the $INLINE token. If the $INLINE token is added the code inside the procedure will be copied and pasted inside the resulting code.<br/>
-                    Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.
+                    Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.<br/>
                 </div>
             </div>
 
@@ -663,10 +663,10 @@
                 <div class="content">
                     simple example:
                     <div class="code area">
-                        <span class="pre">{$PROC setFragColor 'vec2' 'texCoord'}</span>
+                        <span class="pre">{<a href="#ebnfProcedure">$PROC</a> setFragColor 'vec2' 'texCoord'}</span>
                         <br/>
                         <div>
-                            <span class="pre">{$UNIFORM 'sampler2D' 'uColorMap'}</span>
+                            <span class="pre">{<a href="#ebnfUniform">$UNIFORM</a> 'sampler2D' 'uColorMap'}</span>
                             <br/>
                             <span class="type">vec4</span> color = <span class="func">texture2D</span>(uColorMap, texCoord);<br/>
                             <span class="buildin">gl_FragColor</span> = color;<br/>
@@ -674,7 +674,7 @@
                         <span class="pre">{$END}</span>
                         <br/>
                         <br/>
-                        <span class="pre">{$CALL setFragColor 'gl_TexCoord[0].st'}</span>;
+                        <span class="pre">{<a href="#ebnfCall">$CALL</a> setFragColor 'gl_TexCoord[0].st'}</span>;
                     </div>
                     <br/>
                     resulting code:
@@ -707,9 +707,9 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    The function token will generate a normal function in the resulting code, when the function is at least used one time inside a <a href="#Call">{$CALL}</a>.
+                    The function token will generate a normal function in the resulting code, when the function is at least used one time inside a {<a href="#ebnfCall">$CALL</a>}.<br/>
                     Inside a class you can add the $INLINE token. If the $INLINE token is added the code inside the function will be copied and pasted inside the resulting code.<br/>
-                    Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.
+                    Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.<br/>
                 </div>
             </div>
 
@@ -860,10 +860,10 @@
                 <div class="content">
                     simple example:
                     <div class="code area">
-                        <span class="pre">{$FUNC 'vec4' 'getColor'}</span>
+                        <span class="pre">{<a href="#ebnfFunction">$FUNC</a> 'vec4' 'getColor'}</span>
                         <br/>
                         <div>
-                            <span class="pre">{$UNIFORM 'sampler2D' 'uColorMap'}</span>
+                            <span class="pre">{<a href="#ebnfUniform">$UNIFORM</a> 'sampler2D' 'uColorMap'}</span>
                             <br/>
                             <span class="type">vec2</span> texCoord = <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>].st;<br/>
                             <span class="keyword">return</span>
@@ -872,7 +872,7 @@
                         <span class="pre">{$END}</span>
                         <br/>
                         <br/>
-                        <span class="buildin">gl_FragColor</span> = <span class="pre">{$CALL getColor}</span>;
+                        <span class="buildin">gl_FragColor</span> = <span class="pre">{<a href="#ebnfCall">$CALL</a> getColor}</span>;
                     </div>
                     <br/>
                     resulting code:
@@ -906,7 +906,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    The $MAIN token is a special procedure without parameters that will be called automatically by the pre compiler, when the code is generated. The $MAIN token is necessary inside a class and optional inside a shader file.
+                    The {<a href="#ebnfMain">$MAIN</a>} token is a special procedure without parameters that will be called automatically by the pre compiler, when the code is generated. The {<a href="#ebnfMain">$MAIN</a>} token is necessary inside a class and optional inside a shader file.<br/>
                 </div>
             </div>
 
@@ -999,7 +999,7 @@
                 <div class="content">
                     simple example:
                     <div class="code area">
-                        <span class="pre">{$MAIN}</span>
+                        <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span>
                         <br/>
                         <div>
                             <span class="buildin">gl_Position</span> = <span class="buildin">gl_ModelViewProjectionMatrix</span> * <span class="buildin">gl_Vertex</span>;<br/>
@@ -1033,7 +1033,9 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfCall">$CALL</a>} token tells the precompiler to execute a method.<br/>
+                    If the method is marked with the $INLINE token the code of this method will be copied and pasted in the resulting code. Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.<br/>
+                    If the method is not marked with the $INLINE token a normal method will be generated in the resulting code.<br/>
                 </div>
             </div>
 
@@ -1090,8 +1092,40 @@
                     <div class="noselect icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfFunction">$FUNC</a> 'vec4' 'getColor'}</span>
+                        <br/>
+                        <div>
+                            <span class="pre">{<a href="#ebnfUniform">$UNIFORM</a> 'sampler2D' 'uColorMap'}</span>
+                            <br/>
+                            <span class="type">vec2</span> texCoord = <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>].st;<br/>
+                            <span class="keyword">return</span>
+                            <span class="func">texture2D</span>(uColorMap, texCoord);<br/>
+                        </div>
+                        <span class="pre">{$END}</span>
+                        <br/>
+                        <br/>
+                        <span class="buildin">gl_FragColor</span> = <span class="pre">{<a href="#ebnfCall">$CALL</a> getColor}</span>;
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="keyword">uniform</span>
+                        <span class="type">sampler2D</span> uColorMap;<br/>
+                        <br/>
+                        <span class="type">vec4</span> getColor()<br/>
+                        {<br/>
+                        <div>
+                            <span class="type">vec2</span> texCoord = <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>].st;<br/>
+                            <span class="keyword">return</span>
+                            <span class="func">texture2D</span>(uColorMap, texCoord);<br/>
+                        </div>
+                        }<br/>
+                        <br/>
+                        <span class="buildin">gl_FragColor</span> = getColor();
+                    </div>
                 </div>
             </div>
         </div>
@@ -1107,7 +1141,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfInherited">$INHERITED</a>} token is a special {<a href="#ebnfCall">$CALL</a>} token. It can only be used inside a {<a href="#ebnfClass">$CLASS</a>}. It will call a method inside a parent class. If you add the $INLINE token, the called method will be inlined. Be careful with inlined methods, because the precompiler will not check the variable names inside the method, so you maybe have a duplicate variable when it is pasted inside the resulting code.<br/>
                 </div>
             </div>
 
@@ -1178,8 +1212,50 @@
                     <div class="noselect icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfClass">$CLASS</a> ColorVert}</span><br/>
+                        <div>
+                            <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span><br/>
+                            <div>
+                                <span class="buildin">gl_Position</span> = <span class="buildin">gl_ModelViewProjectionMatrix</span> * <span class="buildin">gl_Vertex</span>;<br/>
+                                <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>] = <span class="buildin">gl_MultiTexCoord0</span>;<br/>
+                            </div>
+                            <span class="pre">{$END}</span><br/>
+                        </div>
+                        <span class="pre">{$END}</span><br/>
+                        <br/>
+                        <span class="pre">{<a href="#ebnfClass">$CLASS</a> PhongLightVert $EXTENDS ColorVert}</span><br/>
+                        <div>
+                            <span class="pre">{<a href="#ebnfMain">$MAIN</a>}</span><br/>
+                            <div>
+                                <span class="pre">{<a href="#ebnfVarying">$VARYING</a> 'vec3' 'vNormal'}</span><br/>
+                                <span class="pre">{<a href="#ebnfVarying">$VARYING</a> 'vec3' 'vVertex'}</span><br/>
+                                <span class="pre">{<a href="#ebnfInherited">$INHERITED</a> ColorVert $INLINE};</span><br/>
+                                vNormal = <span class="func">normalize</span>(<span class="buildin">gl_NormalMatrix</span> * <span class="buildin">gl_Normal</span>);<br/>
+                                vVertex = <span class="type">vec3</span>(<span class="buildin">gl_ModelViewMatrix</span> * <span class="buildin">gl_Vertex</span>);<br/>
+                            </div>
+                            <span class="pre">{$END}</span><br/>
+                        </div>
+                        <span class="pre">{$END}</span><br/>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="keyword">varying</span> <span class="type">vec3</span> vNormal;<br/>
+                        <span class="keyword">varying</span> <span class="type">vec3</span> vVertex;<br/>
+                        <br/>
+                        <span class="type">void</span> main(<span class="type">void</span>)<br/>
+                        {<br/>
+                        <div>
+                            <span class="buildin">gl_Position</span> = <span class="buildin">gl_ModelViewProjectionMatrix</span> * <span class="buildin">gl_Vertex</span>;<br/>
+                            <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>] = <span class="buildin">gl_MultiTexCoord0</span>;<br/>
+                            vNormal = <span class="func">normalize</span>(<span class="buildin">gl_NormalMatrix</span> * <span class="buildin">gl_Normal</span>);<br/>
+                            vVertex = <span class="type">vec3</span>(<span class="buildin">gl_ModelViewMatrix</span> * <span class="buildin">gl_Vertex</span>);<br/>
+                        </div>
+                        }<br/>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1195,7 +1271,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    Using the {<a href="#ebnfInclude">$INCLUDE</a>} token you can add another shader file to the current file.
                 </div>
             </div>
 
@@ -1248,7 +1324,7 @@
                     <h4>Example:</h4>
                 </div>
                 <div class="content code area">
-                    TODO
+                    <span class="pre">{<a href="#ebnfInclude">$INCLUDE</a> './path/to/file.shdr'}</span>
                 </div>
             </div>
         </div>
@@ -1264,7 +1340,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfProperty">$PROPERTY</a>} token defines a property. The value of the property can be changed inside the application code, before generating the resulting shader code.
                 </div>
             </div>
 
@@ -1327,7 +1403,7 @@
                     <h4>Example:</h4>
                 </div>
                 <div class="content code area">
-                    TODO
+                    <span class="pre">{<a href="#ebnfProperty">$PROPERTY</a> MyBoolProperty 'true'}</span>
                 </div>
             </div>
         </div>
@@ -1343,7 +1419,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfStatic">$STATIC</a>} token defines a static constant. It is used to name a magic value, for a better code.
                 </div>
             </div>
 
@@ -1401,7 +1477,7 @@
                     <h4>Example:</h4>
                 </div>
                 <div class="content code area">
-                    TODO
+                    <span class="pre">{<a href="#ebnfStatic">$STATIC</a> MyStaticDouble '123.4'}</span>
                 </div>
             </div>
         </div>
@@ -1417,7 +1493,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    Using the {<a href="#ebnfIf">$IF</a>} token you can add another path to the decision tree. 
                 </div>
             </div>
 
@@ -1488,8 +1564,37 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfFunction">$FUNC</a> 'vec4' GetColor $INLINE}</span><br/>
+                        <div>
+                            <span class="pre">{<a href="#ebnfIf">$IF</a> UseColorMap}</span><br/>
+                            <div>
+                                <span class="pre">{<a href="#ebnfUniform">$UNIFORM</a> 'sampler2D' 'uColorMap'}</span><br/>
+                                <span class="keyword">return</span><span class="func">texture2D</span>(uColorMap, <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>].st);<br/>
+                            </div>
+                            <span class="pre">{<a href="#ebnfIf">$ELSE</a>}</span><br/>
+                            <div>
+                                <span class="keyword">return</span> <span class="buildin">gl_Color</span>;<br/>
+                            </div>
+                            <span class="pre">{$END}</span><br/>
+                        </div>
+                        <span class="pre">{$END}</span>
+                    </div>
+                    <br/>
+                    resulting code for UseColorMap = true
+                    <div class="code area">
+                        <span class="keyword">uniform</span>
+                        <span class="type">sampler2D</span> uColorMap;<br/>
+                        <br/>
+                        <span class="type">void</span> main(<span class="type">void</span>)<br/>
+                        {<br/>
+                        <div>
+                            <span class="buildin">gl_FragColor</span> = (<span class="func">texture2D</span>(uColorMap, <span class="buildin">gl_TexCoord</span>[<span class="number">0</span>].st));<br/>
+                        </div>
+                        }
+                    </div>
                 </div>
             </div>
         </div>
@@ -1505,7 +1610,8 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    Using the {$INFO}, {$WARNING} or {$ERROR} token you can generate a log message, when the resulting code is generated.<br/>
+                    Using the {$THROW} token will throw a exception while generating the resulting code.
                 </div>
             </div>
 
@@ -1657,7 +1763,7 @@
                     <h4>Example:</h4>
                 </div>
                 <div class="content code area">
-                    TODO
+                    <span class="pre">{$INFO 'This is a simple info message.'}</span>
                 </div>
             </div>
         </div>
@@ -1673,7 +1779,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfMeta">$META</a>} token is used to add meta information like version and extension to the resulting code.
                 </div>
             </div>
 
@@ -1758,7 +1864,7 @@
                     <h4>Example:</h4>
                 </div>
                 <div class="content code area">
-                    TODO
+                    <span class="pre">{$VERSION 130 compatibility}</span>
                 </div>
             </div>
         </div>
@@ -1774,7 +1880,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfEcho">$ECHO</a>} token will add the value of a {<a href="#ebnfStatic">$STATIC</a>} or {<a href="#ebnfProperty">$PROPERTY</a>} to the resulting code.
                 </div>
             </div>
 
@@ -1836,8 +1942,17 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfProperty">$PROPERTY</a> MyProperty '/* this is a test */'}</span><br/>
+                        <span class="pre">{<a href="#ebnfEcho">$ECHO</a> MyProperty}</span>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="comment">/* this is a test */</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1853,7 +1968,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfVarying">$VARYING</a>} token defines a varying inside the resuling code.
                 </div>
             </div>
 
@@ -1910,8 +2025,16 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfVarying">$VARYING</a> 'vec4' 'vVertex'}</span><br/>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="keyword">varying</span> <span class="type">vec4</span> vVertex;
+                    </div>
                 </div>
             </div>
         </div>
@@ -1927,7 +2050,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfUniform">$UNIFORM</a>} token defines an uniform inside the resuling code.
                 </div>
             </div>
 
@@ -1984,8 +2107,16 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfUniform">$UNIFORM</a> 'vec4' 'uColor'}</span><br/>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="keyword">uniform</span> <span class="type">vec4</span> uColor;
+                    </div>
                 </div>
             </div>
         </div>
@@ -2001,7 +2132,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfVar">$VAR</a>} token defines a global variable inside the resuling code.
                 </div>
             </div>
 
@@ -2043,7 +2174,7 @@
                             <polygon points="579 17 571 13 571 21"/>
                         </svg>
                         <div class="ebnf code area">
-                            <a href="#ebnfVar" title="Var">Var</a>      ::= '{$VAR' <a href="#ebnfglslTypeQuoted" title="glslTypeQuoted">glslTypeQuoted</a> <a href="#ebnfIdentifierQuoted" title="IdentifierQuoted">IdentifierQuoted</a> <a href="#ebnfglslValue" title="glslValue">glslValue</a>? '}'
+                            <a href="#ebnfVar" title="Var">Var</a> ::= '{$VAR' <a href="#ebnfglslTypeQuoted" title="glslTypeQuoted">glslTypeQuoted</a> <a href="#ebnfIdentifierQuoted" title="IdentifierQuoted">IdentifierQuoted</a> <a href="#ebnfglslValue" title="glslValue">glslValue</a>? '}'
                         </div>
                         <div class="references">
                             <span>referenced by:</span>
@@ -2063,8 +2194,16 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfVar">$VAR</a> 'vec4' '_vertex' 'vec4(1.0)'}</span><br/>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="type">vec4</span> _vertex = <span class="type">vec4</span>(<span class="number">1.0</span>);
+                    </div>
                 </div>
             </div>
         </div>
@@ -2080,7 +2219,7 @@
                     <h4>Description:</h4>
                 </div>
                 <div class="content">
-                    TODO
+                    The {<a href="#ebnfConst">$CONST</a>} token defines a global constant inside the resuling code.
                 </div>
             </div>
 
@@ -2142,8 +2281,16 @@
                     <div class="icon close">-</div>
                     <h4>Example:</h4>
                 </div>
-                <div class="content code area">
-                    TODO
+                <div class="content ">
+                    simple example:
+                    <div class="code area">
+                        <span class="pre">{<a href="#ebnfConst">$CONST</a> 'vec4' 'VERTEX' 'vec4(1.0)'}</span><br/>
+                    </div>
+                    <br/>
+                    resulting code:
+                    <div class="code area">
+                        <span class="keyword">const</span> <span class="type">vec4</span> VERTEX = <span class="type">vec4</span>(<span class="number">1.0</span>);
+                    </div>
                 </div>
             </div>
         </div>