webgl glsl change the projection

Question

I'm drawing a 2d plan on the screen using webgl. I would like to rotate the plan a bit to give a 3d impression. current:

wanted:

My first approach was to use vanishing points like drawing in perspective but I didn't know how to change the y coordinate and I didn't get to the end. Is there an easier way to rotate the output?

Here is my code:

uniform float scale;
uniform vec2 ratio;
uniform vec2 center;
in vec3 fillColor;
in vec2 position;

out vec3 color;

void main() {
  color = fillColor;
  gl_Position = vec4((position - center) * ratio, 0.0, scale);
}

Answer 1

If you want to build a whole game engine or a complex animation, you will need to dig into perspective projection matrices.

But if you just want to achieve this little effect and try to understand how it works, you can just use the w coord of gl_Position. This coordinate is essential to tell the GPU how to interpolate UV textures in a valid 3D way, for example. And it will be divided to x, y and z.

So let's assume you want to display a rectangle. You will need two triangles. 4 vertices will suffice if you use TRIANGLE_STRIP mode. We could use only one attribute, but for the sake of tutorial, I will use two:

Vertex #	attPos	attUV
0	-1, +1	0, 0
1	-1, +1	0, 1
2	+1, +1	1, 0
3	+1, -1	1, 1

And all the logic will be in the vertex shader:

uniform float uniScale;
uniform float uniAspectRatio;

attribute vec2 attPos;
attribute vec2 attUV;

varying vec2 varUV;

void main() {
    varUV = attUV;
    gl_Position = vec4( 
        attPos.x * uniScale, 
        attPos.y * uniAspectRatio, 
        1.0, 
        attUV.y < 0.5 ? uniScale : 1.0 
    );
}

The line attUV.y < 0.5 ? uniScale : 1.0 means

• If attUV.y is 0, then use uniScale
• Otherwise use 1.0

The attUV attribute let's you use a texture if you want. In this example, I just simulate a checkboard with this fragment shader:

precision mediump float;

const float MARGIN = 0.1;
const float CELLS = 8.0;
const vec3 ORANGE = vec3(1.0, 0.5, 0.0);
const vec3 BLUE = vec3(0.0, 0.6, 1.0);

varying vec2 varUV;

void main() {
    float u = fract(varUV.x * CELLS);
    float v = fract(varUV.y * CELLS);
    if (u > MARGIN && v > MARGIN) gl_FragColor = vec4(BLUE, 1.0);
    else gl_FragColor = vec4(ORANGE, 1.0);
}

You can see all this in action in this CopePen: https://codepen.io/tolokoban/full/oNpBRyO