webgl学习之路(三)——透视投影矩阵的推导过程

2023-11-14

关于透视投影矩阵的讲解,网上有不少教程,但是有一点大家基本上都没有讲清楚:就是z轴坐标(这里的Z轴相当于景深)的推导过程,基本上是一笔带过。

下面先从头开始讲推导过程,再慢慢说Z轴的推导过程。

透视投影如下图:

透视投影的过程如下:所观察的物体在一个半截面的方锥形中,设坐标为P,将P投影到近截面上,坐标为P’;如下图:

推导P'很简单,就是几何概念相似三角形,推导过程如下图:

大家注意,P’处的Z'坐标就是从视点O到近截面的距离。

但是大家可以考虑这样一个问题:那所有的物体在近截面的投影Z坐标都一样,那这样Z坐标就会失去它的作用:确定物体的远近距离。所以此时Z’先保留Z的原本值,不取OQ’这个值。

在视点O处,就是摄影机的位置,有一个长度为1的正方体(概念上叫视锥体),P'再次归一化(归一化的概念大家请看齐次坐标学习!)到这个正方体中(有点像咱们在电脑上处理图片的时候,把图片缩小到一个长和宽都为1的相框里),如下图:

推导P'’的过程如下:

首先先明确一个概念:近截面的长为W,宽为H,那么近截面的X轴正方向坐标的最大坐标(H/2, 0),归一化到正方体上的坐标是(1,0),同理负坐标(-H/2, 0)对应到(-1,0),同理Y轴正方向(0, W/2)归一化到(0,1),Y轴负方向(0, -W/2)归一化到(0,-1)。

又因为P''和P'的坐标关系是线性关系

同时

所以可以推导出

所以

同理可以推导出X''坐标

至此我们推导出了P''处X''和Y‘’,我们还没有推导出Z'',先看P‘’处坐标

此时,我们就需要齐次坐标了,将P''改为齐次坐标

同时我们设透视投影矩阵为

可得

大家如果看网上的资料,上面的推导过程大家可能都说的一样,但下面这一点我是基本上没看见有人说的,那就是因为在齐次坐标中,如下图

即:P‘’*W = P

然后我们另W=-Z,可得

代入透视投影矩阵:

所以可得Z‘’和Z关系:

再有

可得

所以透视投影矩阵为:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webgl学习之路(三)——透视投影矩阵的推导过程 的相关文章

  • 由于上下文丢失,WebGL 场景无法渲染

    我有一个带纹理和不带纹理的道路 3D 模型 当我加载没有纹理的道路时 一切正常 60fps 但是当我加载带有纹理的道路时 有两种变体 1 如果 3D 模型不大 那么它可以加载并工作 但 fps 非常低 10 20 2 如果 3D 模型很大
  • 纯 WebGL 虚线

    我正在尝试使用纯 webgl 创建一条虚线 我知道已经有一个问题了 也许我很蠢 但我不知道如何让它发挥作用 我理解这个概念 但我不知道如何获取着色器中沿路径的距离 之前的答案有以下一行 varying float LengthSoFar l
  • 在 Chrome 中调试 webgl

    我有一个在 chrome 中运行的 webgl 页面 chrome 时不时会报如下错误 WebGLRenderingContext GL 错误 GL INVALID OPERATION glDrawElements 尝试在没有附加到启用属性
  • Webgl 跨源图像不起作用

    我在跨源图像方面遇到了一些问题 希望您能提供帮助 这里是行为 我有 2 个域 例如 域名1 com 域名2 com 在domain1上我放了很多html5游戏 该域只是游戏的存储库 Domain2是真正的网站 wordpress网站 用户可
  • Three.js:如何将场景的 2D 快照制作为 JPG 图像?

    我有一个如下所示的 Three js 场景 var scene new THREE Scene var camera new THREE PerspectiveCamera 75 window innerWidth window inner
  • 如何快速发现复杂场景中某个点是否被遮挡?

    我有一个复杂的 3D 场景 需要根据 3D 坐标在其上显示 HTML 元素 我只是简单地覆盖了一个div标签放在顶部并使用 CSS 定位 但是 当 3D 坐标被模型遮挡时 或者以另一种方式表述 当它在相机中不可见时 时 我还需要部分隐藏它
  • 用于渲染视频的 2d 上下文与 WebGL

    我目前正在使用CanvasRenderingContext2D drawImage 将来自 RTC 媒体流的视频绘制到画布上 不幸的是 这会占用大量的 CPU 资源 使用以下方法执行此操作会性能更高吗WebGLRenderingContex
  • JavaScript WebGL RGBA 数组到屏幕?

    我正在尝试将 RGBA 格式的像素渲染到 WebGL 画布 我有这个画布
  • 片段着色器 - 确定整个(单色)图像的最小/最大值并使用它们进行进一步的像素操作

    我想正常化单色图像像素以这种方式最小值为黑色 最大值为白色 并且两者之间的值按比例分布 目前我在 canvas 中分两步完成 但我相信在 WebGL 中应该更快 我可以想象通过片段着色器操纵颜色 但我找不到任何有效的方法来 1 确定图像的实
  • 三.js:纹理到数据纹理

    我正在尝试在 JavaScript 中实现延迟网络摄像头查看器 使用 Three js 实现 WebGL 功能 我需要存储从网络摄像头抓取的帧 以便在一段时间 几毫秒到几秒 后显示它们 我可以在没有 Three js 的情况下使用canva
  • int gl_VertexID 导致 Three.js 出错

    我一直在使用内置顶点索引的 gl VertexID 时遇到问题 通过使用in 与 Three js 一起使用 我不知道为什么 因为文档说它适用于所有版本的 OpenGL http www opengl org sdk docs mangls
  • 为什么此 WebGL 帧缓冲区使用会抛出 FRAMEBUFFER_UNSUPPORTED?

    我正在尝试创建一个 WebGL 选择缓冲区 有人能看到我在这里做错了什么吗 我在 Mozilla 5 0 X11 Linux x86 64 rv 2 0b3pre Gecko 20100724 Minefield 4 0b3pre 和 Ch
  • 三个 js - 克隆着色器并更改统一值

    我正在努力创建一个着色器来生成带有阴影的地形 我的出发点是克隆兰伯特着色器并使用 ShaderMaterial 最终用我自己的脚本对其进行自定义 标准方法效果很好 var material new MeshLambertMaterial m
  • Webgl使用视口+剪刀更新区域

    我一直在尝试创建一个多视口 webgl 应用程序 对于每个视图 我使用视口 剪刀将所有内容渲染得非常好 但现在我想改进渲染并只渲染更新的视图 因此跳过过度绘制 我做了一个小演示来展示这个想法 http kile stravaganza or
  • Three.js中是否有一个容器类型对象来转换一组孩子?

    Three js 中是否有一个容器或节点对象 可以将多个网格添加为子对象 以便它们可以一起转换 一个不可见的容器 允许对组中的所有子对象执行转换 thanks Example http mrdoob github com three js
  • 有多少 WebGL 内存可用?当我用完时会发生什么?

    GPU 内存是有限的 通常比 JS 堆大小等更有限 诸如大量高分辨率图像之类的东西可能会填满内存 而且它是共享资源 因此其他应用程序可能会使用大量内存 在 OpenGL 中 我可以查询可用内存 WebGL 有没有办法做同样的事情 我怎样才能
  • WebGL:Android 上对 OES_texture_float 的支持下降

    有谁知道减少对 WebGL 扩展的支持是怎么回事OES texture float多年来在Android上 https webglstats com webgl extension OES texture float platforms 0
  • 在 Fabric.js 中真正旋转等边三角形的中心

    使用 Fabric js 我无法真正围绕其中心点旋转三角形 或者至少我认为应该是中心点 我创建了一个jsFiddle http jsfiddle net UW8Be 这表明 三角形很简单 我用了originX center 原点Y 也是如此
  • 重复凹凸贴图

    我正在尝试使用 Three js r55 将凹凸贴图应用到平面上 以创建一个模糊的感觉表面 这是我的代码 var mapHeight THREE ImageUtils loadTexture images felt png mapHeigh
  • 开始使用 Three.js 中的行进立方体

    我是 Three js 的新手 正在寻找教程来帮助我开始了解如何在 Three js 中使用 Marching Cubes 到目前为止 我在 Three js 中看到的一些使用它的项目对我来说有点复杂 所以一个简单的教程会很好 谢谢 像您一

随机推荐

  • NLP: 0基础应用T5模型进行文本翻译代码实例~

    文章目录 前言 一 目标文本是什么 二 模型调用步骤 1 引入库 2 导入模型 本文使用 t5 base 3 使用分词器对目标文本进行分词 4 对刚刚生成的分词结果进行目标语言的生成工作 5 对生成的目标语言进行解码工作 就可得到目标语言的
  • 一文读懂Matter协议的前世今生和未来

    从事Zigbee行业的应该都知道今年Zigbee联盟已经改名为CSA联盟 并推出一个全新的 定位于解决IOT碎片化的统一协议 即Matter协议 Matter协议的由来 Matter协议的前身CHIP Connected Home Over
  • 从一个数组中随机取出若干个数

    随机取数 下面给出从一个数组随机取出若干数字组成新书组和从一个数组随机取出一个数字的方法 代码如下 从一个数组中随机取出若干个元素组成数组 param Array arr 原数组 param Number count 需要随机取得个数 co
  • 如何确保事务提交后才执行异步操作

    参考博客TransactionSynchronizationManager和TransactionSynchronizationAdapter 场景 业务流程背景 对于 法律法规 法规库 标签管理 列表中的某一条数据 操作完标注和解析按钮后
  • Angular离线API文档安装指南

    需要的材料 nginx 官方angularjs zip 完整包 步骤 1 先上www angular org 下载个完整的zip包 2 到nginx 网站下载 nginx 3 修改 nginx 1 6 2 conf nginx conf 文
  • 利用win10自带的工具测硬盘读写速度

    利用win10自带的硬盘测试工具测读写速度 一 win q 打开搜索框 输入 cmd 找到命令提示符 右击以管理员身份运行 二 在命令框里输入 winsat disk 是默认测试系统盘的速度 不出意外都是C盘 三 当我们要想测试其他盘的时候
  • MySQL学习笔记——MySQL数据类型(拉勾教育数据分析实战训练营学习笔记)

    MySQL学习笔记 MySQL数据类型 MySQL数据库中 每一条数据都有其数据类型 主要可以分为数值型 字符串型和日期时间型三大类 说明如下所示 数值类型 TINYINT 一个非常小的整数 占1字节 如果是有符号 范围是 128 127
  • MFC窗口销毁过程

    MFC窗口销毁过程 考虑单窗口情况 假设自己通过new创建了一个窗口对象pWnd 然后pWnd gt Create 则销毁窗口的调用次序 1 手工调用pWnd gt DestroyWindow 2 DestroyWin
  • Elasticsearch实战-磁盘IO被打满

    背景 事情是这样的 一天下午4点42分左右 业务反馈我开发的服务在测试环境出现问题 返回资源数据是0 查日志发现是ES访问超时 相当于数据库挂了 持续了20多分钟自己恢复 咨询了ES团队 最终得到下面的答复 当前集群现状 1 当前集群数据I
  • python爬取研究生招生网招生信息

    import requests from bs4 import BeautifulSoup from pandas core frame import DataFrame import re import time class Gradua
  • Nginx惊群问题

    Nginx惊群问题 1 简介 简单来说 多线程 多进程 linux下线程进程也没有多大区别 等待同一个socket事件 当这个事件发生时 这些线程 进程被同时唤醒 就是惊群 可以想见 效率很低下 许多进程被内核重新调度唤醒 同时去响应这一个
  • 07.JavaWeb-Vue+elementUI

    1 Vue 功能替代JavaScript和jQuery 基于JavaScript实现的前端框架 1 1配置Vue 1 1 1引入vue库 方法一 通过cdn链接引入最新版本的vue 可能会慢些 方法二 将vue库下载到本地 通过相对路径引入
  • SpringFramework核心技术三:Spring的验证机制

    Spring验证 Spring 3引入了对其验证支持的几项增强 首先 现在完全支持JSR 303 Bean验证API 其次 当以编程方式使用时 Spring的DataBinder现在可以验证对象并绑定到它们 第三 Spring MVC现在支
  • 【已解决】容器镜像安装vim的踩坑之路

    一 背景 在部署 Elasticsearch 7 17 7 版本时 进入到改容器后 发现该镜像没有vi 同时使用apt也无法正常安装 于是百度找解决方案 一步一坑 最后完美解决 二 解决 首先进入镜像中 docker exec it es
  • springboot+mysql物流车辆管理系统-计算机设计源码84722

    摘要 由于数据库和数据仓库技术的快速发展 物流车辆管理系统建设越来越向模块化 智能化 自我服务和管理科学化的方向发展 物流车辆管理系统对处理对象和服务对象 自身的系统结构 处理能力 都将适应技术发展的要求发生重大的变化 物流车辆管理系统除了
  • 基于深度学习的智慧城市火灾检测方法

    1 文章信息 本次介绍的文章是在2022年发表在Electronics的一篇文章 文章题目为 Fire Detection Method in Smart CityEnvironments Using a Deep Learning Bas
  • 工厂方法模式-Factory Method Pattern

    工厂方法模式 Factory Method Pattern 工厂方法模式 Factory Method Pattern 定义一个用于创建对象的接口 让子类决定将哪一个类实例化 工厂方法模式让一个类的实例化延迟到其子类 工厂方法模式又简称为工
  • 【爬虫】九、综合案例之m3u8文件

    视频网站常规处理方法 用户上传视频 gt 转码 处理视频 gt 切片处理 把单个文件进行拆分 一般把拆分好的文件放到M3U8 txt json的文本中 用户在拖动进度条时则进入到某个分片中 需要一个文件记录 1 视频播放顺序 2 视频存放路
  • 通过“hay的素质理论“,分析个人的学习能力

    1 学习能力是什么 大家觉得 学习能力不就是看书更快 更好的理解记忆 考试拿高分的能力吗 到了职场 还固步自封在应试教育阶段 就有点呵呵了 虽然面试官也会问 最近有看什么书啊 能给我们讲讲里面内容吗 但面试官绝对不只是想了解 你是不是爱看书
  • webgl学习之路(三)——透视投影矩阵的推导过程

    关于透视投影矩阵的讲解 网上有不少教程 但是有一点大家基本上都没有讲清楚 就是z轴坐标 这里的Z轴相当于景深 的推导过程 基本上是一笔带过 下面先从头开始讲推导过程 再慢慢说Z轴的推导过程 透视投影如下图 透视投影的过程如下 所观察的物体在