WebGL 世界坐标系和本地坐标系

news2025/1/22 12:47:43

目录

前言 

​编辑本地坐标系

世界坐标系

变换与坐标系 


前言 

在WebGL 从0到1绘制一个立方体_山楂树の的博客-CSDN博客中,我们创建并显示了第一个三维物体(一个立方体),示例程序开始变得像一个“真正”的三维程序了。我们亲手设置了立方体的顶点坐标和索引信息,这很耗时间。虽然这样可以实现,但是在构建你自己的,真正的WebGL程序时往往不会这样做。我们通常使用专用的三维建模工具,因为建模工具允许我们通过对各种基本的三维图形(立方体、圆柱体、球体等)进行各种操作(组合、形变、顶点数量调整、顶点间隔优化等)来创建精美复杂的三维模型。三维建模工具Blender(www.blender.org/)的界面如下图所示。

使用三维建模工具制作模型

本地坐标系

当我们创建三维模型时,需要知道原点(0.0,0.0,0.0)在何处。你可以自由选择原点的位置,所以三维模型的建立就比较容易,或者说很容易确定三维模型在场景中的位置。之前我们创建的立方体,原点就在立方体的中心。球状物体如太阳和月亮等,通常也将原点设置在球心。

另一方面,大部分上图所示的游戏角色模型,其原点大部分都是位于脚部,Y轴垂直向上穿过身体的中线。这样,如果我们将角色放置在y坐标为0的位置(也就是地面),角色看上去就像站立在地面上一样——既没有悬浮在空中,也没有沉入地面以下。这时,如果我们沿Z轴或X轴移动角色,看上去就好像角色在地面上跑动或滑动。或者,你也可以对令角色沿Y轴的旋转,看上去就好像在转向一样。

此时,组成场景中的模型或角色的顶点,其坐标是相对于角色本身的原点的,这样的坐标系被称为本地坐标系(local coordinate system)。使用建模工具如Blender创建的模型(包括顶点坐标、颜色、索引等)可以被导出为文件,而我们可以将文件中的顶点数据导入到缓冲区中,并使用gl.drawElements()方法将这个建模工具创建的模型绘制出来。

世界坐标系

下面来考虑在某个三维游戏中,同一个空间内出现多个角色的情况。比如,我们需要将下图(右)中的3个角色放置在下图(左)中的游戏场景中。每个角色都有自己的原点,场景也有原点。

当我们想要在场景中显示角色时,就会遇到一个问题。因为所有角色模型都是基于自身的原点(位于脚部)制作的,它们会重叠出现在场景的同一个位置上,那就是场景自身的原点,如下图所示 

所有的角色堆叠在游戏的原点处

 

为了解决这个问题,你需要调整每个角色的位置使之不再互相重叠。为此,我们可以把企鹅移动到(100,0,0),把猴子移动到(200,10,20),把狗狗移动到(10,0,200)。 

根据上述,我们用来移动和放置角色的坐标系就称为世界坐标系(world coordinate system),或称全局坐标系(global coordinate system)。角色本身仍然是基于本地坐标系的,而上述这种从本地坐标系到世界坐标系的转换,就称为世界变换(world transformation)。

当然,为了避免企鹅、猴子和狗狗角色的相互重叠,在创建它们的时候就应该为其指定世界坐标。比如,在Blender等工具里为企鹅建模的时候,可以将企鹅的模型建立在(100,0,0),这样当你将企鹅的模型加入到场景里面时,企鹅就会自动出现在(100,0,0)的位置,而不用你去进行坐标变换以避免重叠。但是,这种方法也有自身的缺陷。比如,你可能会想让企鹅像在跳芭蕾舞一样自旋,你会使企鹅沿Y轴旋转,但这样就对导致企鹅沿着场景的原点作半径为100的圆周运动。所以,你需要先把企鹅移到场景原点,旋转,再移回来,真够麻烦的。

事实上,这时的情形与WebGL模型视图投影矩阵_山楂树の的博客-CSDN博客中的PerspectiveView_mvp示例程序很像。我们使用一组三角形的顶点(其坐标是相对于场景的原点定义的)绘制了两组三角形,如下图所示。

这里,本地坐标系描述了图中虚线所画三角形的顶点坐标,而世界坐标系描述了沿着X轴平移后的两组三角形。 

变换与坐标系 

目前,我们还是没有讨论过本地坐标系和世界坐标系之间的变换,这样你就可以专注于上面每个例子中的内容。作为参考,下图给出了WebGL中的多种坐标系及其之间的变换关系,希望这张图能够加深你对三维图形学的认识,并帮助你在建模工具中进行实验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1102222.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++数位算法:数字1的个数

题目 给定一个整数 n&#xff0c;计算所有小于等于 n 的非负整数中数字 1 出现的个数。 示例 1&#xff1a; 输入&#xff1a;n 13 输出&#xff1a;6 示例 2&#xff1a; 输入&#xff1a;n 0 输出&#xff1a;0 提示&#xff1a; 0 < n < 109 2023年1月版 class S…

2000-2023年省市县人工智能企业数量数据

2000-2023年省市县人工智能企业数量数据 1、时间&#xff1a;2000-2023年7月 2、指标&#xff1a;所属年度、所属省份、所属城市、所属区县、人工智能企业数量&#xff08;省人工智能企业数量、地级市人工智能企业数量、区县人工智能企业数量&#xff09; 3、来源&#xff1…

python接口自动化测试(六)-unittest-单个用例管理

前面五节主要介绍了环境搭建和requests库的使用&#xff0c;可以使用这些进行接口请求的发送。但是如何管理接口案例&#xff1f;返回结果如何自动校验&#xff1f;这些内容光靠上面五节是不行的&#xff0c;因此从本节开始我们引入python单元测试框架 unittest&#xff0c;用它…

用Java包com.sun.net.httpserver下面的类实现一个简单的http服务器demo

java的com.sun.net.httpserver包下的类提供了一个高层级的http服务器API&#xff0c;可以用来构建内嵌的http服务器。支持http和https。这些API提供了一个RFC 2616 (HTTP 1.1)和RFC 2818 (HTTP over TLS)的部分实现。 https://docs.oracle.com/en/java/javase/19/docs/api/jdk.…

C++对象模型(12)-- 构造函数语义学:构造函数

1、默认构造函数生成规则 编译器不一定会为类生成默认构造函数&#xff0c;但在下列情况下&#xff0c;编译器会生成默认构造函数。 &#xff08;1&#xff09;该类没有任何构造函数&#xff0c;但包含一个类类型的成员变量&#xff0c;且成员变量所属的类有默认构造函数。 …

基于antd实现动态修改节点的Tree组件

前言 之前遇到一个需求&#xff0c;可对于任意节点添加或删除子节点。首先技术栈是基于reactant design&#xff0c;ant提供了Tree组件&#xff0c;但都是根据固定的数据渲染出树结构&#xff0c;如果需要新增或删除节点&#xff0c;官网并未提供。 实现过程 新增节点 首先…

elementui中el-select和el-tree实现下拉树形多选功能

实现效果如下&#xff1a; 代码如下&#xff1a; html中 <el-col :lg"12"><el-form-item label"可用单位" prop"useOrgListTemp"><div class"departAll"><el-selectref"selectTree"v-model"valu…

BUUCTF题解之[极客大挑战 2019]Havefun 1

1.题目分析 使用浏览器开发者工具查看网页源码&#xff0c;查看疑似flag的代码。 &#xff08;特别是注释了的源码&#xff0c;一般是HTML,JS,PHP的源码&#xff09; 修改统一资源定位符URL访问服务器后端接口&#xff0c;拿到flag。 1.URL URL是统一资源定位符&#xff08;…

“torch.load“中出现的“Unexpected key(s) in state_dict“报错问题

问题&#xff1a; 解决&#xff1a; 添加strictFalse&#xff0c;允许加载过程中出现不匹配的键。但请注意,仍然需要确保模型中的主要参数能够正确加载&#xff0c;以确保模型的有效性。 model.load_state_dict(state_dict) # 改为&#xff1a; model.load_state_dict(state…

接口自动化测试之HttpRunner测试框架

引言 接口自动化测试的实现方案有很多&#xff0c;没有编程基础的可以使用 PostmanNewman 或 JmeterAnt 来实现&#xff0c;有编程基础的则可以结合自动化测试框架来实现。基于Python的测试框架有&#xff1a;Unittest、HttpRunner、Robot Framework、Pytest等&#xff0c;本文…

跨境电商系统商城源码定制开发的优势与需求

随着互联网的快速发展&#xff0c;跨境电商成为了全球贸易的重要方式之一。为了满足不同企业的需求&#xff0c;跨境电商系统商城源码定制开发应运而生。这种定制开发的方式可以帮助企业打造适合自己的电商系统&#xff0c;提供个性化的功能和服务&#xff0c;迎合不断变化的市…

报错解决——AttributeError: ‘OpenpyxlWriter‘ object has no attribute ‘save‘

完整报错 Traceback (most recent call last):File "track_half.py", line 249, in <module>main(opt,File "track_half.py", line 153, in mainEvaluator.save_summary(summary, os.path.join(result_root, summary_{}.xlsx.format(exp_name)))Fil…

生产管理电子看板在制造业中的成功案例分享

生产管理电子看板是一种重要的生产现场管理工具&#xff0c;在制造业中已经取得了许多成功的应用案例。它通过实时采集生产现场的数据&#xff0c;包括设备状态、生产进度、产品质量等信息&#xff0c;并将这些信息以图表、数字等形式显示出来&#xff0c;同时还可以通过声音、…

Python武器库开发-基础篇(一)

前言 以Python编程为主&#xff0c;围绕渗透测试展开的一门专栏。专栏内容包括&#xff1a; Python基础编程&#xff08;Python基础、语法、对象、文件操作&#xff0c;错误和异常&#xff09;&#xff0c;Python高级编程&#xff08;正则表达式、网络编程、WEB编程&#xff0…

如何选择国产压力测试工具?

随着互联网的飞速发展&#xff0c;软件应用的性能和稳定性变得愈发重要。无论是在线购物网站、社交媒体平台还是移动应用程序&#xff0c;用户都期望能够快速、流畅地访问和使用它们。为了确保应用程序在高负载下仍能够正常运行&#xff0c;压力测试工具变得至关重要。在国内&a…

13.56M刷卡芯片522/523智能门锁超低功耗读卡方案

传统的机械锁具已走过了近百年历史&#xff0c;其功能及性能几乎已诠释到了极致。但仍不能满足现代人们对锁具有高可靠性、高安全性、信息化、智能化的要求&#xff0c;自50年代末&#xff0c;半导体技术问世后&#xff0c;人们便将该技术应用于锁具上&#xff0c;衍生出了形形…

华为云云耀云服务器L实例评测|在云耀云服务器L实例上无人直播,增加睡后收入

购买云耀云服务器 L 实例 华为云耀云服务器 L 实例是一款轻量级云服务器&#xff0c;开通选择实例即可立刻使用&#xff0c;不需要用户再对服务器进行基础配置。新用户还有专享优惠&#xff0c;2 核心 2G 内存 3M 带宽的服务器只要 89 元/年&#xff0c;可以点击华为云云耀云服…

常见的数据结构及应用

文章目录 前言数据结构介绍数组链表队列和栈树堆 总结 前言 数据结构是计算机存储、组织数据的方式。在工作中&#xff0c;我们通常会直接使用已经封装好的集合API&#xff0c;这样可以更高效地完成任务。但是作为一名程序员&#xff0c;掌握数据结构是非常重要的&#xff0c;…

【EI会议征稿】2024年第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)

2024年第四届人工智能、自动化与高性能计算国际会议&#xff08;AIAHPC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Automation and High Performance Computing 2024第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)将于202…

搭建伪分布式Hadoop

文章目录 一、Hadoop部署模式&#xff08;一&#xff09;独立模式&#xff08;二&#xff09;伪分布式模式&#xff08;三&#xff09;完全分布式模式 二、搭建伪分布式Hadoop&#xff08;一&#xff09;登录虚拟机&#xff08;二&#xff09;上传安装包&#xff08;三&#xf…