Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Home

Jump to bottom
crazylafo edited this page Jan 9, 2020 · 37 revisions

tl Math Wiki.

Tl Math Copyright (C) 2020 Thomas Laforge

The code contains:

Table of contents

1-What is tl Math?
2-What is GLSL?
3-Is it possible to load a preset without coding?
4-Quick menu overview
5-Expression vs full Shader

1-What is tlMath?

tlMath is an After Effect Hybrid add-on for After Effect. That means there is a plug-in side and a panel side. The plug-in interpret GLSL shaders, convert them to Effects, with customizable parameters. The panel side is the interface to write the shader, customize parameters, access to the library, give a name and tags to the preset, import or export it.a

2- What is GLSL?

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, in 3d programs but some vfx production tools also use it, like Autodesk Flame. A web and mobile version has been created: openglES. Some example on the web are based on this version but the plugin uses the glsl 330 version. (wich goes with openg 3.3) Don't worry most of openglES shaders work in 330 version. On the hardware requirement, opengl 3.3 was realized ten years ago, so if you can use After Effect 2017 or higher the plugin may works. Each shaders installed in the library works on an intel graphic card so don"t worry on this side.

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

  • the book of shaders In my opinion it's one of the best to enter in GLSL's world.

  • shadertoy. 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.

  • glsl-Sandbox It's also a library but without search engine. So you can navigate explore

  • logik matchbook. This website has a lot of glsl shaders written for autodesk Flame, but it's easy to adapt in the plugin. (some of the library are based on shaders from this library themselves inspired by shadertoy's shaders.

3-Is it possible to load a preset without coding?

Yes it's possible. When the setup is loaded, the first window you see it's a library. You can select a preset and click on "load and apply" button. More details here.

4-Quick menu overview

  1. The plugin.

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

 In the example, the effect is applied on a white solid. The result is the same.

You get a lot of parameters: 3 button, 10 sliders, 10 points, 10 colors, 10 rotations and 4 layers. But in fact those parameters do nothing, until you enter in the setup. But before to click on it, have a look to the three button.

  • Setup: will call the panel, to load, or to edit/write a preset.
  • Effect description: Print the description of the preset. read=only
  • Reset preset: similar to After Effect reset button. But why this button? Because the after effect reset button will reset to the default preset inside the plug-in. But this button will keep you chosen preset but will reset to the preset's default values, defined in the panel.
  1. The Panel. *The library (default menu) When you open the panel, by the setup or by the After Effect extension menu you'll get something like this:

The column on the left is the menu access

  • The library: 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.
The selected preset can be loaded and apply in Aftr 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".

  • The Preset Setting. In this menu:

    • Write your preset name. It's not the file name but the name shown in library and in the plugin GUI.
 Special charcaters will be deleted if you use one of them.

  • Choose tags used with the search engine.

  • Choose the coding langage. You can choose the oding langage 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.

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

  • The Parameters Setting. In this menu:

    • You define the name, and the default values when possible for each variables input in the glsl code, coming from after effet.

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

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

  • expressions settings. As for composition settings, you cannot set default vaues but you can write the name. 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 Coordonates | vec2 | in both expression mode, returns the pixel coordonate, equivalent of gl_FragCoord.

  • layer settings. Choose the name for each layers (until 4 external layers and the source layer) and if the layer is visible in the plugin part.

  • 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 float value between -1000 and 1000, but the visible values are between 0 and 100, in floting points.

  • 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?). vec3 value

  • 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?).bool value

  • Color settings. You can write the name you want to the color settings, the default values (3 dimensions) and if it's visible or not. (If not used, why showing it?).vec3 value

  • 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?). float value

5-Expression vs full Shader

The both mode are written in glsl. So why to modes ? The Expression mode is for you if: * you begin in the glsl world * you like few lines of expression and don't want to import variable * you're shader have few functions or an be written in one * you wan't to affect quickly each color channels separetly. *you want to do some experiment

The full shader modeis for you if: *you're a glsl coder. *you're not afraid of lots on line *you want to use a shader from a website

Clone this wiki locally