【WebGL-iTwin.js】理论篇(一):webgl中三维模型表示方式-多边形网格

news2024/11/24 7:58:49

一、三维模型表示方式

在计算机图形学中,三维模型一般是指空间中物理实体对象的数学表示。具体说来,三维模型是由其形状颜色外观的描述构成。通常,三维对象的表示方法可以分为面表示和体表示两种类型。
面表示: 也就是表示三维对象的表面。常用方法为多边形网格、隐式曲面和参数曲面,下面会着重介绍多边形网格,市面上主流的WebGL图形引擎,如:Cesium.js、iTwin.js、Three.js、SuperMap等,均采用多边形网格的数据结构。
体表示: 表示三维对象的体积。常用的体数据表示方法包括体素和构造实体几何。需要注意的是,在iTwin.js中,出于性能考虑,无论你是以那种方式构造出的实体,导入模型后最终都会转化为多边形网格的表现形式。

二、多边形网格

多边形网格是三维模型常用的形状表现形式。一个多边形网格是利用多边形单元,如:三角形、四边形等,对一个连续曲面的分割。以三角形网格为例,三角网格(Triangle Meshes)也称作三角形图元,是计算机图形学中用来构造一个物体的最小单位。每个三角网格由顶点坐标(Vertices)和顶点索引(Faces)构成。顶点坐标即三角形的三个顶点在空间中的坐标;顶点索引包含了顶点之间的连接顺序,即顶点以怎样的顺序连接起来,形成网格的边和面。
多边形网格
由若干个多边形网格面围成的闭合几何结构,我们称为mesh体
在这里插入图片描述

三、材质

纹理映射
材质包括纹理和颜色,是三维模型的外观表现形式。纹理通常是指纹理贴图(texture),比如为赛车贴上贴图。纹理的像素称为纹素(纹理元素),纹理中的位置通常称为纹理坐标或UV坐标。纹理坐标通过原点位于图像左下角的参考系统进行表示,对应于(0, 0)和(1, 1),如果纹理坐标的值超出纹理空间,此时会通过纹理环绕来处理,通常分为截取和重复两种模式。因此所谓贴图就是将一张二维图片映射到三维模型表面上去,这张二维图片称为纹理图片,贴图过程称为纹理映射。以多边形网格为例,将纹理图片的UV坐标和网格的每个顶点坐标建立一一对应的关系,建立图片到网格表面的映射,从而实现贴图。
在这里插入图片描述

四、iTwin.js中的模型数据结构

在iTwin.js中模型的几何结构表现形式分为三角网格(triangulated mesh)和线形(line),本次我们重点关注的是三角网格。如下图所示,iTwin.js中模型的构成可以理解为,几何结构加材质。
贴图
模型的数据结构遵循iModels.ExportGraphicsInfo,具体如下所示:

  {
    elementId: '0x1a',
    mesh: {
      indices: [0, 1, 2],
      points: [
        0, 0, 0, 10, 0,
        0, 10, 0, 10
      ],
      normals: [
        0, 0, 1, 0, 0,
        1, 0, 0, 1
      ],
      params: [0, 1, 10, 1, 10, 11],
      isTwoSided: true
    },
    color: 0,
    subCategory: '0x19',
    geometryClass: 0,
    materialId: '0x18',
    textureId: '0x17'
  }

参数含义:

  • elementId:元素id,唯一标识
  • mesh: 网格数据,这里均为统一索引的三角形网格
    • indices:顶点索引,每三个索引表示一个三角形
    • points:顶点坐标,每三个值为一组
    • normals:法向量,每三个值为一组
    • params:UV坐标,每两个值为一组
    • isTwoSided:网格是否两侧可见
  • color: 颜色
  • subCategory: 定义几何元素引用的外观
  • geometryClass: 几何图形的类型
  • materialId: 材质id
  • textureId: 纹理贴图id

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

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

相关文章

C++ Reference: Standard C++ Library reference: Containers: map: map: size

C官网参考链接&#xff1a;https://cplusplus.com/reference/map/map/size/ 公有成员函数 <map> std::map::size C98 size_type size() const; C11 size_type size() const noexcept;返回容器大小 返回map容器中的元素数量。 形参 没有形参。 返回值 容器中元素的数…

java计算机毕业设计基于安卓Android的订餐系统APP

项目介绍 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设…

[附源码]Node.js计算机毕业设计高校教材管理系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…

docker kali 安装 xfce4 桌面 + tigervnc + novnc

docker kali 安装 xfce4 桌面 tigervnc novnc启动容器环境变量准备工作安装xfce4 桌面tigervnc安装 tigervnc启动 tigervncnovncxfce4 启动弹窗如何关闭&#xff1f;参考启动容器 docker run --name kali -p 5901:5901 -p 6080:6080 -i -t kalilinux/kali-rolling环境变量 …

系列案例解读丨神策新一代流程画布再发力,加速易宠科技精准营销升级

在宠物行业需求端、供给端以及资本的共同推动下&#xff0c;中国宠物经济产业规模增长迅速。与此同时&#xff0c;数字化浪潮全面掀起&#xff0c;借助数字化工具和手段实现企业经营创新&#xff0c;已经成为宠物企业的增长新机会。E 宠商城上线于 2009 年&#xff0c;是易宠科…

推荐几款Nodejs实现的web框架

本文首发于个人博客“胖蔡叨叨叨”&#xff0c;点击可查看原文 Nodejs在近些年可以说是发展异常的迅猛&#xff0c;由于同样使用的js原因&#xff0c;对于前端开发人员可以说是非常的友善了&#xff0c;Github上有关nodejs的贡献也是越来越多&#xff0c;像是阿里的express、ko…

Qt扫盲-QBoxLayout 理论总结

QBoxLayout 理论总结1. 简述2. 创建布局器3. 添加布局元素4. 间隔设置5. 布局 操作1. 简述 QBoxLayout 占用来自其父布局或 parentWidget&#xff08;&#xff09;获得的空间&#xff0c;将其划分为一排框&#xff0c;并使在布局器里的控件填充一个框。 如果 QBoxLayout 的方…

AC耦合电容仿真知多少

AC耦合电容&#xff0c;也叫DC blocking隔直电容&#xff0c;在几乎所有的高速串行链路中&#xff0c;都可以看到它的身影&#xff0c;它的主要作用是去掉信号中的直流偏置分量&#xff0c;同时让高频分量可以顺利通过&#xff0c;类似于一个高宽带的滤波器。 由于电容的焊盘通…

进销存软件哪个简单好用?来看看这5款

小企业进销存软件如何选择&#xff1f;我认为最重要的一点是适合。 市面上优秀的进销存软件很多&#xff0c;但质量参差不齐。同时&#xff0c;由于与企业的匹配度不一样&#xff0c;再高质量的软件&#xff0c;用起来可能也会十分费劲。 下面与大家分享进销存软件的选型要点…

【能效分析】某大厦电力运维系统的设计及应用

项目简介 安科瑞 李亚俊 壹捌柒贰壹零玖捌柒伍柒 某公司位于北京市大兴区&#xff0c;于2001年在大兴分局注册成立&#xff0c;该在公司多年的发展里&#xff0c;始终为终端客户提供好的产品和技术支持、健全的售后服务&#xff0c;该公司主要经营110KV及以下送电线路&#x…

美团阿里Java程序员晒工资被围观,总结:搞好千万级并发=实现百万年薪?

当我听到这句话的时候楞住了&#xff0c; 面试官就用一句话就问倒了我。 实际上&#xff0c;如果不在BAT这样的大厂工作&#xff0c;是很难接触到千万级别的高并发的。 但也正是这种难得&#xff0c;让各个大厂都抢着要这样的人才啊&#xff01; #####小编经过长时间的研究、…

人工神经网络技术及应用,人工神经网络实际应用

1、什么是神经网络&#xff0c;举例说明神经网络的应用 我想这可能是你想要的神经网络吧&#xff01; 什么是神经网络&#xff1a; 人工神经网络&#xff08;Artificial Neural Networks&#xff0c;简写为ANNs&#xff09;也简称为神经网络&#xff08;NNs&#xff09;或称作…

Linux 自定义 RPM 包

目录 一、定制 rpm 包概述 1.1 什么是定制 rpm 包 1.2 为什么要定制 rpm 包 1.3 如何定制 rpm 包 二、安装 FPM 工具 2.1 我在安装过程出现如下错误&#xff1a;ERROR: Error installing fpm:childprocess requires Ruby version > 2.4.0. 2.2 解决办法 2.3 再次执…

SuperMap GIS的TIN地形数据优化

目录 一、优化背景 二、数据优化 2.1 去除无效值 2.1.1 栅格数据 2.1.2 瓦片数据 2.2 镶嵌数据集 2.3 生成优化 2.3.1 块存储瓦片 2.3.2 高精度 2.4 创建空间索引 一、优化背景 TIN指不规则三角网&#xff0c;是针对连续三维空间的不规则划分&#xff0c;其最小单元为不规则三角…

[附源码]Python计算机毕业设计高校课程思政案例库系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

【Vue路由】多级路由、路由传参、命名路由、params使用

文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由 案例实验 我们尝试做出如下的效果&#xff1a; 首先项目结构&#xff1a; 我们直接看四个路由组件&#xff1a; About.vue <template><h2>我是About的内容</h2> </…

Android 音视频采集那些事

音视频采集 在整个音视频处理的过程中&#xff0c;位于发送端的音视频采集工作无疑是整个音视频链路的开始。在 Android 或者 IOS 上都有相关的硬件设备——Camera 和麦克风作为输入源。本章我们来分析如何在 Android 上通过 Camera 以及录音设备采集数据。 Camera 在 Andro…

web网页设计期末课程大作业:家乡旅游主题网站设计——河北8页HTML+CSS+JavaScript

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…

【爬虫实战项目】Python爬虫批量旅游景点信息数据并保存本地(附源码)

前言 今天给大家介绍的是Python爬虫批量下载旅游景点信息数据&#xff0c;在这里给需要的小伙伴们代码&#xff0c;并且给出一点小心得。 首先是爬取之前应该尽可能伪装成浏览器而不被识别出来是爬虫&#xff0c;基本的是加请求头&#xff0c;但是这样的纯文本数据爬取的人会…

丰立智能在创业板上市:总市值达到33亿元,王友利夫妇为实控人

12月15日&#xff0c;浙江丰立智能科技股份有限公司&#xff08;下称“丰立智能”&#xff0c;SZ:301368&#xff09;在深圳证券交易所创业板上市。本次上市&#xff0c;丰立智能的发行价格为22.33元/股&#xff0c;发行数量为3010万股&#xff0c;募资总额约为6.72亿元&#x…