Turning web shader to a GLSL shader

Hey guys,

I’m trying to import a brush stroke shader developed for web (probably WebGL) and trying to make it work in TouchDesigner.

This is the paint brush web app: david.li/paint/
And here’s the github repository with the shader code: github.com/dli/paint

The shader folder lists 23 different files, so I’m not quite sure how to bring it into TouchDesigner (maybe in a GLSL node?).

Is it possible to use this shader in TouchDesigner?

If anyone can let me know if its possible or point me in the right direction, I would really appreciate it!

Thanks for your time,
Javier

Hi Javier,

In the GitHub you can see there are a bunch of frag and vert shaders:
github.com/dli/paint/tree/master/shaders

This corresponds to the pixel(frag) and vertex shader nodes in TD, eg if you open up a GLSL MAT. So to start try pasting them into those nodes to play with them.

There are some great tutorials on youtube for working with GLSL by Vincent Houze and Matthew Ragan which you will probably find useful to set yourself up to do more, and there’s a nice .TOX file on this forum which automatically converts Shadertoy GLSL to TD GLSL (I know yours isn’t on Shadertoy but I found it a useful place to start figuring out any conversion):
viewtopic.php?f=4&t=7858

I found it super useful for learning to make changes for conversion (again from shadertoy) step by step following the guide: nvoid.gitbooks.io/introduction- … ertoy.html

Hi @javierm4,

I am currently researching how to achieve a similar aesthetic within touchdesigner.

I was wondering how you got on with this / if you had any luck?

Best regards,

Oliver