GLSL Materials in TouchDesigner: Porting from WebGL

Take your vertex and fragment shader skills to the next level with custom GLSL Materials in TouchDesigner. This tutorial gives a gentle introduction to the concepts of GLSL Materials in TD by porting a shader from WebGL. We discuss each part of the shader pipeline, analogous structures in WebGL vs TouchDesigner, and end up with a fully ported parametric curve renderer, 100% in GLSL!
Links:
Project file: www.patreon.com/water__shed
Original blog post: mattdesl.svbtle.com/shaping-c...
Function Store toolbar: github.com/function-store/Fun...
Writing a GLSL Material - docs.derivative.ca/Write_a_GL...
00:00 Intro
02:28 Parametric Equation Blog Post Review
10:13 Begin Network Rebuild
11:15 Tube SOP and Render Network
14:46 Vertex Shader and Pipeline Review
16:38 Begin WebGL Vertex Shader Port to TouchDesigner
48:47 Begin WebGL Fragment Shader Port to TouchDesigner
53:40 Adding Mouse Interactivity
57:31 Add Color Palette
1:03:29 Outtro

[@hinduspl]

Thanks man. I think everyone appriciate your way of sharing your knowledge 👌👍

[@water__shed]

thank you!

[@mattiaminerva2685]

Thanks Man! Nobody have ever made something similar to explain the porting! I felt lost but you lit me up!!
Could you tell me where to find other similar informations? tutorials, books, anything. I’m trying to figure out how some built-in variables of three.js ( position ) and map, where map is "uniform sampler2D map", correspond to in TouchDesigner but I can’t find anything anywhere.
In particular the code to port in TD is this :
vUv = vec2( position.x / width, position.y / height );
vec4 color = texture( map, vUv);
Thank you very much

[@water__shed]

hey, thank you! i highly recommend reading the Writing a GLSL Material page linked in the description. It is the most comprehensive source of TD-specific GLSL documentation out there.
i think you probably want something like vUV.st in touchdesigner to get the UV coordinate with which to sample a texture map (the code example you posted)

[@unveil7762]

❤🎉 THANKS

[@water__shed]

my pleasure :)

[@cobyiv]

I gotta say, so impressed by your shear creativity & knowledge here. I’ve been listening to this one, but really need to run though this proper. Wondering if there is any way to get keyboard/midi controls to trigger events within the GLSL script? Cheers!

[@water__shed]

for sure!! 100%. all you need to do is reference a keyboard in CHOP or midi chop in the GLSL uniform page, for example where I have uParams or something like that (i dont recall the name i used lol)

[@water__shed]

and thank you :) i appreciate it a lot