Hi there… i hope you guys can help me out
i want to dynamically create a quadratic mesh of triangles with a given mesh width and the number of rectangels per side
after that i want to use a displacement shader to “transform” a texture into height differences (y-axis) to create a kind of terrain from a height map jpeg file.
But i’m getting crazy results and i don’t know if my vertex/texture-coord-creation algorithm or my shader program is wrong…
Vertex Coord Creation:
triangleNew is the array for the whole mesh
just 2 loops to build the mesh from the lower left corner to the upper right corner linewise
for(var i = 0;i<rectsPerSide;i++) {
for(var j = 0;j<rectsPerSide;j++) {
var base = i*18*(rectsPerSide)+j*18;
// p1.x
triangleNew.vertices[base+0] = j*(rectWidth)-width/2; // -width/2 = centering the mid point of the mesh to (0,0,0)
// p1.y
triangleNew.vertices[base+1] = 0;
// p1.z
triangleNew.vertices[base+2] = -i*(rectWidth)+width/2;
// p2.x
triangleNew.vertices[base+3] = j*(rectWidth)+rectWidth-width/2;
// p2.y
triangleNew.vertices[base+4] = 0;
// p2.z
triangleNew.vertices[base+5] = -i*(rectWidth)+width/2;
// p3.x
triangleNew.vertices[base+6] = j*(rectWidth)+rectWidth-width/2;
// p3.y
triangleNew.vertices[base+7] = 0;
// p3.z
triangleNew.vertices[base+8] = -i*(rectWidth)-rectWidth+width/2;
// p4.x
triangleNew.vertices[base+9] = j*(rectWidth)-width/2;
// p4.y
triangleNew.vertices[base+10] = 0;
// p4.z
triangleNew.vertices[base+11] = -i*(rectWidth)+width/2;
// p5.x
triangleNew.vertices[base+12] = j*(rectWidth)-width/2;
// p5.y
triangleNew.vertices[base+13] = 0;
// p5.z
triangleNew.vertices[base+14] =-i*(rectWidth)-rectWidth+width/2;
// p6.x
triangleNew.vertices[base+15] = j*(rectWidth)+rectWidth-width/2;
// p6.y
triangleNew.vertices[base+16] = 0;
// p6.z
triangleNew.vertices[base+17] = -i*(rectWidth)-rectWidth+width/2;
}
}
Texture Coord Creation:
for(var i = 0;i<rectsPerSide;i++) {
for(var j = 0;j<rectsPerSide;j++) {
var base = i*12*(rectsPerSide)+j*12;
// p1.x
triangleNew.textureCoords[base+0] = j*(1/rectsPerSide);
// p1.y
triangleNew.textureCoords[base+1] = 1-i*(1/rectsPerSide);
// p2.x
triangleNew.textureCoords[base+2] = j*(1/rectsPerSide)+1/rectsPerSide;
// p2.y
triangleNew.textureCoords[base+3] = 1-i*(1/rectsPerSide);
// p3.x
triangleNew.textureCoords[base+4] = j*(1/rectsPerSide)+1/rectsPerSide;
// p3.y
triangleNew.textureCoords[base+5] = 1-(i*(1/rectsPerSide)+1/rectsPerSide);
// p4.x
triangleNew.textureCoords[base+6] = j*(1/rectsPerSide);
// p4.y
triangleNew.textureCoords[base+7] = 1-i*(1/rectsPerSide);
// p5.x
triangleNew.textureCoords[base+8] = j*(1/rectsPerSide);
// p5.y
triangleNew.textureCoords[base+9] = 1-(i*(1/rectsPerSide)+1/rectsPerSide);
// p6.x
triangleNew.textureCoords[base+10] = j*(1/rectsPerSide)+1/rectsPerSide;
// p6.y
triangleNew.textureCoords[base+11] =1- (i*(1/rectsPerSide)+1/rectsPerSide);
}
}
Vertex Shader:
It should just shift the y-coord of the vertex by the doubled value of the green-channel of the current texel
attribute vec3 aVertexPosition;
attribute vec3 aNormals;
attribute vec2 aTextureCoord;
uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;
uniform mat4 uNMatrix;
uniform sampler2D uSampler;
varying vec2 vTextureCoord;
void main(void)
{
vec4 tex = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_Position = uPMatrix * uMVMatrix * (vec4(aVertexPosition,1.0) + vec4(0.0, tex[1]*2.0, 0.0 ,0.0));
vTextureCoord = aTextureCoord;
}
Fragment Shader:
just for completeness… this one works fine!
the texture is mapped without any errors
varying vec2 vTextureCoord;
uniform sampler2D sampler;
void main(void)
{
gl_FragColor = texture2D(sampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
In the attachements you can find the results for meshwidth=10 and rectsPerSide=2 (and one example with 40)
the height map is a diagonal color gradient from red to green, so the red corner should be lower than the green corner
When i do not replace the y-coord and just keep the mesh flat, everything looks good so far, but with the replacement it’s just chaotic
When i just draw the vertices without connecting them to triangles/lines you can see, that vertices with the same color have differtent y-values… how can that be ?
the generated vertex buffer:
-5,0,5,
0,0,5,
0,0,0,
-5,0,5,
-5,0,0,
0,0,0,
0,0,5,
5,0,5,
5,0,0,
0,0,5,
0,0,0,
5,0,0,
-5,0,0,
0,0,0,
0,0,-5,
-5,0,0,
-5,0,-5,
0,0,-5,
0,0,0,
5,0,0,
5,0,-5,
0,0,0,
0,0,-5,
5,0,-5
and the texture coords
0,1,
0.5,1,
0.5,0.5,
0,1,
0,0.5,
0.5,0.5,
0.5,1,
1,1,
1,0.5,
0.5,1,
0.5,0.5,
1,0.5,
0,0.5,
0.5,0.5,
0.5,0,
0,0.5,
0,0,
0.5,0,
0.5,0.5,
1,0.5,
1,0,
0.5,0.5,
0.5,0,
1,0