WebGL使用的是正交右手坐标系,且每个方向都有可使用的值的区间,超出该矩形区间的图像不会绘制:

  • x轴最左边为-1,最右边为1;
  • y轴最下边为-1,最上边为1;
  • z轴朝向你的方向最大值为1,远离你的方向最大值为-1;

注:这些值与Canvas的尺寸无关,无论Canvas的长宽比是多少,WebGL的区间值都是一致的。

如图:

向量

点积

p1.x * p2.x + p1.y * p2.y + p1.z * p2.z

两个向量的分量相乘之后再相加的结果,该结果和两个向量的夹角相关;两个向量的点积为0时,表示这两个向量的夹角为90度,即相互垂直或正交,大于0时,表示夹角小于90度,小于0时,表示夹角大于90度;

叉乘

叉乘之后的结果不是一个标量,而是一个新的向量,该结果向量和用来运算叉乘的两个向量所在的平面垂直;该向量即三角形平面的法向量;

齐次坐标

我们表示一个3维空间的向量或点时,一般使用包含3个分量的Vector3来表示,而齐次坐标则多引入了一个分量;

之所以多引入一个分量,是为了在仿射变换中的运算更加的方便,更具体的解说请看下面的文章:

https://www.cnblogs.com/csyisong/archive/2008/12/09/1351372.html

https://blog.csdn.net/janestar/article/details/44244849

矩阵

在3D中,一般使用4x4的矩阵。

相乘

矩阵相乘在3D图形中是一个非常重要的运算,在3D中无论是移动、旋转还是缩放大小,都是通过在当前矩阵的基础上乘以一个新的矩阵来达到目的。

单位矩阵

可以理解为常量中的1,任何矩阵乘于单位矩阵都不变。

逆矩阵

逆矩阵可以理解为倒数,即当前矩阵乘于其逆矩阵的结果为单位矩阵,需要注意的是,只有方阵(行列数量相等)才有逆矩阵,同时不是所有的方阵都有逆矩阵。

引入逆矩阵的原因之一是用来实现矩阵的除法。比如有矩阵X,A,B,其中X*A = B,我们要求X矩阵的值。本能来说,我们只需要将B/A就可以得到X矩阵了。但是对于矩阵来说,不存在直接相除的概念。我们需要借助逆矩阵,间接实现矩阵的除法。具体的做法是等式两边在相同位置同时乘以矩阵A的逆矩阵,如下所示,X*A*(A的逆矩阵)=B*(A的逆矩阵)。由于A*(A的逆矩阵)=I,即单位矩阵,任何矩阵乘以单位矩阵的结果都是其本身。所以,我们可以得到X=B*(A的逆矩阵)。

转置矩阵

转置矩阵是指将行列互换之后的矩阵,和逆矩阵常用于法线变换。

仿射变换

矩阵的仿射变换包含了主要包含了平移、旋转和缩放。

WebGL学习笔记(二):WebGL坐标系及基础几何概念的更多相关文章

  1. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  2. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  3. WebGL学习笔记二

    前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值,但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中,大致的流程是1. ...

  4. WebGL学习笔记(一):理解基本概念和渲染管线

    WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口. 渲染管线(图形流水线) 渲染管线是指将数据从3D场景转换成2D图像,最终在屏幕上显示出来的总过程.它分为几个阶段:应用阶段 ...

  5. nodejs学习笔记<二> 使用node创建基础服务器

    创建服务器的 server.js 内容. var http = require("http"); // 引用http模块 http.createServer(function(re ...

  6. ROS学习笔记二:ROS系统架构及概念

    本文主要是了解ROS的系统架构.文件夹结构以及工作所需的核心文件. ROS系统架构主要被设计和划分为三部分,每一部分代表一个层级的概念:文件系统级(The filesystem level).计算图级 ...

  7. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  8. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  9. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

随机推荐

  1. win7彻底卸载VS2015

    C盘越来越臃肿,VS2013.VS2015.VS2017以及VS2019都安装的情况下,C盘没有空间了. 系统:Win7 卸载办法: 管理员方式进cmd,执行vs_professional.exe / ...

  2. 【Code Tools】AB性能测试工具(二)

    一.测试Get请求 1.每次并发请求10个,总共1000个请求 ab -n -c https://www.baidu.com/ 2.指定Header参数 通过-H来指定 ab -n -c -H 'Ac ...

  3. QtCreator设置野火iMx6开发板提供的qt交叉编译套件

    在Ubuntu18 QtCreator上添加野火iMx6开发板的Qt交叉编译环境PC:Ubuntu18.04QtCreator: 4.8.2交叉编译环境:野火提供的 5-编译工具链->qt交叉编 ...

  4. FriendlyCore overlayfs 挂载方式

    友善 friendlycore 挂载 overlayfs 过程: uboot 引导系统启动的时候加载 ramdisk.img  这个 cpio 格式的 initrd(虚拟文件系统). 注意: ramd ...

  5. Activity知识点详解

    Activity知识点详解 一.什么是Activity 官方解释: The Activity class is a crucial component of an Android app, and t ...

  6. MySQL重置自增id

    专注和简单一直是我的秘诀之一,简单的事情可能比复杂更难做到,你必须努力理清思路,从而使其便的简单:但这最终是值得的,因为你一旦做到了,便可创造奇迹. ---乔布斯 #删除所有数据 delete  fr ...

  7. SQL进阶系列之11让SQL飞起来

    写在前面 SQL的性能优化是数据库使用者必须面对的重要问题,本节侧重SQL写法上的优化,SQL的性能同时还受到具体数据库的功能特点影响,这些不在本节讨论范围之内 使用高效的查询 参数是子查询时,使用E ...

  8. 2019年牛客多校第一场 E题 ABBA DP

    题目链接 传送门 思路 首先我们知道\('A'\)在放了\(n\)个位置里面是没有约束的,\('B'\)在放了\(m\)个位置里面也是没有约束的,其他情况见下面情况讨论. \(dp[i][j]\)表示 ...

  9. Linux UART驱动分析

    1. 介绍 8250是IBM PC及兼容机使用的一种串口芯片; 16550是一种带先进先出(FIFO)功能的8250系列串口芯片; 16550A则是16550的升级版本, 修复了FIFO相关BUG, ...

  10. Python idle中lxml 解析HTML时中文乱码解决

    例: <html><p>中文</p></html> 读取代码: 代码HTML需要进行decode('utf-8') 编译: p=etree.HTML(u ...