Results 1 to 3 of 3

Thread: Problem creating a Mesh + Displacement Shader

  1. #1
    Junior Member Newbie
    Join Date
    Jan 2011
    Posts
    5

    Problem creating a Mesh + Displacement Shader

    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


  2. #2
    Senior Member Regular Contributor
    Join Date
    Nov 2010
    Posts
    201

    Re: Problem creating a Mesh + Displacement Shader

    It's much easier to use the OpenGL Tessellation shader stages to implement what you describe. [I don't check this forum often anymore, so I can't provide specific help. But basically, what you have described that you want to do is an ideal application of the Tessellation shader stages that were introduced in OpenGL 4.0 .]

  3. #3
    Junior Member Newbie
    Join Date
    Jan 2011
    Posts
    5

    Re: Problem creating a Mesh + Displacement Shader

    I have to use OpenGL ES 2.0 (WebGL)

Similar Threads

  1. My displacement shader is not working.
    By laurent7601 in forum OpenGL: GLSL
    Replies: 7
    Last Post: 01-26-2019, 05:11 PM
  2. Vertex displacement animation of a mesh
    By ibequa in forum OpenGL: Basic Coding
    Replies: 5
    Last Post: 09-02-2016, 03:12 AM
  3. creating 3d with mesh, problem with face
    By woshka in forum OpenGL: General
    Replies: 0
    Last Post: 05-22-2013, 01:24 PM
  4. Sliced images mapping a displacement mesh
    By offon in forum OpenGL: GLSL
    Replies: 0
    Last Post: 02-01-2011, 04:14 AM
  5. Displacement shader
    By Dawgmatix in forum OpenGL: GLSL
    Replies: 9
    Last Post: 09-19-2008, 01:46 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Proudly hosted by Digital Ocean