WebGL Viewport

渲染管线的角度

处于图元装配的视口变换的管线上(裁剪->背面剔除->透视除法->视口变换)
一般而言,Viewport一般跟窗口同大
常见代码如下

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); //很简单
};

当然也可以设置多窗口模式

//边界
glLineWidth(3.0f);          //设置直线宽度

glLineStipple(1, 0x3F07);   //设置虚线的模式
glEnable(GL_LINE_STIPPLE);  //启用虚线

glViewport(0,0,WIDTH,HEIGHT);
glPushMatrix(); 
    glTranslatef(0.0f,0.0f,-4.0f);
    glBegin(GL_LINES);
        glColor3f(1.0f,1.0f,1.0f);
        glVertex3f(-WIDTH/2,0.0f,0.0f);
        glVertex3f(WIDTH/2,0.0f,0.0f);
        glVertex3f(0.0f,-HEIGHT/2,0.0f);
        glVertex3f(0.0f,HEIGHT/2,0.0f);
    glEnd();
glPopMatrix();


//视口1
glViewport(0,0,WIDTH/2,HEIGHT/2);
glPushMatrix(); 
    glTranslatef(0.0f,-0.5f,-3.0f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0f,0.0f,0.0f);
        glVertex3f(0.0f,0.0f,0.0f);
        glColor3f(0.0f,0.0f,1.0f);
        glVertex3f(0.0f,1.0f,0.0f);
        glColor3f(0.0f,1.0f,0.0f);
        glVertex3f(-1.0f,0.0f,0.0f);
    glEnd();
glPopMatrix();


//视口2
glViewport(WIDTH/2,0,WIDTH/2,HEIGHT/2);
glPushMatrix(); 
    glTranslatef(0.0f,-0.5f,-3.0f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0f,0.0f,0.0f);
        glVertex3f(0.0f,0.0f,0.0f);
        glColor3f(0.0f,0.0f,1.0f);
        glVertex3f(0.0f,1.0f,0.0f);
        glColor3f(0.0f,1.0f,0.0f);
        glVertex3f(-1.0f,0.0f,0.0f);
    glEnd();
glPopMatrix();


//视口3
glViewport(WIDTH/2,HEIGHT/2,WIDTH/2,HEIGHT/2);
glPushMatrix(); 
    glTranslatef(0.0f,-0.5f,-3.0f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0f,0.0f,0.0f);
        glVertex3f(0.0f,0.0f,0.0f);
        glColor3f(0.0f,0.0f,1.0f);
        glVertex3f(0.0f,1.0f,0.0f);
        glColor3f(0.0f,1.0f,0.0f);
        glVertex3f(-1.0f,0.0f,0.0f);
    glEnd();
glPopMatrix();


//视口4
glViewport(0,HEIGHT/2,WIDTH/2,HEIGHT/2);
glPushMatrix(); 
    glTranslatef(0.0f,-0.5f,-3.0f);
    glBegin(GL_TRIANGLES);
        glColor3f(1.0f,0.0f,0.0f);
        glVertex3f(0.0f,0.0f,0.0f);
        glColor3f(0.0f,0.0f,1.0f);
        glVertex3f(0.0f,1.0f,0.0f);
        glColor3f(0.0f,1.0f,0.0f);
        glVertex3f(-1.0f,0.0f,0.0f);
    glEnd();
glPopMatrix();

WebGL Viewport

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。