OpenGL/WebGL顶点坐标变换过程简介

techbrood 发表于 2018-11-19 18:03:15

标签: webgl, 坐标变换

- +

世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。

webgl.jpg

对象坐标系

对象被应用于任何变换之前的初始位置和方向所在的坐标系,也就是当前绘图坐标系;该坐标系不固定且仅对该对象适用;默认情况下,该坐标系与世界坐标系重合;当用函数glTranslatef(),glScalef(),glRotatef()glTranslatef(),glScalef(),glRotatef()对当前绘图坐标系进行平移、伸缩、旋转变换后,世界坐标系和当前绘图坐标系不再重合;改变以后,再用glVertex3f()glVertex3f()等绘图函数绘图时,都是在当前绘图坐标系进行绘图,所有函数参数都是相对当前绘图坐标系来讲。

眼坐标系(相机坐标系/观察空间/视觉空间)

GL_MODELVIEW矩阵是模型变换矩阵和视变换矩阵的组合Mview×Mmodel;使用GL_MODELVIEW矩阵就可以使对象从对象坐标系转换到眼坐标系;OpenGL不存在单独的模型变换Mmodel和视点变换Mview;ModelView变换把场景与我们的观察位置对应起来;默认情况下,眼坐标系与世界坐标系是重合;使用函数gluLookAt()可以指定眼睛(相机)的位置和眼睛的方向; 

使用glTranslatef(),glScalef(),glRotatef()函数可以对对象坐标系进行变动;使用gluLookAt()函数可以对眼坐标系进行变动;两者可以达到相同的变换效果,相当于对象不动移动相机,和相机不动移动对象。

裁剪坐标系(裁剪空间)

眼坐标到裁剪坐标由投影完成,眼坐标通过乘以GL_PROJECTION矩阵变成了裁剪坐标;GL_PROJECTION矩阵定义了视景体,即确定哪些物体位于视野之内,位于视景体外的对象会被剪裁掉;除了视景体,投影变换还定义了顶点投影到屏幕上的方式,包括:透视投影和正交投影。

归一化设备坐标系(NDC)

由裁剪坐标系下通过除以W分量得到,该操作为透视除法;归一化设备坐标很像屏幕坐标,但还没有经过平移和缩放到屏幕像素;(x,y,z)范围均为[−1,1]。

屏幕坐标系(屏幕空间)

(OpenGL)将屏幕上的设备坐标称为屏幕坐标;设备坐标又称为物理坐标,指输出设备上的坐标;设备坐标用对象距离窗口左上角的水平距离和垂直距离来指定对象的位置,以像素为单位表示;设备坐标XX轴向右为正,YY轴向下为正,坐标原点位于窗口的左上角;从归一化设备坐标到屏幕坐标基本上是一个线性映射关系,通过对归一化设备坐标进行视口变换得到;可以用函数glViewport()定义渲染区域的矩形。


(Unity3D)屏幕坐标是以像素来定义的,它的范围是以左下角为(0,0),右上角为(Screen.width,Screen.height)(Screen.width,Screen.height)定义的这样一个矩形,屏幕坐标是一个3D坐标,Z轴用相机的世界单位来衡量;屏幕坐标和相机之间满足两个条件:

creen.width=Camera.pixelWidth,Screen.height=Camera.pixelHeight

例如:相机正对着场景中的原点(0,0,0),相机的Z轴分量为−10,按照屏幕坐标的定义,假设屏幕大小为800×640,则原点转化为屏幕坐标后应该是(400,320,10)。

视口坐标

(Unity3D)视口坐标是标准化后的屏幕坐标;视口坐标是一个3D坐标,Z轴用相机的世界单位来衡量;视口坐标用0到1间的数字来表示,左下角为(0,0),右上角为(1,1)。 

例如:将相机正对着场景中的原点(0,0,0),相机的Z轴分量为−10,按照屏幕坐标的定义,假设屏幕大小为800×640,则原点转化为视口坐标后应该是(0.5,0.5,10)。

possitive(3) views7577 comments4

发送私信

最新评论

techbrood 2020-07-05 23:03:51

做透视除法时的w实际上可以理解为投影仪到投影面的距离,距离为1时为标准情况,大于1时(远离),投影会变大,小于1时(靠近),投影会被压缩。除以w则可以保证始终得到标准投影。


iefreer 2019-06-26 21:27:26

references 3: http://ogldev.atspace.co.uk/www/tutorial12/tutorial12.html


iefreer 2019-06-26 18:52:57

references 2: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/WebGL_model_view_projection


iefreer 2019-06-26 18:23:24

references 1: http://www.codinglabs.net/article_world_view_projection_matrix.aspx


请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 更多...