WebGL Viewport

Render pipeline Angle

• Be on the line of viewport transform of pixel assembly (Cut -> Back remove -> Perspective Division -> Viewport transform)
• Generally speaking, the Viewport is the same size as the window
• Common code is as follows

function framebufferSizeCallback(width, height) {
    canvas.width = width;
    canvas.height = height;
    gl.viewport(0.0, width, height);
    requestAnimationFrame(render);
}
window.onresize = () = > {
    framebufferSizeCallback(window.innerWidth, window.innerHeight); / / is very simple
};
Copy the code

• Of course, you can also set the multi-window mode

/ / boundary
glLineWidth(3.0 f);          // Set the line width

glLineStipple(1.0x3F07);   // Set the dashed line mode
glEnable(GL_LINE_STIPPLE);  // Enable dashed lines

glViewport(0.0,WIDTH,HEIGHT);
glPushMatrix(a);glTranslatef(0.0 f.0.0 f.4.0 f);
    glBegin(GL_LINES);
        glColor3f(1.0 f.1.0 f.1.0 f);
        glVertex3f(-WIDTH/2.0.0 f.0.0 f);
        glVertex3f(WIDTH/2.0.0 f.0.0 f);
        glVertex3f(0.0 f,-HEIGHT/2.0.0 f);
        glVertex3f(0.0 f,HEIGHT/2.0.0 f);
    glEnd(a);glPopMatrix(a);/ / viewport 1
glViewport(0.0,WIDTH/2,HEIGHT/2);
glPushMatrix(a);glTranslatef(0.0 f.0.5 f.3.0 f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0 f.0.0 f.0.0 f);
        glVertex3f(0.0 f.0.0 f.0.0 f);
        glColor3f(0.0 f.0.0 f.1.0 f);
        glVertex3f(0.0 f.1.0 f.0.0 f);
        glColor3f(0.0 f.1.0 f.0.0 f);
        glVertex3f(1.0 f.0.0 f.0.0 f);
    glEnd(a);glPopMatrix(a);/ / viewport. 2
glViewport(WIDTH/2.0,WIDTH/2,HEIGHT/2);
glPushMatrix(a);glTranslatef(0.0 f.0.5 f.3.0 f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0 f.0.0 f.0.0 f);
        glVertex3f(0.0 f.0.0 f.0.0 f);
        glColor3f(0.0 f.0.0 f.1.0 f);
        glVertex3f(0.0 f.1.0 f.0.0 f);
        glColor3f(0.0 f.1.0 f.0.0 f);
        glVertex3f(1.0 f.0.0 f.0.0 f);
    glEnd(a);glPopMatrix(a);/ / viewport. 3
glViewport(WIDTH/2,HEIGHT/2,WIDTH/2,HEIGHT/2);
glPushMatrix(a);glTranslatef(0.0 f.0.5 f.3.0 f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0 f.0.0 f.0.0 f);
        glVertex3f(0.0 f.0.0 f.0.0 f);
        glColor3f(0.0 f.0.0 f.1.0 f);
        glVertex3f(0.0 f.1.0 f.0.0 f);
        glColor3f(0.0 f.1.0 f.0.0 f);
        glVertex3f(1.0 f.0.0 f.0.0 f);
    glEnd(a);glPopMatrix(a);/ / viewport. 4
glViewport(0,HEIGHT/2,WIDTH/2,HEIGHT/2);
glPushMatrix(a);glTranslatef(0.0 f.0.5 f.3.0 f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0 f.0.0 f.0.0 f);
        glVertex3f(0.0 f.0.0 f.0.0 f);
        glColor3f(0.0 f.0.0 f.1.0 f);
        glVertex3f(0.0 f.1.0 f.0.0 f);
        glColor3f(0.0 f.1.0 f.0.0 f);
        glVertex3f(1.0 f.0.0 f.0.0 f);
    glEnd(a);glPopMatrix(a);Copy the code