Question to GLSL Basic Procedure

Hello out there!

I have a basic GLSL Question. (Think i make a mistake either with wiring or with declaring.)

Though i think i understand the principles i dont manage to get the data of an image to the pixel of a geo. I have an example (not real) attached wherein my questions are precised.

Glsl_yox_quest.tox (4.2 KB)

Can someone have a look, pls. I think it is a beginner’s blind spot and done in a minute by an advanced.

Thx
yox

Can you say a little more about what you’re trying to do here?

Are you trying to color your points with the color from the moviefilein TOP?

Re your error:

vec4 color = texture(sTD2DInputs[0], vUV.st);

texture is a gl function that in this particular use case uses a sampler and a vec2 to return a vec4 for the color of a pixel.

https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/texture.xhtml

sTD2DInputs is a TouchDesigner declared uniform that’s specific to the inputs on the TOP. The index of the desired input goes in the brackets with 0 being the first input, 1 being the second, and so on. The reason you’d see an error about having not input declared is because the glsl material doesn’t have an input. Instead you’d need to use the samplers page to add a sampler uniform, and then make sure its declared with the same name in your shader code.

Hi Matthew. Yes i want to color it.

That’s what i guessed. But when i try to solve it like you say, i get new bus.
I took this example to get a bit more in the declaration routines, but there are too many error scources for me as starter to get a feeling of walking in the right directions or not.

What makes things a bit intransparent for me is the neccessarity of an “interface” between the glsl world and the op world. (i.e. what have to come via declaration and where input is enough without, if you know what i mean.)

Getting a handle on the gl side of things can be a bit of a ride initially in Touch. I’d recommend taking a look at the material and TOP writing guides. I’ve found them to be tremendously helpful in getting a handle on GL

[url]http://www.derivative.ca/wiki088/index.php?title=Write_a_GLSL_TOP[/url]
[url]http://www.derivative.ca/wiki088/index.php?title=GLSL_Material_Writing_Guide[/url]

In terms of getting color onto your points - I think you’re making this a little harder than it needs to be. Rather than using the inputPoint index you could instead use the UV coords on the geometry.

This might look like changing a bit of your set up, but would allow you to sample for color and displacement in a slightly more straightforward way. This also means setting up a struct to pass data from your vertex Shader to your pixel shader.

Here’s a look at what that might be:
Glsl_yox_quest_variation1.tox (3.96 KB)

Thanks for the file.
Unfortunately in the moment this is not very helpfull for me. As i wrote i am trying with this setting primarily not to get some color, but to get a first grip to what i learned so far with GLSL.
I got to this point by reading elburz book (ironcally supported by the docs you linked to), and now it appears as if the elburz’ chapter ended one game to early.
The best help in the moment to ensure my half knowledge would be to show me what you scetched in your first answer: how to pass the the data of the glsl3 TOP (rsp. glsl3_pixel DAT) to the GLSL MAT.
THis has something to do withe difference of active and passive comprehension:
I understand you variation at once. But still i dont, why or what my approach doesn’t work.

In every case thanks till here.
yox

The shader code in glsl3_pixel isn’t going to be directly compatible with the pixel shader for the material.

The GLSL material has a vertex and pixel shader that describes how to handle the rendering process where the lights, cameras, and geometry objects are supplied by TouchDesigner. A difference to consider between the glsl TOPs and the glsl materials are what variables are supplied for you. vUV, for example, is supplied for you by default in the glsl TOP, but not in the glsl material. Considering this, the approach in glsl3_pixel won’t work without modification as it relies on a touch declared input variable. Again important to consider is that you’re using point sprites - gl_PointSize. Each sprite (or billboard as you’ll sometimes called it in reference documents) has it’s own set of uv coords:

If you changed your pixel shader to (you’ll also want to turn up your gl_PointSize to something like 10):

[code]layout(location = 0) out vec4 fragColor;

void main(){

vec2 pointUVs = gl_PointCoord;
fragColor = vec4( pointUVs.rg, 0.0, 1.0 );

}[/code]

You can see that each billboard has its own unique set of texture coords. If you add a new sampler to your glsl material called color and use the moviefilein TOP as the sampled texture and change your pixel shader to:

[code]
layout(location = 0) out vec4 fragColor;

uniform sampler2D color;

void main(){

vec2 pointUVs = gl_PointCoord;

vec4 color = texture( color, pointUVs );
fragColor = vec4( color );

}[/code]

You’ll now have a banana on each of your point sprites.

One missing ingredient here is how to pass data between a vertex shader and a pixel shader. This is done with a struct and allows you to pass data from one portion of the pipeline to the next. This would let you do something like pass your computed uv coords from the vertex shader to the pixel shader without needing to recompute those vals.

In this case that solution will likely yield undesirable results as your uvs only describe a one dimensional array - your sampler for point position is only 1 pixel tall, which means that to sample color you’d need to compose your color look up to be only one pixel tall.

I don’t know if that helps or just makes things more confusing.

Do you have a picture or reference of what you’d like to achieve?

I think to Matthew’s point, my understanding of your issue is that you’re trying to achieve something that would be easier in another method and is has a slightly more complicated in-between step if you’re trying to extend the example from the intro book. A reference image might help confirm to me what you’re trying to achieve since I wont be at my computer for a few days.

Elburz, Matthew, thanks for your time!

Matthew is pointing me to logical error i slipped in, while combining old and new “knowledge”:
One step before my problem occured i used the particles as alpha keys. (In total they displayed the underlying image then.) Cause unsatisfied with their blur behavior i wanted to color the particles directly - and overlook that my attemps address every particle in the same way. ( The result would be the complete image on each particle, whereas i want only a proportional piece oft it.)
In a nutshell: My setting is wrong already in the approach. sorry and thanks.

But a missing link remains - at least in my case (but i guess in general, honestly).
Elburz’ chapter is good to enter the glsl word in general and some basic relations or benefits in TD.
The both guides on the wiki matthew linked to, for me work more as reference docs than as a guide for the first steps. What I’d like is a procedural guide that points out who i get a clean entry with glsl in the op-World of TD, with some examples from easy to moderate. (i.e. Matthew pass struct) Is there something like that? .

I hope my English is clear enough. Normally i have no probs with it at all, but when it comes to problems on a special domain with special terms and complex differenciations (for describing ansd precising issues) i feel that i am not a native english speaker ;-(

Thanks again.
yox

I took a little time this weekend to put these two quick examples together.

In one we use gl_PointCoord to see how uvs are mapped across the point sprites.
Glsl_yox_quest_pointcoord_uvs_gradient.tox (3.65 KB)
Glsl_yox_quest_pointcoord_uvs.tox (3.62 KB)

In the other we look at how you can take your pointIndex passed from the vertex stage to the fragment stage and turn an index value into a UV estimation. The idea here to get started is that before you break up your image across your point sprites you’d need to know how they’re related spatially to one another.
Glsl_yox_quest_pointIndex_as_uv.tox (3.76 KB)

One more example looks at how you could use the approach above along with a texture() call to treat every sprite as though it were a pixel.
Glsl_yox_quest_pointIndex_as_uv_colormapped.tox (3.83 KB)

The next step to explore would be to do some uv offsets - this would let you break an image across multiple sprites.

In terms of learning GL in Touch - I haven’t seen a good clean set of examples yet that are the kind of resource you’re talking about. From what I’ve seen, this is a bit of an undiscovered country when it comes to TouchDesigner. The folks that are using more advanced OpenGL techniques either don’t have the time to share,or can’t share work based on NDAs. Those of us committed to creating some educational resources are similarly slammed or backlogged.

Maybe someday Elburz and I will quit our day jobs and just make educational materials…

Hi Matthew,

thx for your engagement. I downloaded your examples. But i will have time for a closer look onto them earliest at the weekend. Probably later. Reason is i am creating a short but (hopefully) essential list of question considering a bunch of basic unclarities concerning glsl in the op-world of TD.
And at first i have to install 099, since not all your fuiles are showing to me what you planned?

cu
yox

Ahhhh.

Apologies. The error in these networks is the use of TDOutputSwizzle(), which is a new method in touch099 that ensures comparability between mac and windows versions. The issue is that this function doesn’t exist in 088, hence the error you’re seeing. This can be resolved by removing that call, and changing the output of fragColor to be equal to color - the vec4 that’s holding the color information form the previous operations.

Here’s a fixed version of these examples to be only in 088:
Glsl_yox_quest_pointIndex_as_uv_colormapped_088.tox (3.74 KB)
Glsl_yox_quest_pointIndex_as_uv_088.tox (3.72 KB)
Glsl_yox_quest_pointcoord_uvs_gradient_088.tox (3.6 KB)
Glsl_yox_quest_pointcoord_uvs_088.tox (3.57 KB)

Thanks for the examples, Matthew. We should def just quit our jobs and sit on the beach writing educational content!

Hopefully those examples solve the question!

Hey Matthew,

Thanks for the point sprite examples. I’m learning a bunch from them. One thing I’ve gotten stuck on is how to scale the sprites relative to the camera distance. I know this should be fairly simple but I just can’t crack it. Any help would be greatly appreciated.

hey there hellochristhompson,

Probably the smart way to go about this would be to pass in a uniform vec3 that represented the xyz location of the camera. From there you could write your vertex shader so that your gl_PointSize was derived from the length of the point’s position to the camera - that’s assuming that you potentially want every point. You could also pass in a float for the distance between a single point and the camera - and then treat this as a scaler.

Does that help?

Thanks Matthew. That works a treat. I was having issues until I realised you could grab the camera’s world origin with an Object CHOP. Now it’s working smooth as butter. Thanks again!