What's the correct way to draw a distorted plane in OpenGL?

Question

I've tryed to distort a plane using GL_QUADS, GL_TRIANGLES and GL_POLYGON:

glBegin(GL_QUADS);
for (int i = 0; i < squareIn.size(); i++) {
    glNormal3f(0,0,1);
    glTexCoord2f(squareIn[i]->v1->x,squareIn[i]->v1->y);
    glVertex2f(squareOut[i]->v1->x,squareOut[i]->v1->y);
    glTexCoord2f(squareIn[i]->v2->x,squareIn[i]->v2->y);
    glVertex2f(squareOut[i]->v2->x,squareOut[i]->v2->y);
    glTexCoord2f(squareIn[i]->v3->x,squareIn[i]->v3->y);
    glVertex2f(squareOut[i]->v3->x,squareOut[i]->v3->y);
    glTexCoord2f(squareIn[i]->v4->x,squareIn[i]->v4->y);
    glVertex2f(squareOut[i]->v4->x,squareOut[i]->v4->y);
    glTexCoord2f(squareIn[i]->v1->x,squareIn[i]->v1->y);
    glVertex2f(squareOut[i]->v1->x,squareOut[i]->v1->y);
}
glEnd();

But all of them gives this result when I do a extreme distortion:

Plane distorted

Expected result:

Expected result

I saw two possible solutions right now, using glNormal or glMultMatrixf.

glNormal apparently look a elegant solution, while glMultMatrixf look complex. But I can't find any code explaining how to calculate glNormals to texture a Plane.

Here's a good example using glMultMatrif.

What exactly are you expecting to happen, visually? And more importantly, which are you using: desktop OpenGL or OpenGL ES? Because they're not the same thing. — Nicol Bolas, Jun 07 '13 at 17:29
Hi Nicol, I am working with OpenGL ES, and I am expecting a result like [this image](http://www.vamoss.com.br/publico/opengl/plane2.png). — Carlos Oliveira, Jun 07 '13 at 17:49
In order to have perspective interpolation, you need to provide appropriate w-coordinates for your vertices. You can either achieve this with perspective transformations or by setting them directly. — Nico Schertler, Jun 07 '13 at 17:53
Using matrixes for transformation is the most general and probably the most powerful method. I advise you to take this way, even if it needs more 'complex' maths (not that a matrix can be decomposed, which make it easier to deal with). — Synxis, Jun 07 '13 at 18:08
Some good source to look at (though it's in Java) is the PerspectiveTransform class in JAI http://www.java2s.com/Open-Source/Java/6.0-JDK-Modules/Java-Advanced-Imaging/javax/media/jai/PerspectiveTransform.java.htm — PeskyGnat, Jun 07 '13 at 18:17

Carlos Oliveira · Accepted Answer · 2018-06-20T13:35:35.050

I worked on a OpenFramworks code that subdived the image in parts, adapted from here:

//----------------------------------------- setup   
#define GRID_X 8
#define GRID_Y 8

float * compL = new float[GRID_Y];
float * compR = new float[GRID_Y];

memset(compL, 0, GRID_Y * sizeof(float));
memset(compR, 0, GRID_Y * sizeof(float));

ofPoint * grid = new ofPoint[GRID_X * GRID_Y];
ofPoint * coor = new ofPoint[GRID_X * GRID_Y];


int width = imageGrid.width;
int height = imageGrid.height;

ofPoint quad[4];
ofPoint utQuad[4];  

//----------------------------------------- update
quad[0].set(0,0,0);
quad[1].set(width,0,0);
quad[2].set(mouseX,mouseY,0);
quad[3].set(0,height,0);

utQuad[0].set(0,0,0);
utQuad[1].set(1,0,0);
utQuad[2].set(1,1,0);
utQuad[3].set(0,1,0);

int gridSizeX = GRID_X;
int gridSizeY = GRID_Y;

float xRes = 1.0/(gridSizeX-1);
float yRes = 1.0/(gridSizeY-1);

for(int y = 0; y < gridSizeY; y++){
    for(int x = 0; x < gridSizeX; x++){

        int index = y*gridSizeX + x;


        float pctx  = (float)x * xRes;
        float pcty  = (float)y * yRes;

        float pctyL = pcty + yRes*compL[y];
        float pctyR = pcty + yRes*compR[y];

        float linePt0x  = (1-pctyL)*quad[0].x + pctyL * quad[3].x;
        float linePt0y  = (1-pctyL)*quad[0].y + pctyL * quad[3].y;
        float linePt1x  = (1-pctyR)*quad[1].x + pctyR * quad[2].x;
        float linePt1y  = (1-pctyR)*quad[1].y + pctyR * quad[2].y;

        float ptx       = (1-pctx) * linePt0x + pctx * linePt1x;
        float pty       = (1-pctx) * linePt0y + pctx * linePt1y;

        float utPt0x    = (1-pcty)*utQuad[0].x + pcty * utQuad[3].x;
        float utPt0y    = (1-pcty)*utQuad[0].y + pcty * utQuad[3].y;
        float utPt1x    = (1-pcty)*utQuad[1].x + pcty * utQuad[2].x;
        float utPt1y    = (1-pcty)*utQuad[1].y + pcty * utQuad[2].y;
        float tt        = (1-pctx) * utPt0x + pctx * utPt1x;
        float uu        = (1-pctx) * utPt0y + pctx * utPt1y;



        grid[index].set(ptx, pty, 0);
        coor[index].set( (tt * imageGrid.getTextureReference().texData.tex_t), imageGrid.getTextureReference().texData.bFlipTexture ? imageGrid.getTextureReference().texData.tex_u - (uu * imageGrid.getTextureReference().texData.tex_u) : (uu * imageGrid.getTextureReference().texData.tex_u), 0);
    }
}

//----------------------------------------- draw

ofSetColor(255, 255, 255);
ofFill();

glEnable(imageGrid.getTextureReference().texData.textureTarget);
glBindTexture( imageGrid.getTextureReference().texData.textureTarget, (GLuint)imageGrid.getTextureReference().texData.textureID);

for(int y = 0; y < gridSizeY-1; y++){
    for(int x = 0; x < gridSizeX-1; x++){

        glBegin(GL_QUADS);

        int pt0 = x + y*gridSizeX;
        int pt1 = (x+1) + y*gridSizeX;
        int pt2 = (x+1) + (y+1)*gridSizeX;
        int pt3 = x + (y+1)*gridSizeX;

        glTexCoord2f(coor[pt0].x, coor[pt0].y);
        glVertex2f(  grid[pt0].x, grid[pt0].y);

        glTexCoord2f(coor[pt1].x, coor[pt1].y);
        glVertex2f(  grid[pt1].x, grid[pt1].y);

        glTexCoord2f(coor[pt2].x, coor[pt2].y);
        glVertex2f(  grid[pt2].x, grid[pt2].y);

        glTexCoord2f(coor[pt3].x, coor[pt3].y);
        glVertex2f(  grid[pt3].x, grid[pt3].y);

        glEnd();

    }
}
glDisable(imageGrid.getTextureReference().texData.textureTarget);


//Draw grid
ofSetColor(255, 0, 0);
ofNoFill();
for(int y = 0; y < gridSizeY-1; y++){
    for(int x = 0; x < gridSizeX-1; x++){

        glBegin(GL_LINE_LOOP);

        int pt0 = x + y*gridSizeX;
        int pt1 = (x+1) + y*gridSizeX;
        int pt2 = (x+1) + (y+1)*gridSizeX;
        int pt3 = x + (y+1)*gridSizeX;

        glVertex2f(  grid[pt0].x, grid[pt0].y);
        glVertex2f(  grid[pt1].x, grid[pt1].y);
        glVertex2f(  grid[pt2].x, grid[pt2].y);
        glVertex2f(  grid[pt3].x, grid[pt3].y);

        glEnd();

    }
}

The result is awesome:

Result

What's the correct way to draw a distorted plane in OpenGL?

1 Answers1

Linked