Gouraud shading in Processing 2

Core Library Questions

mattg73

Gouraud shading in Processing 2

in Core Library Questions • 11 months ago

Hi

I'm a relative newbie to Processing so apologies if this has been covered elsewhere (I have searched though!) I'm trying to implement a Gouraud shader in my processing sketch and have had no luck trying to create external GLSL files in my sketch's Data folder. I've copied source code from various sample files (found by searching for "GLSL Gouraud") and saved them as glsl files, either individually or as seperate Vertex and Fragment glsl files. Using the following syntax...

PShader gouraud;

void setup(){
      //usual setup stuff
      gouraud = loadShader("gouraud.glsl");
}

void draw(){
      shader(gouraud);
      //retained mode PShape and other vertex data follows
}

... I generally get an empty grey window when I run the sketch. So. Three questions...

1. Does anyone know of a working gouraud shader glsl file and appropriate syntax for inclusion in Processing?
2. If not, are there any plans to include one with the included Examples in a future Beta release? (would seem like a useful shader!)
3. Are there alternate methods using lower-level OpenGL calls that would achieve this aim? (I'm aware that in principle I could roll my own gouraud shader using vertex normals and per vertex fill settings but I was hoping for an out of the box solution - I have enough programming fish to fry with my project! ;-) )

Many thanks for any answers,

Matt

Replies(5)

amnon.owed

Re: Gouraud shading in Processing 2

11 months ago

As far as I know, Gouraud shading is the default OpenGL and thus Processing OPENGL shading mode.

The direct OpenGL call for this shading mode is: glShadeModel(GL_SMOOTH)

mattg73

Re: Gouraud shading in Processing 2

11 months ago

Thanks for the reply, and sorry you had to point out the obvious! I was starting to think I must have asked something either very difficult or very stupid from the lack of replies ;-)

So I had been converting a 2D Array of heightmap data to a series of vertices but had been using beginShape and endShape to define each triangle rather than just once before the start and end of the 2D Array. This led to the flat shaded look I was seeing. However, doing a quick test of beginSHape used only once at the outset of the 2D array using the code below, I've run into a couple of issues...

1. I'm marching up and down the arrays to draw the series of vertices in order to have a contiguous series but this leads to a saw tooth effect on the last column, is there a better way to draw 2D arrays of vertices to get a complete plane?

2. With the approach I've taken you get nice smooth gouraud shading between the vertices when viewed from certain angles but distinct banding when viewed from others despite the fact the vertices are translated on the y axis by a sin operation and should be equally smooth on either the x or z axis. Am I missing something obvious here? I'd expect to see smooth shading across the entire surface regardless of viewing angle.

Code below, thanks again for the reply and any further help.

void setup() {
size(1000, 600, P3D);
noStroke();
smooth(5);
}

void draw() {
background(0);
translate(width/2, (height/3)*2, 0);
ambientLight(0,20,50);
pointLight(255,220,190,800,-500,0);

rotateY(mouseX/200.0);

fill(255);
translate(-150,0,-150);

beginShape();
for (int i=0; i<19; i++) {
    for (int j=0; j<20; j++) {
      vertex((i)*15, (5*sin(i))+(5*sin(j)), (j)*15);
    }

    for (int j=20; j>0; j--) {
      vertex((i+1)*15, (5*sin(i+1))+(5*sin(j)), (j)*15);
    }
}
endShape(CLOSE);
}

amnon.owed

Re: Gouraud shading in Processing 2

11 months ago

Ad 1. There are many ways to construct a grid. One way is to use rows of triangle_strips.
Ad 2. Processing attempts to automatically assign normals to shapes, but since that's imperfect, if you want more control to get better quality lighting, you can set them manually.

I've made a code example which shows both. Note that for clarity I've fully written out the calculation of the normals. Of course it's computationally extremely inefficient as it's written now, but the reason is that it makes it easier to understand what's going on. No mouseclick is auto-pilot (as your code), with mouseclick is with manual normals.

Code Example

int DIM = 20;
float SCL = 15;
float HSCL = SCL/2;
void setup() {
size(1000, 600, P3D);
noStroke();
smooth(5);
}
void draw() {
background(0);
translate(width/2, height/2, 0);
ambientLight(0, 20, 50);
pointLight(255, 220, 190, 800, -500, 0);
rotateX(radians(-30));
rotateY(mouseX/200.0);
translate(-DIM*HSCL, 0, -DIM*HSCL);
fill(255);
for (int z=0; z<DIM; z++) {
beginShape(TRIANGLE_STRIP);
for (int x=0; x<DIM; x++) {
PVector p = new PVector(x*SCL, (sin(x)+sin(z))*HSCL, z*SCL);
if (mousePressed) {
PVector n1 = new PVector(x*SCL, (sin(x)+sin(z-1))*HSCL, (z-1)*SCL);
PVector n2 = new PVector(x-1*SCL, (sin(x-1)+sin(z))*HSCL, z*SCL);
PVector n3 = new PVector(x+1*SCL, (sin(x+1)+sin(z))*HSCL, z*SCL);
PVector n4 = new PVector(x*SCL, (sin(x)+sin(z+1))*HSCL, (z+1)*SCL);
PVector nrm = PVector.sub(n2, n3).cross(PVector.sub(n1, n4));
normal(nrm.x, nrm.y, nrm.z);
}
vertex(p.x, p.y, p.z);
p = new PVector(x*SCL, (sin(x)+sin(z+1))*HSCL, (z+1)*SCL);
if (mousePressed) {
PVector n1 = new PVector(x*SCL, (sin(x)+sin(z))*HSCL, z*SCL);
PVector n2 = new PVector(x-1*SCL, (sin(x-1)+sin(z+1))*HSCL, (z+1)*SCL);
PVector n3 = new PVector(x+1*SCL, (sin(x+1)+sin(z+1))*HSCL, (z+1)*SCL);
PVector n4 = new PVector(x*SCL, (sin(x)+sin(z+2))*HSCL, (z+2)*SCL);
PVector nrm = PVector.sub(n2, n3).cross(PVector.sub(n1, n4));
normal(nrm.x, nrm.y, nrm.z);
}
vertex(p.x, p.y, p.z);
}
endShape(CLOSE);
}
}

mattg73

Re: Re: Gouraud shading in Processing 2

11 months ago

Thanks for the fantastically helpful answer. It's really helped to illuminate (heh) a lot!

I'd used quad strips elsewhere for a sky cylinder and had a sneaking suspicion triangle strips would be a more effective way of building my heightmap model. So I ported your code over to my project and it's worked beautifully. I'm using retained mode and a heightMap array for Y displacement so the performance is fine.

One minor issue is that at the viewable fringes of my model I'm seeing some popping lighting changes when rotating the model. Sudden shifts from bright to dark basically. I was able to replicate this (I think) in your code by increasing the y axis scalar and halving the sin displacement frequency (code below) basically to create bigger peaks that are closer to the shape of my model. Is this just an inherent shortcoming of the Gouraud shading algorithm that the P3D renderer uses by default or something that can be addressed by code tweeks? I guess I could live with it but it would be nice to fix if possible.

Thanks again for taking the time to help me out with this, I'll be sure to credit you if this thing ever sees the light of day!

int DIM = 20;
float SCL = 15;
float HSCL = SCL/2;

void setup() {
size(1000, 600, P3D);
noStroke();
smooth(5);
}

void draw() {
background(0);
translate(width/2, height/2, 0);

ambientLight(0, 20, 50);
pointLight(255, 220, 190, 800, -500, 0);

rotateX(radians(-30));
rotateY(mouseX/200.0);

translate(-DIM*HSCL, 0, -DIM*HSCL);

fill(255);
for (int z=0; z<DIM; z++) {
    beginShape(TRIANGLE_STRIP);
    for (int x=0; x<DIM; x++) {
      PVector p = new PVector(x*SCL, (sin(x/2.0)+sin(z/2.0))*(SCL*5), z*SCL);
      if (mousePressed) {
        PVector n1 = new PVector(x*SCL, (sin(x/2.0)+sin((z-1)/2.0))*(SCL*5), (z-1)*SCL);
        PVector n2 = new PVector(x-1*SCL, (sin((x-1)/2.0)+sin(z/2.0))*(SCL*5), z*SCL);
        PVector n3 = new PVector(x+1*SCL, (sin((x+1)/2.0)+sin(z/2.0))*(SCL*5), z*SCL);
        PVector n4 = new PVector(x*SCL, (sin(x/2.0)+sin((z+1)/2.0))*(SCL*5), (z+1)*SCL);
        PVector nrm = PVector.sub(n2, n3).cross(PVector.sub(n1, n4));
        normal(nrm.x, nrm.y, nrm.z);
      }
      vertex(p.x, p.y, p.z);

      p = new PVector(x*SCL, (sin(x/2.0)+sin((z+1)/2.0))*(SCL*5), (z+1)*SCL);
      if (mousePressed) {
        PVector n1 = new PVector(x*SCL, (sin(x/2.0)+sin(z/2.0))*(SCL*5), z*SCL);
        PVector n2 = new PVector(x-1*SCL, (sin((x-1)/2.0)+sin((z+1)/2.0))*(SCL*5), (z+1)*SCL);
        PVector n3 = new PVector(x+1*SCL, (sin((x+1)/2.0)+sin((z+1)/2.0))*(SCL*5), (z+1)*SCL);
        PVector n4 = new PVector(x*SCL, (sin(x/2.0)+sin((z+2)/2.0))*(SCL*5), (z+2)*SCL);
        PVector nrm = PVector.sub(n2, n3).cross(PVector.sub(n1, n4));
        normal(nrm.x, nrm.y, nrm.z);
      }
      vertex(p.x, p.y, p.z);
    }
    endShape(CLOSE);
}
}

amnon.owed

Re: Gouraud shading in Processing 2

11 months ago

I suppose further subdivision and tweaking may lead to slightly better results. However in the end Gouraud shading as such is somewhat limited in what it can achieve. For further improvement it may be worthwhile to try out per-pixel lighting via a - for example Phong shading - GLSL fragment shader.

Top Reply