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

Code :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:

Code :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

Code :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

Code :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:

Code :-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

Code :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