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 11, 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 interprets GLSL shaders, convert them to Effects, with customizable parameters. The panel side is the interface to access to the library,to write shaders, customize parameters and giving a name and tags to the preset, import or export it.

Minimal requierement: After Effect CC 2017 and higher. (cc2017 is now deprecated by Adobe, but the plugin project was based on it SDK)

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. 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: openglES, for webGL. Each web sites about glsl are based on this version. The plugin uses the glsl 330 version. (witch goes with opengl 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 a low intel graphic card (uhd 620). 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 plug-in. (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 in the next section, library menu.

4-Quick menu overview

  1. The plug-in.

    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. 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 (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.
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".

  • 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 characters will be deleted if you use one of them.

  • Choose tags used with the search engine.

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

** 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 effect.

    • 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 Coordinates vec2 In both expression modes, returns the pixel coordinate, 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 plug-in 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 floating 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

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

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

    expression group rgb mode

    epxression split rgb mode

    glsl mode

5-Expression mode vs full Shader mode

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.

⚠️ In verion 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/

To sum up:

  • 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
    • your shader have few functions or an be written in one
    • you want to affect quickly each colour channels separately.
    • you want to do some experiences

  • The full shader models for you if:

    • you're a GLSL coder.
    • you're not afraid of lots of lines
    • you want to adapt a shader from a website
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
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.
fragment shader vec4 Output the rgba channel. For now the main part of the work appends here. (v1.15)
Clone this wiki locally