GLSL Materials in TouchDesigner: Porting from WebGL

Рет қаралды 1,073

Күн бұрын

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

Пікірлер: 9

@hinduspl 5 ай бұрын

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

@water__shed 5 ай бұрын

thank you!

@unveil7762 5 ай бұрын

❤🎉 THANKS

@water__shed 5 ай бұрын

my pleasure :)

@mattiaminerva2685 4 ай бұрын

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 4 ай бұрын

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)

@cobyiv 5 ай бұрын

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 5 ай бұрын

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 5 ай бұрын

and thank you :) i appreciate it a lot