Is it possible to combine texture map and vertex color in one glsl shader?

Programming Questions

otherthin..

Is it possible to combine texture map and vertex color in one glsl shader?

in Programming Questions • 4 months ago

I'm trying to write a GLSL shader that will let me combine per-vertex color information with a texture map (essentially multiplying the texture map's color values with the colors from the vertices.) But I can't seem to make it pay attention to both at once! If I turn on the texture, it ignores the per-vertex colors entirely.

Here's the example sketch I'm using:

PImage label;
PShape can;
float angle;
PShader texShader;
void setup() {
size(640, 360, P3D);
label = loadImage("deer.jpg");
can = createCan(100, 200, 32, label);
texShader = loadShader("texfrag.glsl", "texvert.glsl");
//texShader.set("color", color(255, 0, 0));
}
void draw() {
background(0);
shader(texShader);
translate(width/2, height/2);
rotateY(angle);
shape(can);
angle += 0.01;
}
PShape createCan(float r, float h, int detail, PImage tex) {
textureMode(NORMAL);
PShape sh = createShape();
sh.beginShape(QUAD_STRIP);
sh.noStroke();
sh.texture(tex); // comment out this line to see the vertex colors!
for (int i = 0; i <= detail; i++) {
float angle = TWO_PI / detail;
float x = sin(i * angle);
float z = cos(i * angle);
float u = float(i) / detail;
sh.fill(random(0, 255), random(0, 255), random(0, 255));
sh.normal(x, 0, z);
sh.vertex(x * r, -h/2, z * r, u, 0);
sh.vertex(x * r, +h/2, z * r, u, 1);
}
sh.endShape();
return sh;
}

And here's the vertex shader "texvert.glsl":

#define PROCESSING_TEXTURE_SHADER
uniform mat4 transform;
uniform mat4 texMatrix;
attribute vec4 vertex;
attribute vec4 color;
attribute vec2 texCoord;
varying vec4 vertColor;
varying vec4 vertTexCoord;
void main() {
gl_Position = transform * vertex;
vertColor = color;
vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}

And finally, here's the fragment shader "texfrag.glsl":

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
uniform sampler2D texture;
varying vec4 vertColor;
varying vec4 vertTexCoord;
void main() {
gl_FragColor = texture2D(texture, vertTexCoord.st) * vertColor;
}

If I comment out the "sh.texture(tex)" command, Processing ignores my shader entirely, and the per-vertex colors (random colors) show up. But when that line is present, the vertex colors are ignored, and I just see the texture map of "deer.jpg" wrapped around the cylinder.

Am I missing something obvious here? Or does Processing somehow prevent you from combining textures with per-vertex coloring? (And if so, is there any kind of workaround for this limitation?)

Replies(7)

amnon.owed

Re: Is it possible to combine texture map and vertex color in one glsl shader?

4 months ago

From some quick tests it seems...

...with PROCESSING_TEXTURE_SHADER the real vertColor is not sent, only a default.
...with PROCESSING_COLOR_SHADER the real vertTexCoord is not sent, only a default.
...with PROCESSING_TEXLIGHT_SHADER the real vertColor is not sent, only a default.

Don't want to jump to conclusions, but it seems that would mean that what you want to achieve isn't possible given the current PShader architecture. Someone correct me if I'm wrong though.

Possible workarounds are multiple textures or moving all color calculations into the shader.

otherthin..

Re: Is it possible to combine texture map and vertex color in one glsl shader?

4 months ago

" Possible workarounds are multiple textures or moving all color calculations into the shader."

I would LOVE to be able to use multiple textures in one shader. Is there a way to do that in Processing? From all the reference I've seen so far, it seems like there can be only one texture at a time. What's the trick?

amnon.owed

Re: Is it possible to combine texture map and vertex color in one glsl shader?

4 months ago

See: https://forum.processing.org/topic/geometry-textures-shaders-tutorial-for-creativeapplications-net

Specifically the GLSL_TextureMix example.

otherthin..

Re: Is it possible to combine texture map and vertex color in one glsl shader?

3 months ago

Thanks so much, that's really helpful!

Playing with GLSL_TextureMix, there are still a couple of things I don't quite understand:

1) It looks like you're mixing the textures inside the vertex shader, not the fragment shader. Doesn't this mean that the textures are only being mixed at the vertices of the geometry? Or am I completely failing to understand the difference between vertex and fragment shaders?

2) There's no actual geometry being drawn here, just a single image() command:

image(images[0], 0, 0, 850, 850); // display any image as a 'textured geometry canvas' for the PShader

What exactly does Processing do with that command? What exact geometry is being created for the "textured geometry canvas"? Does it create a virtual grid with one vertex per pixel? Is it drawing a single quad that fills the whole area? I'm just trying to understand how to apply this to my own situation (where the triangles in my geometry are larger than one pixel each...)

amnon.owed

Re: Is it possible to combine texture map and vertex color in one glsl shader?

3 months ago

Ad 1
As the tutorial states and the names of the files (textureMix Vert.glsl, textureMix Frag.glsl) suggest, the mixing is done inside the fragment shader. I don't know why you think it's done in the vertex shader, but that conclusion is wrong. The vertex shader in this example is just a basic pass-thu shader, that delivers texture coordinates to the fragment shader.

Ad 2
You are somewhat right with this one. That's basically a Processing 2.0 shortcut I took. To work correctly this shader pair requires textured geometry otherwise it won't work. The long way to write that would be beginShape(), texture(), vertex()-vertex()-vertex()-vertex(), endShape. Indeed a quad with a texture. Try it and it should give the exact same result, because the only thing it is, is a canvas. However given Processing's shader architecture the canvas has some requirements, in this case to be textured, so without a texture() call it wouldn't work. Anyway, surprise, surprise, an image in the OpenGL renderer is actually a textured quad! Hence making the shortcut possible. Since it's only a canvas, I'd rather write one simple line than seven with manual positions and texture coordinates. As said, doing the latter would work just as well.

This question " Does it create a virtual grid with one vertex per pixel?" suggests that you don't grasp vertex and fragment shaders quite yet. I suggest reading some resources (books or online) on them until it clicks. I've had to read and re-read about them quite a few times until I started to understand. Unfortunately they are unintuitive, but their parallel nature makes them fast and therefor worthile to learn more about.

otherthin..

Re: Is it possible to combine texture map and vertex color in one glsl shader?

3 months ago

PEBKAC! My mistake. I don't know what made me think all that computation was happening in the vertex shader, when it's clearly in the fragment shader! (I must have had two text editors open at once and misread which file was which...)

So, to summarize: if I understand correctly, the way to assign multiple textures to a GLSL shader is:

in the fragment shader, define multiple "uniform sampler2D" variables;
in the Processing sketch, assign a PImage to each of those variables using the PShader.set() method.

That's something I can wrap my head around! I think what was missing for me was the idea that you could pass a PImage into a fragment shader that way. Now I get it.

Thanks again for your help and patience!

amnon.owed

Re: Is it possible to combine texture map and vertex color in one glsl shader?

3 months ago

You got it.

Top Reply