GLGraphics model question

joshuajno..

in Contributed Library Questions • 2 years ago

I'm a bit confused by something I've run into with the GLGraphics library that I was hoping someone could explain to me. I'm creating a height map in shaders using multiple images and can't seem to get it to work the same way it does in C++.

import processing.opengl.*;
import codeanticode.glgraphics.*;
GLModel poly;
GLTexture colorTex;
GLTexture heightTex;
GLSLShader shader;
float angle;
void setup()
{
size(1024, 512, GLConstants.GLGRAPHICS);
colorTex = new GLTexture(this, "earth.jpg");
heightTex = new GLTexture(this, "earthbumps.jpg");
shader = new GLSLShader(this, "bump.vert", "bump.frag");
createModel();
}
void draw()
{
GLGraphics renderer = (GLGraphics)g;
renderer.beginGL();
background(0);
rotateX( float(mouseY)/200.0 );
translate( 0, float(mouseY/2), -float(mouseY/2) );
shader.start(); // Enabling shader.
shader.setTexUniform("colormap", 0);
shader.setTexUniform("bumpmap", 1);
shader.setIntUniform("maxHeight", 100);
renderer.model(poly);
shader.stop(); // Disabling shader.
renderer.endGL();
}
void createModel()
{
// Creating rectangle, texture and GLSL shader.
poly = new GLModel(this, 4, QUADS, GLModel.STATIC);
poly.beginUpdateVertices();
poly.updateVertex(0, 0, 0, 0);
poly.updateVertex(1, 1024, 0, 0);
poly.updateVertex(2, 1024, 512, 0);
poly.updateVertex(3, 0, 512, 0);
poly.endUpdateVertices();
// Enabling the use of texturing...
poly.initTexures(2);
poly.setTexture(0, colorTex);
poly.setTexture(1, heightTex);
// Setting the texture coordinates.
poly.beginUpdateTexCoords(0);
poly.updateTexCoord(0, 0, 0);
poly.updateTexCoord(1, 1, 0);
poly.updateTexCoord(2, 1, 1);
poly.updateTexCoord(3, 0, 1);
poly.endUpdateTexCoords();
// Setting the texture coordinates.
poly.beginUpdateTexCoords(1);
poly.updateTexCoord(0, 0, 0);
poly.updateTexCoord(1, 1, 0);
poly.updateTexCoord(2, 1, 1);
poly.updateTexCoord(3, 0, 1);
poly.endUpdateTexCoords();
// is this needed? how is it done?
poly.initNormals();
poly.beginUpdateNormals();
poly.updateNormal(0, 0, 0, -1);
poly.updateNormal(1, 0, 0, -1);
poly.updateNormal(2, 0, 0, -1);
poly.updateNormal(3, 0, 0, -1);
poly.endUpdateNormals();
}

The shaders are really simple:

vertex

uniform sampler2D colormap;
uniform sampler2D bumpmap;
varying vec2 TexCoord;
uniform float maxHeight;
void main(void)
{
TexCoord = gl_MultiTexCoord0.st;
vec4 bumpColor = texture2D(bumpmap, TexCoord);
float df = 0.30*bumpColor.x + 0.59*bumpColor.y + 0.11*bumpColor.z;
vec4 newVertexPos = vec4(gl_Normal * df * float(maxHeight), 0.0) + gl_Vertex;
gl_Position = gl_ModelViewProjectionMatrix * newVertexPos;
}

fragment

uniform sampler2D colormap;
uniform sampler2D bumpmap;
varying vec2 TexCoord;
void main(void) {
gl_FragColor = texture2D(colormap, TexCoord);
}

I'm guessing the problem is that the normals aren't being calculated for each vertex correctly, but I can't get it to play nice. Any tips or advice would be much appreciated. Thanks!

Replies(4)

andres

Re: GLGraphics model question

2 years ago

Hi, I don't see any problem with the way you define the normals of the model. One minor detail is that you call shader.setIntUniform("maxHeight", 100), but the uniform is defined as float in the shader.

What I don't fully understand is the way you applying the bump mapping here. The geometry of your model is composed by just four vertices, and you use the luminance of the bump map at each one of these vertices to calculate their displacement along the normal direction. Don't you need to build a much more dense grid to see the effect of the vertex displacements?

joshuajno..

Re: GLGraphics model question

2 years ago

Thanks so much for your response. I do/did need to make a denser mesh. I just tested the shader quickly in ShaderBuilder, forgetting how dense the vertices are there. Oops. So now I'm doing this:

void createModel()
{
// Creating rectangle, texture and GLSL shader.
poly = new GLModel(this, 32768, QUADS, GLModel.STATIC);
poly.initNormals();
int count = 0;
poly.beginUpdateVertices();
for(int i = 0; i<256; i++) {
for(int j = 0; j<128; j++) {
poly.updateVertex(count, i*4, j*4, 0);
count++;
}
}
poly.endUpdateVertices();
// Enabling the use of texturing...
poly.initTexures(2);
poly.setTexture(0, colorTex);
poly.setTexture(1, heightTex);
count = 0;
// Setting the texture coordinates.
poly.beginUpdateTexCoords(0);
for(int i = 0; i<256; i++) {
for(int j = 0; j<128; j++) {
poly.updateTexCoord(count, (float) i/256.0, (float) j/ 128.0);
count++;
}
}
poly.endUpdateTexCoords();
count = 0;
// Setting the texture coordinates.
poly.beginUpdateTexCoords(1);
for(int i = 0; i<256; i++) {
for(int j = 0; j<128; j++) {
poly.updateTexCoord(count, (float) i/256.0, (float) j/ 128.0);
count++;
}
}
poly.endUpdateTexCoords();
count = 0;
poly.beginUpdateNormals();
for(int i = 0; i<256; i++) {
for(int j = 0; j<128; j++) {
poly.updateNormal(count, 0, 0, -1);
count++;
}
}
poly.endUpdateNormals();
}

Which seems good except that my map looks like this:

which isn't how it looks in OF or ShaderBuilder.

andres

Re: GLGraphics model question

2 years ago

I think the problem is in how you are defining the geometry. The mode of the GLModel is QUADS, so you have to be careful to provide exactly 4 vertices for each quad in your mesh, even if there are redundant vertices along the shared edges.

joshuajno..

Re: GLGraphics model question

2 years ago

I had tried with QUAD_STRIP but I honestly don't know why I expected that to work, silly. Thanks for your help and patience. In case anyone else is interested I have a quasi-cute solution for generating a tri-strip and doing the texCoords:

poly.beginUpdateVertices();
for(int i = 0; i<xsz; i++) {
for(int j = 0; j<ysz; j++) {
for( int nTri = 0; nTri < 6; nTri++ ){
float flX = (float) (i*8) + ( ( nTri == 1 || nTri == 2 || nTri == 5 ) ? 8 : 0.0f );
float flY = (float) (j*8) + ( ( nTri == 2 || nTri == 4 || nTri == 5 ) ? 8 : 0.0f );
poly.updateVertex(count, flX, flY, 0);
count++;
}
}
}
poly.endUpdateVertices();
// Enabling the use of texturing...
poly.initTexures(2);
poly.setTexture(0, colorTex);
count = 0;
// Setting the texture coordinates.
poly.beginUpdateTexCoords(0);
for(int i = 0; i<xsz; i++) {
for(int j = 0; j<ysz; j++) {
//poly.updateTexCoord(count, (float) i/ (float)xsz, (float) j/ (float)ysz);
for( int nTri = 0; nTri < 6; nTri++ ){
float flX = (float) i + (( nTri == 1 || nTri == 2 || nTri == 5 ) ? 1.0 : 0.0f);
float flY = (float) j + (( nTri == 2 || nTri == 4 || nTri == 5 ) ? 1.0 : 0.0f);
poly.updateTexCoord(count, flX / (float)xsz, flY / (float) ysz);
count++;
}
}
}
poly.endUpdateTexCoords();

Thanks for the excellent library as well Andres,

Top Reply