<!doctype html>
<!--
/*************************************************************************
* tl math plugin and CEP
*thomas laforge  Copyright 2020
**************************************************************************/
-->
<html>

<head>
	<meta charset="utf-8">
	<script src="./ext.js"></script>
	<script src="./lib/CSInterface.js"></script>
	<script src="./lib/jquery-1.9.1.js"></script>
	<script src="./lib/Vulcan.js"></script>
	<script src="./lib/ace_min/ace.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="./css/main_style.css" media="screen">
	<link rel="stylesheet" type="text/css" href="./css/editor_style.css" media="screen">
	<link rel="stylesheet" type="text/css" href="./css/tables_style.css" media="screen">
	<link rel="stylesheet" type="text/css" href="./css/preset_style.css"  media="screen"> 
	</head>

<body onLoad="onLoaded()">	
    <div id="MenuColId">
		<input type="image" class="menuIcons" src="./imgs/preset_settings.png" onClick="toggleMenus('presetSettingId')" ></input>
		<input type="image" class="menuIcons" src="./imgs/param_settings.png"onClick= "toggleMenus('paramSettingsId')" ></input>
		<input type="image" class="menuIcons" src="./imgs/library.png"onCLick="toggleMenus('presetId')"></input>
		<input type="image" class="menuIcons"  src="./imgs/editor.png" onCLick=" toggleEditor()"></input>
		<input type="image" class="menuIcons" src="./imgs/wiki.png"onCLick="toggleMenus('wiki')"></input>
		</div>
	<div id="SettingsCol" class="sidebar">
		<div id="split-bar"></div>
		<div id="grpSett">
			<div id="fileId">

				</div>
			<div id="presetSettingId">
				<button id="btnLoad">Load File</button>
				<button id="btnExport">Export As JSON</button>
				<button id="btnSavePreset">Save as Preset</button></br>
				<td>Preset Name</td>
				<td><input type="text"   id="presetName" value="preset_Name" maxlength="31"></td></br>
				</br>
				<td>Preset Tags</td>
				<input type="text" id="presetTags" placeholder = "effect skeleton someTags" title="tags"></br>
				</br>
				<div id = langSelecGrp>
						<td>Coding Langage</td>
						<select id="langSelec" , onChange= "langSelecFunc()" >
							<option   value="mExpr" >Math Expression Mode</option>
							<option  value="GLSL">GLSL Mode</option>
							</select>
					</div>
				<button id="descriptionGUI"  onClick= "toggleDescription()">Description</button></br>
				</div>
			<div id="descriptionId">Description</br>
				<textarea  rows = "30" cols = "60" maxlength="2000" id="descriptionText">describe here</textarea>
				</div>
			<div id="presetId">
				<div id="presetToolBar">
					<button id="btnLoadAndApplyPresetFromMenu">Load And Apply</button>
					<button id="btnLoadPresetFromMenu">Open in Editor</button>
					<input type="text" id="seachBarInput" placeholder = "search for presets or tags..." title="Type a preset or tag name"></br>
					<p id="presetDescr">description : </p></br>
					</div>
					<form action="#">
						<div  id="presetsListAccess"></div>
					</form>
				</div>
			<div id="paramSettingsId">
				<br />
				<button class="settingsGUI" id="compSettBtn" onclick="openSettingsMenu('settingsGrp')">composition</button></br>
				<button class="settingsGUI" id="exprSettBtn" onclick="openSettingsMenu('exprSettingsGrp')">epxressions</button></br>
				<button class="settingsGUI" id="layerSettBtn" onclick="openSettingsMenu('layerGrp')">layer</button></br>
				<button class="settingsGUI" id="sliderSettBtn" onclick="openSettingsMenu('sliderGrp')">sliders</button></br>
				<button class="settingsGUI" id="pointGSettBtn" onclick="openSettingsMenu('pointGrp')">points</button></br>
				<button class="settingsGUI" id="cboxSettBtn" onclick="openSettingsMenu('cboxGrp')">checkboxes</button></br>
				<button class="settingsGUI" id="colorSettBtn" onclick="openSettingsMenu('colorGrp')">colors</button></br>
				<button class="settingsGUI" id="rotationSettBtn" onclick="openSettingsMenu('rotationGrp')">rotations</button></br>
				<br />
				<table id="group_of_tables">
					<td>
						<table id= "settingsGrp">
							<tr class = "settingsGrp">
								<th>Parameter</th>
								<th>GUI Name</th>
								<tr class = "settingsGrp">
									<td>time in seconds</td>
									<td ><input type="text" id ="tsecName"  value="time" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
									<td>time in frames</td>
									<td><input type="text" id ="tframeName"  value="time_frame" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
									<td>frame rate</td>
									<td><input type="text" id ="fpsName" value="fps" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
									<td>resolution</td>
									<td><input type="text" id ="resolutionName"  value="resolution" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
									<td>layer position</td>
									<td><input type="text" id ="layerPositionName"  value="layerPosition" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
									<td>layer scale</td>
									<td><input type="text" id ="layerScaleName"  value="layerScale" maxlength="31"></td>
									</tr>
								<tr class = "settingsGrp">
										<td>comp resolution</td>
										<td><input type="text" id ="compResolutionName"  value="compResolution" maxlength="31"></td>
										</tr>
									<tr class = "settingsGrp">
										<td>camera position</td>
										<td><input type="text" id ="camera_pos"  value="camera_position" maxlength="31"></td>
										</tr>
									<tr class = "settingsGrp">
										<td>camera target</td>
										<td><input type="text" id ="camera_targ" value="camera_target" maxlength="31"></td>
										</tr>
									<tr class = "settingsGrp">
										<td>camera rotation</td>
										<td><input type="text" id ="camera_rot" value="camera_rotation" maxlength="31"></td>
										</tr>
									<tr class = "settingsGrp">
										<td>camera zoom</td>
										<td><input type="text" id ="camera_zoom" value="camera_zoom" maxlength="31"></td>
										</tr>
									</tr>
							</table>
						</td>
					<td>
						<table id="exprSettingsGrp">
							<tr class = "exprSettingsGrp">
								<th>Parameter</th>
								<th>GUI Name</th>
								<tr class = "exprSettingsGrp">
									<td>crrent channel</td>
									<td><input type="text" id = "expr_current_channelName" value="inChannel" maxlength="31"></td>
									</tr>
									<tr class = "exprSettingsGrp">
										<td>rgb channels</td>
										<td><input type="text" id = "expr_rgb_channelName" value="rgbInput" maxlength="31"></td>
										</tr>
								<tr class = "exprSettingsGrp">
									<td>pixel coordonates</td>
									<td><input type="text" id = "expr_pixName" value="pix" maxlength="31"></td>
									</tr>
									</tr>
							</table>
						</td>
					<td>
						<table id="layerGrp">
							<tr id>
								<th>Parameter</th>
								<th>GUI Name</th> 
								<th>Visible</th>
								<tr class = "LayerGrp">
									<tr>
										<td>layer Group</td>
										<td><input type="text"   id="layerGrpName" value="layerGrp" maxlength="31"></td>
										<td><input type="checkbox" name="layerGrpVisible" id="layerGrpVisible" onClick= "toggleCheckbox('cblayers', 'layerGrpVisible')" checked ></td>
										</tr>
									<tr>
										<td>current layer</td>
										<td><input type="text" id = "layer00_name" value="texture0" maxlength="31"></td>
										</tr>
									<tr>
										<td>layer 01</td>
										<td><input type="text" id = "layer01_name" value="texture1" maxlength="31"></td>
										<td><input type="checkbox" id = "layer01Visible" name="layer01Visible" class="cblayers" checked></td>
										</tr>
									<tr>
										<td>layer 02</td>
										<td><input type="text" id = "layer02_name" value="texture2" maxlength="31"></td>
										<td><input type="checkbox" id = "layer02Visible" name="layer02Visible" class="cblayers" checked></td>
										</tr>
									<tr>
										<td>layer 03</td>
										<td><input type="text" id = "layer03_name" value="texture3" maxlength="31"></td>
										<td><input type="checkbox" id = "layer03Visible" name="layer03Visible" class="cblayers" checked></td>
										</tr>
									<tr>
										<td>layer 04</td>
										<td><input type="text" id = "layer04_name" value="texture4" maxlength="31"></td>
										<td><input type="checkbox" id = "layer04Visible" name="layer04Visible" class="cblayers" checked></td>
										</tr>
								</tr>
							</table>
						</td>
					<td>
						<table  id="sliderGrp">
							</table>
						</td>
					<td>
						<table id="pointGrp">
							</table>
						</td>
					<td>
						<table id="cboxGrp">
							</table>
						</td>
					<td>
						<table id="colorGrp">
							</table>
						</td>
					<td>
						<table id="rotationGrp">
							</table>
						</td>
				</table>
				</div>
				<div id="wiki">
					<p><strong>tl Math Wiki.</strong></p>

						<p>Tl Math Copyright (C) 2020 Thomas Laforge</p>

						<p>The code contains:</p>

						<ul>
						<li><a>json for modern c++ by Niels  Lohmannnhttps://github.com/nlohmann</a></li>

						<li><a>ace.js library   https://github.com/ajaxorg/ace</a></li>

						<li><a>Shadertoy examples with their own licenses https://shadertoy.com</a></li>
						</ul>

						<hr />

						<p><strong>Table of contents</strong></p>

						<h6 id="1whatistlmath">1-What is tl Math?</h6>

						<h6 id="2whatisglsl">2-What is GLSL?</h6>

						<h6 id="3isitpossibletoloadapresetwithoutcoding">3-Is it possible to load a preset without coding?</h6>

						<h6 id="4quickmenuoverview">4-Quick menu overview</h6>

						<h6 id="5expressionvsfullshader">5-Expression vs full Shader</h6>

						<h6 id="6writeanexpressionstepbystep">6-Write an expression step by step</h6>

						<h6 id="7writeafullshaderstepbystep">7-Write a full shader step by step</h6>

						<hr />

						<p><strong>1-What is tlMath?</strong></p>

						<p>tlMath is an After Effect Hybrid add-on. 
						With this add-on you can write your own effects filters or generator, using the GLSL language (a lot documented on the web) and the After Effect GUI. tlMath also contains some presets, so if your afraid with code, use it as an effect library.</p>

						<p>Hybrid  means there is a plug-in side and a panel side.
						The plug-in interprets GLSL shaders, convert them to Effects, with customizable parameters.
						Through the panel side you can:</p>

						<ul>
						<li><p>access the library</p></li>

						<li><p>write shaders</p></li>

						<li><p>customize parameters/set up</p></li>

						<li><p>rename and tag the preset</p></li>

						<li><p>import and/or export it.</p></li>
						</ul>

						<hr />

						<p><strong>2- What is GLSL?</strong></p>

						<p>GLSL is a high level language made by the kronos Group.It's written for graphic cards and is rendered in an OpenGL context. Video games use it since 2004 and OpenGL2. it can also be find in 3d programs and in some VFX production tools, like Autodesk Flame. A web and mobile version of the language has been created: OpenGL-ES, for webGL.
						Each web sites about GLSL are based on this API.</p>

						<p>The plugin <strong><em>uses the glsl 330 version</em></strong>. (witch goes with OpenGL 3.3) Don't worry most of OpenGL-ES shaders works in 330 version.
						Minimal requirement: After Effect CC 2017 and higher. (cc2017 is now deprecated by Adobe, but the plug-in project was based on it SDK).</p>

						<pre><code>Each shaders installed in the library has been tested on a low intel graphic card (intel UHD 620) in After Effect CC 2019
						</code></pre>

						<p>The wiki will teach you the basic of this language but you should have a look to some nice websites to learn it.</p>

						<ul>
						<li><p><a>the book of shaders https://thebookofshaders.com</a> In my opinion it's one of the best to enter in GLSL's world.</p></li>

						<li><p><a>shadertoy www.shadertoy.com</a>. It's the best library of shader. There are all type of shaders, from basic to complex. One of the creator team, Inigo Quilez has made a nice video tutorial for beginner https://www.youtube.com/watch?v=0ifChJ0nJfM.  Inside shadertoy there is also a nice tutorial to read/apply https://www.shadertoy.com/view/Md23DV</p>

						<ul>
						<li><p><a>glsl-Sandbox http://glslsandbox.com</a> It's also a library but without search engine. So you can navigate to explore and find something randomly.</p></li>

						<li><p><a>logik matchbook https://logik-matchbook.org</a>. This website has a lot of glsl shaders written for Autodesk Flame, but easily adaptable in the plug-in. (some of the library are based on shaders from this library themselves inspired by Shadertoy's shaders.)</p></li></ul></li>
						</ul>

						<hr />

						<p><strong>3-Is it possible to load a preset without coding ?</strong></p>

						<p>Yes it's possible. When the setup is loaded, the first window you see is a library. You can select a preset and click on the "load and apply" button. You’ll find more details in the next section on the library menu.</p>

						<hr />

						<p><strong>4-Quick menu overview</strong></p>

						<p><strong>1. The plug-in.</strong></p>

						<p>When you apply the plug-in on a layer, you get a result like that:</p>

						<p><img src="./imgs/docs/screenshots/Effect_00.png" alt="" /></p>

						<pre><code> In the example, the effect is applied on a white solid. The result is the same.
						</code></pre>

						<p>First look</p>

						<p>You get several parameters:</p>

						<p>3 button, 10 sliders, 10 points, 10 colors, 10 rotations and 4 layers.</p>

						<p>But you have to configure them first, if not,</p>

						<p>those parameters do nothing, until you enter in the setup.</p>

						<p>Let’s take a closer look at the 3 buttons</p>

						<ul>
						<li><p>Setup : will call the panel, to load, or to edit/write a preset.</p></li>

						<li><p>Effect description: Print the description of the preset. (read-only)</p></li>

						<li><p>Reset preset: similar to After Effect reset button. hy this button? Because the after effect reset button will reset to the default preset inside the plug-in. Here, this button will keep your chosen preset and will reset to the preset's default values, defined in the panel.</p></li>
						</ul>

						<p><strong>2. The Panel.</strong></p>

						<p>When you open the panel, Either though the setup or the After Effect extension menu you'll get something like this:</p>

						<p><img src="./imgs/docs/screenshots/Menu_00.png" alt="" /></p>

						<p><strong>The column on the left is the menu access</strong></p>

						<ul>
						<li>The library (default menu): the opened menu when you launch the panel. In this menu, you can look at the list of preset, made by default or presets you added in the library. The search bar can help you to search by name and by tags.</li>
						</ul>

						<pre><code>The selected preset can be loaded and apply in After Effect, clicking on "Load and Apply".
						Or if you want to code, you can send it to the editor by clicking on "Open in Editor".
						</code></pre>

						<ul>
						<li><p>The Preset Setting. </p>

						<p><img src="./imgs/docs/screenshots/Menu_04.png" alt="" /></p>

						<p>In this menu:</p>

						<ul>
						<li>Write your preset name. It's not the file name but the name shown in library and in the plugin GUI.</li></ul></li>
						</ul>

						<pre><code> Special characters will be deleted if you use one of them.
						</code></pre>

						<ul>
						<li><p>Choose tags used with the search engine.</p></li>

						<li><p>Choose the coding language. You can choose the coding language mode between glsl330, (you will have to write the full shader) and the expression. Look at section 5-Expression vs full Shader for more informations.</p></li>
						</ul>

						<p>** Description: Edit text to write the description of the preset, Limited to 2048 characters. </p>

						<ul>
						<li><p>The Parameters Setting. In this menu:</p>

						<p><img src="./imgs/docs/screenshots/Menu_03.png" alt="" /></p>

						<ul>
						<li><p>You define the name, and the default values when possible for each variables input in the GLSL code, coming from after effect.</p></li>

						<li><p>composition settings. Those parameters are coming from the after effect's composition, so you cannot set default values, but you can write the name to identify it in the code.</p></li></ul></li>
						</ul>

						<p>Parameter name | Type of variable | Function
						------------ | ------------- | -------------
						time in seconds | vec2 | returns the layer time in seconds
						time in frames | vec2 | returns the layer time in frames
						frame rate | float | returns the layer frame rate
						resolution | vec2 | returns the resolution of the layer
						layer position | vec3 | returns the position of the layer in the composition
						layer scale | vec3 | returns the scale of the layer
						comp resolution | vec2 | returns the resolution of the composition
						camera position| vec3 | returns the position of the camera in the composition world
						camera target| vec3 | returns the position of the camera's target in the composition world
						camera rotation| vec3 | returns the rotation of the camera  in the composition world
						camera zoom| vec3 | returns the camera's zoom value</p>

						<ul>
						<li>expressions settings. As for composition settings, you cannot set default vaues but you can write the name.</li>
						</ul>

						<p>Parameter name | Type of variable | Function
						------------ | ------------- | -------------
						current channel | float | In expression splited mode, returns the current channel (from the input)
						rgb channels | vec3| In expression RGB mode, returns the rgb channel (from the input)
						Pixel Coordinates | vec2 | In both expression modes, returns the pixel coordinate, equivalent of gl_FragCoord.</p>

						<ul>
						<li><p>layer settings. Choose the name for each layers (until 4 external layers and the source layer) and if the layer is visible in the plug-in part. </p></li>

						<li><p>Sliders settings. You can write the name you want to the sliders, the default value (1 dimension) and if it's visible or not. (If not used, why showing it?). a slider can take a <strong>float value</strong> between -1000 and 1000, but the visible values are between 0 and 100, in floating points. </p></li>

						<li><p>Points settings. You can write the name you want to the points, the default values (3 dimensions) and if it's visible or not. (If not used, why showing it?). <strong>vec3 value</strong></p></li>

						<li><p>Checkboxes settings. You can write the name you want to the checkboxes, the default value (1 dimension) and if it's visible or not. (If not used, why showing it?).<strong>bool value</strong></p></li>

						<li><p>Colour settings. You can write the name you want to the colour settings, the default values (3 dimensions) and if it's visible or not. (If not used, why showing it?).<strong>vec3 value</strong></p></li>

						<li><p>Rotation settings. You can write the name you want to the rotation settings, the default value (1 dimension) and if it's visible or not. (If not used, why showing it?). <strong>float value</strong></p>

						<ul>
						<li>The Editor Menu.
						If you want to code, this menu is for you. Based on ace.js library, the editor highlight the GLSL grammar.
						On the GUI side, you can have only the editor on the screen, or split with the others menu on the left side.
						Depending of your choice about the mode, the editor will have different window.</li></ul>

						<p><img src="./imgs/docs/screenshots/Menu_06.png" alt="" />
						<strong>expression group rgb mode</strong></p>

						<p><img src="./imgs/docs/screenshots/Menu_07.png" alt="" />
						<strong>epxression split rgb mode</strong></p>

						<p><img src="./imgs/docs/screenshots/Menu_05.png" alt="" />
						<strong>glsl mode</strong></p></li>
						</ul>

						<hr />

						<p><strong>5-Basic rules of GLSL</strong>
						The GLSL grammar is similar to the C language but with some restrictions and some specifics (and nice) things.
						The plug-in uses two shaders, the first is vertex shader, and the second the fragment shader. There are other types   of shaders in opengl world (geometry shaders, compute shaders and other stuff), but for now the plug-in use only vertex and fragment shaders.</p>

						<pre><code> * The vertex shaders is applied on each vertices loaded by opengl. For now, the plug-in send only a 2d image, with 4 vertices so in this version vertex shader are a bit limited. (version 1.15), but with 3d models vertex shader is used to apply displacement, deformation etc. The vertex shader cannot add vertices, or delete it can only change existing things.

						* The fragment shader (also called pixel shader) is applied on the pixels, it's the last step. Most of the works happen here.

						* As in C language, the GLSL language has variables, (global or local), functions, conditions etc.  

						* Swizzling: you can easy swizzle some glsl variable. For example you got the **resolution** of the image. it's type of **vec2** that means this variable has two dimensions of type float. you can write resolution.x to get only the first dimension, resolution.y to access the second or resolution.xy for both. It's possible to do the same with colors. For exemple you get a **vec3 color** variable. You want to access to the red channel: color.r, the green color.g and blue color.b. the alpha channel is the last one.

						* Think with normalized values. Whatever your color-space in After Effect, the color-space in glsl is in floating values between 0 and 1. The plug-in does the conversion in input and in output. Also when you do some image offset, displacement, you'll often have to convert values from parameters like points to normalized values. Look at the step by step example or the  rgb_offset preset

						* In openGL word the origin of the image  (with (0,0) coordinates) is at the down left point of the image, in After Effect is on the top left. The examples show how to do the conversion.
						</code></pre>

						<hr />

						<p><strong>6-Expression mode vs full Shader mode</strong></p>

						<p>The both mode are written in GLSL. So why two modes ?
						At the origin, the plug-in was imagined to rights some short expressions for the pixel worlds. But the first experiments were two slow working on the CPU side. So the plug-in switched to the GPU side, faster to interpret high level language, here the GLSL. But the plug-in still has an objective to be used by no professional coders, the same users of the after effect expressions world.</p>

						<p>⚠️  In version 1.15, vertex shaders operation are very limited, so shouldn't use it for now. But in the future some new parameters will be there to play like on /www.vertexshaderart.com/ </p>

						<p>To sum up:  </p>

						<ul>
						<li><p>The Expression mode is for you if:</p>

						<ul>
						<li>you begin in the GLSL world</li>

						<li>you like few lines of expression and don't want to import variable</li>

						<li>your shader have few functions or an be written in one</li>

						<li>you want to affect quickly each colour channels separately.</li>

						<li>you want to do some experiences</li>

						<li>⚠️  In expression Mode, use common part to write functions, it s not possible in channel's expression.</li></ul></li>

						<li><p>The full shader models for you if:</p>

						<p><ul>
						<li>you're a GLSL coder.</li></p>

						<p><li>you're not afraid of lots of lines</li></p>

						<p><li>you want to adapt a shader from a website </li></ul>

						<p></p></li>
						</ul></p>

						<p>Expression channel | return expected | Function
						------------ | ------------- | -------------
						red channel | float | the expression for the red channel
						green channel | float | the expression for the green channel
						blue channel | float | the expression for the blue channel
						alpha channel | float | the expression for the alpha channel
						rgb channel | vec3 | the expression for the rgb channels</p>

						<p>shader  | return expected | Function
						------------ | ------------- | -------------
						vertex shader | vec4 (and vec2 uv) | the vertex shader. First operation in glsl. calculates gl_position and send informations to fragment shader. In V 1.15 yo can work only with four vertices, so a bit limited but a setting is coming to add more.
						fragment shader | vec4 | Output the RGBA channel. For now the main part of the work appends here. (v1.15)</p>

						<hr />

						<p><strong>7-Write an expression step by step</strong></p>

						<p><strong>EXERCISE I</strong></p>

						<p>In the first example we'll write a basic mix preset, to mix two layers, with an influence for each channel.
						The final result is in the library: tuto_mixer preset.</p>

						<ul>
						<li>Open the default preset</li>

						<li>First of all, in preset setting choose "Math Expression Mode"</li>

						<li>At the top the editor menu, uncheck the checkbox "Use the same expression in RGB"</li>

						<li>In parameters we need to access to one other layer (hide the three others), and we need three sliders. And we can hide the others. (hid points, checkboxes, rotations, color etc).
						<img src="./imgs/docs/screenshots/tuto_01.PNG" alt="" />
						<img src="./imgs/docs/screenshots/tuto_02.PNG" alt="" /></li>
						</ul>

						<p>let's start in red channel expression</p>

						<p>At the origin, your expression looks like that.</p>

						<pre><code>return inChannel;
						</code></pre>

						<p>Each expression much finish by return [float]. Only float variable are accepted.
						"inChannel" is the default name to get the input of the channel. In other words, this expression returns the same image as in input.</p>

						<p>Now replace "inChannel" by slider_1 in the expression</p>

						<pre><code>return slider_1;
						</code></pre>

						<p>By default slider<em>1 is on 0 so no red channel. but if you push the slider higher than 1, you'll get the full value of red (if you're in 8bits you'll get 255, if you're in 16, 32768 and 1 in 32 bits). So let's normalize the slider</em>1 value.</p>

						<pre><code>return slider_1/100;
						</code></pre>

						<p>In the plug-in part, the slider is limited to 100 in visible value, (and 1000 is the max). So for the user it's nicer to get a percent value. if the  slider is set to 100, the red values is the maximum, 0 is the minimum.
						It's nice but only one color on the screen is a bit poor so let's import an other source layer.
						By default, the source layer is called texture0, the first new layer texture1 etc... 
						To load a texture use the function <strong>texture(sampler2D, UV).</strong></p>

						<pre><code> *The sampler2D is the content of the texture, coming from after effect. In expression mode, you don't have to import it, just use the chosen name in parameter settings.("texture1").

						*the UV: the pixel coordinate in the image, it's a normalized value. (expected between 0 and 1) From after Effect the plug-in give out_uvs function and textUvs. What are the differences ? textUvs convert the y coordinates from the After Effect world to opengl world. (so it's flopped vertically).
						</code></pre>

						<p>⚠️ the texture function returns a vec4(red,green,blue,alpha).Don't forget we have to load only one channel of the texture get a float value, so we need the red channel only.</p>

						<pre><code>float result = texture(texture1, textUvs).r;
						return result;
						</code></pre>

						<p>We now got a copy of the red channel from the other layer. 
						make a mix (equivalent of over merge) with an influence from the slider. </p>

						<p>the mix function works with any types of variables, but they have to be same types. The last value is type of float. 
						We'll use the slider as influence.
						mix (source1, source2, float); </p>

						<pre><code>float result = mix( inChannel,texture(texture1, textUvs).r,slider_1/100);
						return result;
						</code></pre>

						<p>Let's change the same "slider<em>1" to "red</em>mix". 
						Go to the parameter settings menu.
							Click on sliders button and replace the name. If you want to have fun, you can call it "john". 
						special characters except underscore are forbidden and may have conflict in GLSL part. 
						Set the default value to 50.
						We have to update the expression : </p>

						<pre><code>float result = mix( inChannel,texture(texture1, textUvs).r,red_mix/100);
						return result;
						</code></pre>

						<p><img src="./imgs/docs/screenshots/tuto_03.PNG" alt="" /></p>

						<p>To finish, we also rename the two others "green<em>mix" and "blue</em>mix". Let's set default values to 50.</p>

						<p>The last part of the first exercise: do the same in rgb expression mode. We have to output a vec3 value and in one block of expression.</p>

						<pre><code>-vec4 layer= texture(texture1, textUvs);//load the texture from the second layer.  

						-vec3 newLayer = vec3(0.0); // create a black screen. In  GLSL if you want to set the same value on the  dimensions of a vector you can do vec(x) (val). x is the dimension of the vector and val the value to set for each dimension. The value must be defined as floating.

						-let's do the same as in split expression mode: mix each channel. Note the channel from the source layer is called inputRgb (you can change it in parameter settings). it's a vec3 returning the rgb values.

						-return newLayer; //finish returning the mix value.
						</code></pre>

						<pre><code>vec4 layer= texture(texture1, textUvs);
						vec3 newLayer = vec3(0.0);
						newLayer.r = mix( inputRgb.r, layer.r ,red_mix/100);
						newLayer.g = mix( inputRgb.g, layer.g ,green_mix/100);
						newLayer.b = mix( inputRgb.b, layer.b ,blue_mix/100);
						return newLayer;
						</code></pre>
				</div>
			</div>
		</div>
	
	<div  id="tabEditsMenu" class="tabEditors">
		
		<button id="btnApply">Apply</button><br/>
		<div id="editor_global_settings">
			<button id="search">search</button>
			<button id="replace">replace</button>
			font size <input type="number" id="font_size" maxlength="3" value="14"></input>
		</div>
		<div id ="expr_editor_settings" class="mathGUI">
				<td><input type="checkbox" id ="rgbmodeB"  onClick="mathGUIRgbModeFunc()" checked>Use the same expression in RGB</td>
				</div>
		<br/>
		<button class="mathGUI" id="redExpBtn" onclick="openEditor(event, 'expr_red_tab', 'expr_red_editor')">Red channel expression</button>
		<button class="mathGUI" id="greenExpBtn" onclick="openEditor(event, 'expr_green_tab', 'expr_green_editor')" >Green channel expression</button>
		<button class="mathGUI" id="blueExpBtn" onclick="openEditor(event, 'expr_blue_tab', 'expr_blue_editor')" >Blue channel expression</button>
		<button class="mathGUI" id="rgbExpBtn"  onclick="openEditor(event, 'expr_rgb_tab', 'expr_rgb_editor')" >rgb channels expression</button>
		<button class="mathGUI" id="alphaExpBtn"  onclick="openEditor(event, 'expr_alpha_tab', 'expr_alpha_editor')">Alpha channel expression</button>
		<button class="mathGUI" id="commonExpBtn"  onclick="openEditor(event, 'expr_common_tab', 'expr_common_editor')">Common expression</button>
		<button class="glslGUI" onclick="openEditor(event, 'gl33_frag_tab', 'gl33_frag_editor')" >GLSL Fragment Shader</button>
		<button class="glslGUI" onclick="openEditor(event, 'gl33_vert_tab', 'gl33_vert_editor')">GLSL Vertex Shader</button>
		<br/>
		<div id=consoleGrp>
			<div id="gl33_frag_tab_console" class="console" > glsl frag console</div>
			<div id="gl33_vert_tab_console"class="console" > glsl vert console</div>
			<div id="expr_red_tab_console"class="console"> math red channel console</div>
			<div id="expr_green_tab_console"class="console"> math green channel console</div>
			<div id="expr_blue_tab_console"class="console"> math blue channel console</div>
			<div id="expr_rgb_tab_console"class="console"> math rgb channels console</div>
			<div id="expr_alpha_tab_console"class="console"> math alpha channel console</div>
			<div id="expr_common_tab_console"class="console"> math common console</div>
		</div>
		<div class="text_editor">
			<div id="gl33_frag_tab" class="tabEditor">
				<h3 id="editor_name">fragment shader code</h3>
				<pre id="gl33_frag_editor" class="textEditor">//write your Fragment shader code here</pre>
				</div>
			<div id="gl33_vert_tab" class="tabEditor">	
				<h3 id="editor_name">vertex shader code</h3>
				<pre id="gl33_vert_editor" class="textEditor">//write your Vertex shader code here</pre>
				</div>
		
			<div id="expr_red_tab" class="tabEditor">
				<h3 id="editor_name">red expression code</h3>	
				<pre id="expr_red_editor" class="textEditor">//write your red expression here</pre>
				</div>
		
			<div id="expr_green_tab" class="tabEditor">
				<h3 id="editor_name">green expression code</h3>	
				<pre id="expr_green_editor" class="textEditor">//write your green expresion here</pre>
				</div>
			
			<div id="expr_blue_tab" class="tabEditor">
				<h3 id="editor_name">blue expression code</h3>	
				<pre id="expr_blue_editor" class="textEditor">//write your blue expression here</pre>
				</div>	
			<div id="expr_rgb_tab" class="tabEditor">
				<h3 id="editor_name">rgb expression code</h3>	
				<pre id="expr_rgb_editor" class="textEditor">//write your RGB expression here</pre>
				</div>
			<div id="expr_alpha_tab" class="tabEditor">
				<h3 id="editor_name">alpha expression code</h3>	
				<pre id="expr_alpha_editor" class="textEditor">//write your alpha expression here</pre>
				</div>
			<div id="expr_common_tab" class="tabEditor">
				<h3 id="editor_name">common expression code</h3>	
				<pre id="expr_common_editor" class="textEditor">//write your common expression here</pre>
				</div>
			</div>
	</div>
		
</body>

</html>