美文网首页
GLViewPort视口变换

GLViewPort视口变换

作者: TTLLong | 来源:发表于2021-02-26 11:30 被阅读0次

glViewPort()

  openGL 中的glViewPort 官方定义为,视口变换。
  意思是将已经通过透视除法转换为归一化的坐标的相应数据,转化到具体的屏幕(窗口)坐标。
  该接口,有4个参数,x,y,width,height。具体区别通过下图展示。

正常显示时的参数:

  1. 这里传入的参数为glViewPort(0,0,width,height),此时数据可以正常渲染到屏幕上。


    image.png

只改变width参数:

  1. 这里传入的参数为glViewPort(0,0,width/2,height),此时数据和正常时相比宽度变成了之前的一半。
  2. 由此可以说明右侧为x的正方向。且数据的宽是由x和width控制的。


    image.png

只改变height参数:

  1. 这里传入的参数为glViewPort(0,0,width,height/2),此时数据和正常时相比高度变成了之前的一半。
  2. 由此可以说明上方为y的正方向。且数据的高是由y和height控制的。


    image.png

同时改变width和height参数:

  1. 这里传入的参数为glViewPort(0,0,width/2,height/2),此时数据和正常时相比宽度变成了之前的一半,高度也变成了之前的一半。
  2. 由此可以说明渲染到屏幕的数据具体大小,是x,y,width,height共同控制的(貌似是句废话)


    image.png

只改变x参数:

  1. 这里传入的参数为glViewPort(width/2,0,width,height),此时数据和正常时相比。大小没有变化,整体向右偏移了width/2个像素。且超出部分没有显示
  2. 由此可以说明数据x轴的起始位置由x参数控制,如果x+width>width即超出了屏幕像素的宽,x方向超出部分将不显示。


    image.png

只改变y参数:

  1. 这里传入的参数为glViewPort(width/2,height/2,width,height),此时数据和正常时相比。大小没有变化,整体向上偏移了height/2个像素。且超出部分没有显示
image.png

同时改变x,y参数:

  1. 这里传入的参数为glViewPort(0,height/2,width,height),此时数据和正常时相比。大小没有变化,整体向上偏移了height/2个像素。且超出部分没有显示
  2. 由此可以说明数据y轴的起始位置由y参数控制,如果y+height>height即超出了屏幕像素的高,y方向超出的部分将不显示。


    image.png

同时改变x,y,width,height,参数:

  1. 这里传入的参数为glViewPort(width/2,height/2,width/2,height/2)。,此时数据和正常时相比。起始位置为屏幕正中间(width/2,height/2),宽高分别为:width/2,height/2。
  2. 可以正常绘制,没有超出屏幕范围,且大小为正常渲染的四分之一。


    image.png

glViewPort()作用总结:由上图可以得出结果。

为归一化坐标转换为屏幕坐标的接口。
换言之将整张纹理上的数据,转换到屏幕上具体的像素点的接口。

x,y为以控件左下角为起始坐标,对应渲染纹理的左下角。
右为x轴的正方向。
上为y轴的正方向。
width,height是以x,y为起始位置的宽和高,用来确定渲染出的数据到屏幕的位置。
可以在屏幕上正常渲染出来的像素范围为x轴:0--width,y轴:0--height。超出部分将不显示。

用户可以通过该接口,控制数据渲染到屏幕的具体位置和范围。
如果超过该空间的屏幕像素,将不显示。但并不意味着opengGL没有绘制超出显示部分的纹理数据。

相关文章

  • GLViewPort视口变换

    glViewPort() 正常显示时的参数: 这里传入的参数为glViewPort(0,0,width,heigh...

  • 前端知识

    meta 表示“变化”“变换”之义 viewport 表示“视口,视窗”,如在电脑上,只有一个视口(Viewpor...

  • CSS的二维变换

    在CSS变换中,支持页面中平移、旋转、变形和缩放元素。变换改变的是元素所在的坐标系统,同时,我们可以使用它在视口的...

  • 视口

    视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 1.1...

  • 移动web开发流式布局

    一,视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 1...

  • 关于移动端开发

    1.视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口布局...

  • Fabric.js 背景不受视口变换影响

    本文简介 点赞 + 关注 + 收藏 = 学会了 如果你的项目有画布拖拽、缩放等功能,而且你不希望背景图跟随拖拽或缩...

  • 视口

    视觉视口是浏览器确定的,默认980px mate控制布局视口宽度width=320 布局宽度是320device-...

  • 视口

    返回当前活动视口的ID。模型空间下(TILEMODE=1): 返回的是AcDbViewportTableRecor...

  • 视口

    提问: 如果是pc的网页如何在移动端进行显示? 历史: 最早期pc端没办法直接查看pc网页,乔布斯为了移动端能访问...

网友评论

      本文标题:GLViewPort视口变换

      本文链接:https://www.haomeiwen.com/subject/darmfltx.html