WebGL矩阵变换总结（模型矩阵，视图矩阵，投影矩阵）

最新推荐文章于 2024-09-13 23:50:35 发布
最新推荐文章于 2024-09-13 23:50:35 发布
阅读量6.2k 收藏 20
点赞数 7
分类专栏： WebGL 文章标签： WebGL 2.0 变换流程 WebGL 矩阵变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37683659/article/details/79622618
版权
本文总结了WebGL中的矩阵变换过程，包括模型矩阵、视图矩阵和投影矩阵的作用和应用场景。模型矩阵用于将物体从物体空间变换到世界空间，视图矩阵则是将世界坐标系转换到摄像机坐标系，而投影矩阵则负责从摄像机空间到剪裁空间的变换。文章还提及了透视除法和视口变换在标准设备坐标系到屏幕坐标系转换中的作用。
摘要由CSDN通过智能技术生成

           矩阵变换总结（模型矩阵，视图矩阵，投影矩阵）

      最近在开发项目的时候，常常用到Three.js，用起来很方便。可是，当引擎迭代升级的时候，以前的很多的技巧，并不一定使用最新的引擎。我认为应当对底层的原生API有很深入的认识并掌握3D开发相关的数学知识才能成为一个合格的3D开发人员。最近在参与编辑WebGL2.0的书籍，也趁着这个机会好好学习下计算及图形学。

        今天对变换流程做一个简单的概述，后面的博客我将会和我的同学一起为大家结合线性代数和计算机图形学来讲解每种变换矩阵的推导。

        在《WebGL编程指南》序中，有一句话我非常喜欢，并分享给大家：

接下来，我们来看一下WebGL中的变换流程，或者说是Opengl es 3.0中的变换流程（以下图片来源自网络）：

1.模型变换及模型矩阵

        局部（

最低0.47元/天 解锁文章
Webglzhang
关注
专栏目录
图形流水线中坐标变换详解：模型矩阵、视角矩阵、投影矩阵
sherlockreal的博客
12-08 2530
图形流水线中坐标变换详解：模型矩阵、视角矩阵、投影矩阵图形流水线中坐标变换过程模型矩阵：模型局部坐标系和世界坐标系之间的桥梁模型局部坐标系存在的意义Model_to_World / World_to_Model视角矩阵：世界坐标系和视角坐标系(摄像机坐标系)直接的桥梁视角坐标系如何构成Camera_to_Wrold / World_to_Camera投影矩阵：3D to 2D正交投影原理：小孔成像...
模型矩阵、视图矩阵、投影矩阵
热门推荐
Jared_LAU的专栏
09-05 1万+
模型视图投影矩阵的作用，就是将顶点从局部坐标系转化到规范立方体(Canonical View Volnme)中。总而言之，模型视图投影矩阵=投影矩阵×视图矩阵×模型矩阵，模型矩阵将顶点从局部坐标系转化到世界坐标系中，视图矩阵将顶点从世界坐标系转化到视图坐标系下，而投影矩阵将顶点从视图坐标系转化到规范立方体中。 如下图所示，假设现在要将三维空间中的三角形渲染到屏幕上。三角形的模型文件中，顶点坐标是
WebGL系列教程七（二维及三维旋转、平移、缩放）
最新发布
AIGIS的博客
09-13 1119
上一篇我们讲了如何进行立方体的纹理贴图，为了方便立方体的贴图后效果的展示，我们对立方体进行了旋转，但代码中并没有进行体现，这一节我们来讲讲旋转、平移、缩放。实际上，在WebGL中进行旋转、平移、缩放只需要乘以相应的旋转、平移、缩放矩阵即可。本文我们通过梳理二维及三维的旋转、平移、缩放矩阵，搞明白了旋转、平移、缩放对应的矩阵，并在WebGL中进行了实验操作，实现了一个立方体的旋转。本文在理解上有一定的难度，尤其是矩阵的变换，需要读者具有一定的线性代数知识，希望读者仔细体会，回见~
模型矩阵， 视图矩阵， 投影矩阵
weixin_34184158的博客
11-10 354
模型视图投影矩阵的作用，就是将顶点从局部坐标系转化到规范立方体中，总而言之， 模型视图投影矩阵 = 模型矩阵*视图矩阵*投影矩阵； 模型矩阵： 将顶点从局部坐标系转换到世界坐标系中； 视图矩阵： 将顶点从世界坐标转化到视图坐标系下； 投影矩阵： 将顶点从视图坐标系转换到规范立方体中（即屏幕中）; 转载于:https://www.cnblogs.com/yanan-boke/p/7815...
webgl模型矩阵
baidu_38766085的博客
03-28 3498
模型矩阵在webgl中表示 模型的缩放 旋转 平移的所以模型矩阵包含了 旋转矩阵:缩放矩阵:平移矩阵:下面给出一份演示:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> &
webgl学习之路（三）——透视投影矩阵的推导过程
mmmMMM12345的博客
07-01 1088
关于透视投影矩阵的讲解，网上有不少教程，但是有一点大家基本上都没有讲清楚：就是z轴坐标（这里的Z轴相当于景深）的推导过程，基本上是一笔带过。 下面先从头开始讲推导过程，再慢慢说Z轴的推导过程。 透视投影如下图： 透视投影的过程如下：所观察的物体在一个半截面的方锥形中，设坐标为P，将P投影到近截面上，坐标为P’；如下图： 推导P'很简单，就是几何概念相似三角形，推导过程如下图： 大家注意，P’处的Z'坐标就是从视点O到近截面的距离。 但是大家可以考虑这样一个问题：那所有的物体在近截面的
WEBGL里lib目录,里面封装了相机和物理矩阵等
09-26
在WebGL中，相机通常通过设置视口、投影和模型视图矩阵来实现。视口矩阵定义了渲染区域的大小和位置；投影矩阵则根据透视或正交投影来决定物体在屏幕上的形状；模型视图矩阵组合了物体的位置、旋转和缩放，以将3D...
计算机图形学视图矩阵推导过程
Webglzhang
04-06 9965
视图矩阵推导过程（Demo基于WebGL 2.0实现） 一、概述 首先，我们需要了解些概念： 摄像机坐标系或者摄像机空间：物体经摄像机观察后，进入摄像机空间。 视变化，是将世界坐标系下的坐标变化到摄像机坐标系，视变换是通过乘以视图矩阵实现的。 我们要知道视并不存在真正的摄像机，只不过是在世界坐标系里面选择一个点，作为摄像机的位置。然后根据一些参数，在这个点构建一个坐标系。...
WebGL（四）三维世界的重要矩阵
from_the_star的博客
04-21 918
三维世界与二维世界最大的区别就是有深度，也就是Z轴。但在计算机上，我们还是把三维世界场景绘制到二维的屏幕上。 本节代码在链接的ch07文件夹，矩阵相关的在lib文件夹中的cuon-matrix.js。 如何将三维世界上的物体投影到二维屏幕？ 这里的处理用到三个矩阵转换： 模型矩阵：用来移动、旋转、拉伸物体。具体矩阵使用方式看这里。 视图矩阵：获取在视点也就是相机位置观察到的场景。 投影矩阵：将三...
webgl笔记-1.模型视图矩阵和投影矩阵
dayuan5183的博客
09-12 525
最近在学习WebGL技术的过程中，我补充了一些原本了解甚少的计算机图形学知识。如果有同学和我一样，没有系统学过计算机图形学就接触了3D图形编程，而对不少略为艰深的概念有困惑，希望这些笔记能够帮助你。 模型矩阵 我们必须考虑，当空间中点的位置会发生变化的时候，其坐标如何变化。考虑三种基本的变换：平移、旋转和缩放。 “变换”的含义就是，将点的初始位置的坐标P映射到平移、旋转、缩放后的位置坐标...
模型矩阵到世界矩阵的变换
07-13
用Direct3D模拟模型举证的变换，并与OpenGL进行比较学习。
ModelMatrix、ModelViewMatrix、ProjectionMatrix、NormalMatrix模型矩阵、模型视图矩阵、投影矩阵、正规矩阵详解
aoxuestudy的专栏
11-22 6002
ModelMatrix、ModelViewMatrix、ProjectionMatrix、ModelMatrix模型矩阵、模型视图矩阵、投影矩阵、正规矩阵详解 1. 前言 在openGL经常用到ModelMatrix、ModelViewMatrix、ProjectionMatrix、ModelMatrix（模型矩阵、模型视图矩阵、投影矩阵、正规矩阵）这几个矩阵，举个栗子： 效果： 上面是一段顶点着色器的代码实现了：平行光光照效果，就用到了ModelMatrix、ModelViewMatrix、Proje
投影矩阵 视图模型矩阵
Augusdi的专栏
06-02 5427
<br />     OpenGL在设置场景时，要用到两个矩阵：投影矩阵 和 模型视图矩阵通过glMatrixMode来指定下面的矩阵操作是针对哪一个矩阵进行的。<br />     gluLookatup,glTranslate, glRotate, glScale, glOrtho ,gluPerspective 等函数只根据其参数计算出一个矩阵M，然后与当前的栈顶元素T相乘；但这些函数本身不能自动找到应该对应的矩阵堆栈，你可以将它们放在任何矩阵堆栈操作中，比如可以将gluLookatup放在glMat
[OpenGL ES 03]3D变换：模型，视图，投影与Viewport
weixin_30294709的博客
12-06 500
[OpenGL ES 03]3D变换：模型，视图，投影与Viewport 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公用协议 前言 本来打算直接写教程 04 的，但是想到3D 变换涉及的数学知识较多，往往是很多初学者的拦路虎（比如我自己）。再加上OpenGL ES 2.0 不再提供OpenGL ES 1.0中 3D...
学习WebGL_003_模型矩阵
qq_21476953的博客
10-09 297
1、模型矩阵的概念 模型矩阵,包括了以模型自己为坐标参考系的旋转、缩放、平移一系列变换的统一矩阵， 称为模型矩阵。 2、如何获得 1)变换的种类 this.position = new Vector3(0,0,0); //Traditional X,Y,Z 3d position this.scale = new Vector3(1,1,1); //How much to scale a mes...
转载+整理 - 计算机图形学 - 模型视图矩阵和投影矩阵
weixin_30678821的博客
11-17 466
出处：http://blog.csdn.net/qb371/article/details/8650094 　　根据原文，我将其中关于模型视矩阵和投影矩阵的比较重要的知识整理出来再加工一下，如果有什么地方看得不适合明白的话还是去看一下原文吧。 模型矩阵 我们必须考虑，当空间中点的位置会发生变化的时候，其坐标如何变化。考虑三种基本的变换：平移、旋转和缩放。 “变换”的含义就是，将点的初始位置...
webgl第29课-三维空间-模型视图矩阵
谷子的博客
08-12 588
需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 上一节课我们学习了  三维空间之加入旋转矩阵的三角形 这一节课我们将学习  三维空间-模型视图矩阵 上节课你仔细看代码你会发...
WebGL模型矩阵
dabaooooq的博客
08-30 589
在JavaScript中计算＜旋转矩阵＞×＜平移矩阵＞，然后将得到的矩阵传入顶点着色器。像这样，我们就可以把多个变换复合起来了。一个模型可能经过了多次变换，将这些变换全部复合成一个等效的变换，就得到了模型变换（model transformation），或称建模变换（modeling transformation），相应地，模型变换的矩阵称为模型矩阵（model matrix）。
webgl 摄像机矩阵
08-08
WebGL是一种基于OpenGL ES规范的JavaScript API，用于在HTML5 canvas上渲染2D和3D图形。在WebGL中创建摄像机矩阵（Camera Matrix），主要是为了将三维场景转换为二维屏幕坐标，这涉及到视图变换的过程。 摄像机矩阵通常由三个部分组成： 1. **位置向量（Position Vector）**：表示摄像机的位置，在三维空间中的X、Y和Z轴方向上的距离。 2. **旋转矩阵（Rotation Matrix）**：如果摄像机需要绕着某个轴旋转，比如绕世界坐标系的X轴（pitch）、Y轴（yaw）或Z轴（roll），则会通过相应的旋转变换生成这个矩阵。 3. **平移矩阵（Translation Matrix）**：包含了摄像机沿其正对轴的位移，用于移动到期望的观察点。 摄像机矩阵（View Matrix）通常是这样计算的：首先，执行旋转和位移操作，然后组合成一个复合矩阵，即旋转矩阵乘以平移矩阵。最后，为了形成完整的视图变换矩阵，它会被相机的主视方向（也就是正对轴的方向）所确定的正交投影矩阵（Orthographic or Perspective）所乘。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值