This is a handy quick-start reference for working with GLSL pixel shaders inside of TouchDesigner. I reference commonly used variables from other platforms (like ShaderToy) and explain how to set/get them in TD.

I've just started diving into the complex world of shader programming, so expect this reference to evolve over time.

Uniform Variables
Built-In Variables
Examples
Resources

UNIFORM VARIABLES

Your standard, everyday user-defined variables. You can hard-code these, use expressions or use any other standard TD node reference to generate values.

For each uniform variable you reference in code, you must define the name ("Uniform Name") and value(s) ("Value") in the GLSL TOP's "Vector #" tab. TouchDesigner only passes the uniform values based on the type declared (e.g. a uniform float only passes the first value declared, ignoring the remaining 3).

uTime — A float indicating local playback time (based on your timeline).

  • Use "me.time.seconds" to set this value.

uGlobalTime — A float indicating the absolute time since TD was started.

  • Use "absTime.seconds" to set this value.

uMouse — A vec2 that represents the current x & y mouse position.

  • Full Screen Coordinates: Lay down a Mouse In CHOP. Set a reference to the "tx" and "ty" channels from this node into the first two value's of the uniform's parameter.
  • Specific Window Coordinates: Place a GLSL TOP and a Panel CHOP inside of a Container window. Set a reference to the "insideu" and "insidev" channels from the Panel CHOP into the first two value's of your GLSL's custom uniform. Connect a Null TOP to the end of your network and reference it in your Container's Background Top parameter (Look Page). Finally, set the width and height of the Container window (Layout Page) to that of your GLSL TOP output— you can dynamically reference the inner Null TOP's resolution by using "op('./null1').width" and "op('./null1').height".

BUILT-IN VARIABLES

Handy variables that have already been (mostly) defined by TouchDesigner for us. Neat!

uResolution — A vec2 that defines the canvas size.

  • Define "vec2 uResolution = uTD2DInfos[0].res.zw" to sample the xy resolution of the image in the first input. Then you can reference "uResolution.x" or "uResolution.y" respectively.

st — A vec2 that defines the normalized coordinates, or UVs, of our canvas texture.

  • Define "vec2 st = vUV.st" to set the uv coordinates. Often derived from (fragCoord / resolution) in other platforms; TD has already defined it for us as vUV.st.
  • Once set, the float "st.x" will hold a 0...1 value as it moves left to right across the canvas texture (width). Similarly, "st.y" will hold a 0...1 as it moves from the bottom to the top of the canvas texture (height).

RESOURCES