前端3D技术概述

news2024/12/28 11:31:21

43175c59ec18c242fa3f590b41f50142.gif

操作系统、编译原理、计算机图形学被传为程序员的三大浪漫，每个方向都易懂难深，但作为程序员对每个方向还是要有基本的认识和判断，毕竟贯穿虚拟和现实生活的桥梁是搭建在抽象之上的，这三大浪漫是抽象化的课代表。本次我们认识下计算机图形学中的3D渲染部分，目的是沉淀下最近接触到的一些3D知识，同时能帮助大家有一个简单的认识也是惊喜的收获吧。

41f20fdae377ded96140b56e2cc21bee.png

3D绘制引擎技术

在对3D模型进行渲染绘制的时候我们很关心底层使用的是什么样的技术，在web前端工作中webgl技术也有着广泛的应用，那么webgl、opengl、opengl es等等技术之间的关系是什么呢？我们在web和端上绘制3D图形的时候使用的是哪个引擎？下面我们先对这两个问题简单讨论下，首先分别讲下各个技术的概念和用途。


▐  OpenGL (Open Graphics Library)

OpenGL是最早普及的跨平台图形绘制接口，自1997年发布以来已经广泛应用在了各个平台。目前还是主要的绘图引擎，OpenGL规范描述了绘制2D和3D图形的抽象API。尽管这些API可以完全通过软体实现，但它是为大部分或者全部使用硬体加速而设计的。OpenGL不仅语言无关，而且平台无关。规范只字未提获得和管理OpenGL上下文相关的内容，而是将这些作为细节交给底层的窗口系统。出于同样的原因，OpenGL纯粹专注于渲染，而不提供输入、音频以及窗口相关的API。

▐  OpenGL ES (OpenGL for Embedded Systems) 

OpenGL ES是从OpenGL裁剪定制而来的, 主要是针对手机、PDA和游戏主机等嵌入式设备而设计，去除了glBegin/glEnd，四边形（GL_QUADS）、多边形（GL_POLYGONS）等复杂图元等许多非绝对必要的特性。经过多年发展，现在主要有两个版本，OpenGL ES 1.x针对固定管线硬件的，OpenGL ES 2.x针对可编程管线硬件。OpenGL ES 1.0是以OpenGL 1.3规范为基础的，OpenGL ES 1.1是以OpenGL 1.5规范为基础的，它们分别又支持common和common lite两种profile。lite profile只支持定点实数，而common profile既支持定点数又支持浮点数。OpenGL ES 2.0则是参照OpenGL 2.0规范定义的，common profile发布于2005-8，引入了对可编程管线的支持。OpenGL ES 3.0于2012年公布，加入了大量新特性。

  1. OpenGL ES 1.0基于OpenGL 1.3，在2003年发布；

  2. OpenGL ES 1.1基于OpenGL 1.5，在2004年发布；

  3. OpenGL ES 2.0基于OpenGL 2.0，在2007年发布；

  4. OpenGL 2.0向下兼容OpenGL 1.5，而OpenGL ES 2.0和OpenGL ES 1.x不兼容。

  5. OpenGL 3.x 基于 OpenGL 3.x，在2012年发布

▐  WebGL

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 <canvas>元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

OpenGL、OpenGL ES、WebGL关系用下图可以很好的表示，在实际应用过程中，前端的WebGL是通过JS语句，操作本地的OpenGL的部分接口，对于移动设备这是操作OpenGL ES的接口，来实现页面的图形的渲染，WebGL只是绑定外面接口的一层，内部的一些核心内容，如着色器，材质，灯光等都是需要借助GLSL ES语法来操作的。

三者关系图如下图所示

15fd2148cecb69c824897c75137bfde0.png

WebGL和OpenGL ES是封装调用关系本身只有较小的js运行时瞬时，但目前中端机体验来讲没有体感，webgl 相关的代码实现在代码实现有兴趣可以自己看下，只是对opengl的调用封装。

55cd39d94d527ab537f025ba05f0b237.png

OpenGL、OpenGL ES、WebGL的关系和区别还有篇文章可以比较好的说明，可参考：https://blog.csdn.net/qq_23034515/article/details/108283747

还需了解的是这些技术都利用了GPU的并行计算，相对于CPU的并行，GPU并行方式有很大不同，在多核 CPU 中，每个 CPU 可以并行运行另一个程序。而在GPU中，GPU的每个运算单元对不同的数据并行执行完全相同的程序。GPU 的运算单元设计用于高速执行简单处理，并且在条件分支方面很差。与 CPU 不同，它对可以执行的程序有相当大的限制。实际的GPU机制要复杂的多，但是暂时这种程度的理解对于OpenGL的介绍已经足够了。

3901c6346fd763ac0db56ba3c0b1b564.png

▐  着色器绘图语言GLSL（OpenGL Shading Language）

GLSL是不支持隐式类型转化、不支持静态编译的c语言的一个子集,是运行在显卡中的程序。主要作用是代替之前固定的渲染管线中顶点着色器、片源着色器部分使其可以灵活可可编程，以完成复杂的渲染定制任务。大致上替代的部分如下图所示

熟悉GLSL建议通过下面两个网址练习。

cb819fef6ce61e4dd8f983ec3233a889.png

https://thebookofshaders.com/edit.php

https://glslsandbox.com/

10ba29cf86dde0c8a60cb2f25f691328.png

渲染


3D模型的渲染简单来看的话其实就是根据模型本身的基础坐标参数和响应材质与环境光的关系进行图形渲染。但是相对于二维的照片渲染，3D渲染有了环境光与材质的反射结果计算和实时计算的需求，因此相对来说技术复杂度更高、计算量也更大。相信大家在日常也简单了解过3D相关的技术，在学习的过程中会听到大量的渲染管线、着色、材质、贴图、场景、光源、opengl、webgl等等专业的名词，如果不是从事相关的工作光这些名词就够学习一阵子了，因此本文章将简单讲解比较重要的渲染方式和名词，重点是讲应用，后期的文章中会更多的提及原理性的东西。目前来说3D渲染有两种主要的渲染方式 光栅化（rasterization），光线追踪（ray tracing）。

渲染管线实际上就是一个面对相机的投影计算过程，大致过程如下图所示，具体的每一部分是做了什么事情，感兴趣的可以自行了解下，本文只讲最易懂的部分。

9f5c9ed8a5260ff2fdb4c1d72dade98d.png

958ee8c0f6159c70f19cfdc3b6fdb332.png

光栅化是把矢量图形转换为光栅图像（也称为位图）的过程。该过程涉及将图像划分为小的、独立的像素，并根据原始矢量图形在该位置的颜色为每个像素分配颜色。结果是原始图像的网格状表示，可以在数字屏幕上显示。实际上就是把连续的几何图形投影到离散的像素矩阵的数学表示的过程。其中用到了透视、投影矩阵等相关的知识感兴趣的可以从https://github.com/QianMo/Real-Time-Rendering-3rd-Summary-Ebook/raw/master/%E3%80%8AReal-Time%20Rendering%203rd%E3%80%8B%20%E6%8F%90%E7%82%BC%E6%80%BB%E7%BB%93.pdf这本书上简单了解下。

bdcd6e6a0988402655b9d346cd186c05.png

光线追踪是最近30系列显卡带火起来的技术，本身是一个比较老的技术，提出是在80年代但是由于高昂的计算成本，最近才被大量的在离线渲染、游戏高还原度场景中使用。基本原理是从相机逆向推算到光源的光减少了工程复杂度、真实性也更加逼真。

3d98390a96b95f37edd16ff4bf025128.png

62254f2b490839cd0a30ccc14208aa72.png

▐  模型格式

所有的数据包都有对应的规范格式，在理解一个技术的时候了解对应的消费数据可以帮助我们快速看透整个流程所做的事情，目前比较流行的3D格式有obj、fbx、gltf、stl等等格式，其中fbx相当于模型界的jpeg应用相对广泛，也是本次模型渲染示例中使用的格式。在fbx中包含了模型所需要的材质、纹理、mesh、submesh等等绘图所需要的信息。

f60189adb0eadaf35dd93065d8ca5395.png

详细的格式数据查看 -> https://docs.fileformat.com/3d/fbx/https://mossec.eurostep.com/documentation/gui-user-guide/generic/bin-file-format.html

▐  前端渲染模型方式

  • threejs 汽车模型

前端调用webgl渲染3D库是比较复杂的一个事情，目前已经有了很多库做了封装如Threejs、Babylonjs、PlayCanvas等，应用最多最广泛的是threejs，threejs的用法和示例可以在其官网进行了解，这里不赘述了，https://threejs.org/

de97765c87ae99ba666463c6138eb167.png

955028326c029473d58978ec95f40790.png

88b6681eac691eef988efb735b48ab36.png


  • 其他引擎

其他引擎感兴趣的可以自己调研，下面给出一些参考。

web引擎: babylon.js、oasis-engine等

专业的游戏引擎unity、UE等

352bb6127a1520f5781ddf27ed86d284.png

建模

e44f7bed85462f316f1e29c6105abf76.png

现在大部分的模型建模方案都是手工精确建模，在近几年由于民用激光雷达、深度学习的发展，基于视觉+空间距离数据或纯视觉的3D模型辅助建模方式逐渐多了起来。

传统的建模方式先不提及了，相信在深度学习继续发展之下基于文本建模、草图建模、NERF建模的方式会越来越多，和chatgpt结合的工具也会越来越多从而极大的提高建模效率，这也许过不了5年就能在各个软件中实验起来，目前NVIDIA 建模软件已经有了比较好的落地，未来所见所得的方式会更加多样化，传统方式终将成为干预的手段补充。

在近几年的英伟达大挤牙膏和深度学习的快速发展下一种新的辅助建模方式-- NERF给快速建模带来了希望，相对于传统的手捏建模方式NERF直接通过拍摄视频的方式建模，如同二维时代的拍照一样可以快速产生一个模型，而且相对于手捏的模型更加的有“温度”，是真实的情况的客观反应，在极低的成本之下可以带来更加花样的玩法，如在汽车领域，对客户进行快速建模，绑定骨骼动画配合汽车模型进行线上的试驾体验，实现线上试车，解决车辆大小和人的匹配问题，让客户更加有购物体感。从而逐渐打破物理世界和虚拟世界的边界，互补两个世界的不足。

NERF的原理大家可以参考这篇文章https://blog.csdn.net/BIT_HXZ/article/details/128055763学习，这篇文章做了论文的翻译和简化，可以帮助快速理解。如果想试用也有比较轻量的方式，https://github.com/NVlabs/instant-ngp。

4c7fbf79f84faa5c01c26bc9e4c556bb.png

更简易的方式建议App Store搜索Luma进行使用，Luma背后也是使用了nerf技术的，可以比较简单的体验下。

7781d88cea0b9a5e53d5e9a82f4859ad.png

模型建模、查看工具

▐  blender

blender 是开源软件，免费且功能强大，推荐个人使用。https://www.blender.org/

662ec5c986cbd7328295377c1b53731d.png

▐  unity 3D

af2c2aea2c0cb6e8bef4ceb604347a9d.png

8a47d55be90ccf35e8413f6dbf5a317b.png

3D渲染带来的优势和适用范围

3D渲染相对于我们现在的二维web互联网世界来说还是未被大范围利用的土地。3D相对于2D的优势有以下几点：

  1. 提高的逼真度和深度感：3D图形提供了对物体和环境的更逼真的表示，增强了沉浸感，并更好地理解空间关系。

  2. 提高的视觉吸引力：3D图形比2D图形更具视觉吸引力和互动性，因此非常适合在高价值商品还原、广告和游戏中使用。

  3. 更灵活的表示：3D图形可以从任意角度旋转和查看，提供了对物体和环境的更灵活的表示。

  4. 更好的模拟能力：3D图形非常适合模拟，允许创建高度逼真的虚拟环境和场景，用于测试、培训和研究目的。

在家装、汽车行业有比较好的可落地性，家装行业已经广泛使用也比较符合直觉。汽车行业目前在阿里系外的懂车帝、汽车之家等app中已经引入3D已久，作为用户看车对比、提升用户停留时长的重要手段。

一些汽车方向的使用：

https://ezshine.gitee.io/www/showcase/smart3dh5/loader.html

https://car.taobaocdn.com/static/realibox/breeze/index.html?wh_weex=true&spm=acar.rb-gb.list.breeze

8d80b04bd99094c2b18f6eee551f0c0a.png

团队介绍

我们大淘宝技术团队，团队主要负责品牌业务发展中心的行业业务，基于行业纵深做业务模式的突破和能力的沉淀，更好的支持业务的发展，支持的业务包含但不限于天猫优品、天猫汽车、家装、消电、运动等行业。

我们团队正在多方向尝试新技术、新方法，提升用户体验帮助业务实现可持续增长，欢迎大家加入阿里大家庭，一起用技术帮助业务成长。

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

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

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

相关文章

Spring 五大类注解、方法注解、对象注入简化 Bean 操作

Spring 五大类注解、方法注解、对象注入简化 Bean 操作

目录 为什么要使用注解 配置扫描文件&#xff1a; 1.配置扫描路径 1. 五大类注解&#xff1a; 五大类注解有哪些&#xff1f; 1.1 Controller&#xff1a; 1.1.1 存储 Bean 1.1.2 读取 Bean 1.2 Service&#xff1a; 1.2.1 存储 Bean 1.2.2 读取 Bean 1.3 Repository&a…
阅读更多...
Hadoop的基本概念和架构

Hadoop的基本概念和架构

Hadoop的基本概念和架构 学习路线 hadoop的基本概念和架构hadoop的安装和配置hadoop的HDFS文件系统hadoop的MapReduce计算框架hadoop的YARN资源管理器hadoop的高级特效&#xff0c;如HBase&#xff0c;Hive&#xff0c;Pig等hadoop的优化和调优hadoop的应用场景&#xff0c;如…
阅读更多...
23种设计模式之组合模式（Composite Pattern）

23种设计模式之组合模式（Composite Pattern）

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将23种设计模式中的组合模式&#xff0c;此篇文章为一天学习一个设计模式系列文章&#xff0c;后面会分享其他模式知识。 如果文章有什么需要改进的地方还请大佬不…
阅读更多...
跨平台应用开发进阶(六十三)：微信小程序开发

跨平台应用开发进阶(六十三)：微信小程序开发

文章目录 一、前言二、开发物料准备2.1 个性化小程序2.2 开发时如何调用API2.3 微信小程序开发常用组件库2.3.1 WeUI2.3.2 Vant Weapp2.3.3 iView Weapp2.3.4 ColorUI2.3.5 Wux Weapp2.3.6 TaroUI2.3.7 MinUI 三、创建一个UNI-APP项目四、进行调试4.1 启动微信开发者工具4.2 调…
阅读更多...
网络基础进阶

网络基础进阶

1、交换机接口类型 Console口&#xff1a;也称为&#xff1a;串口接口&#xff0c;一般用于与PC连接&#xff0c;用于配置和监控交换机。百兆以太网接口&#xff1a;用于连接计算机和交换机之间的通信。Console到的网络接口&#xff1a;俗称交叉串口&#xff0c;是用于连接交换…
阅读更多...
Day.js 常用方法

Day.js 常用方法

Day.js是一个极简的JavaScript库&#xff0c;可以为现代浏览器解析、验证、操作和显示日期和时间&#xff0c;文件大小只有2KB左右&#xff0c;下载、解析和执行的JavaScript更少。 官网&#xff1a;Day.js中文网 1. 安装 npm install dayjs --save 2.引入 3. 初始化日期 …
阅读更多...
基于开源大模型Vicuna-13B构建私有制库问答系统

基于开源大模型Vicuna-13B构建私有制库问答系统

本教程专注在怎么使用已经开源的模型和项目&#xff0c;构建一个可以私有化部署的问答知识库&#xff0c;而且整体效果要有所保障。 主要工作包括&#xff1a; 选择基础模型&#xff0c;openAI&#xff0c;claude 这些商用的&#xff0c;或者其他的开源的&#xff0c;这次我们…
阅读更多...
vue 全局注册--

vue 全局注册--

注册全局-过滤器 filters 的 js 文件 /*** 格式化单位展示* param value* param unit* returns {string}*/const unitFormatter function (value , unit ) {value value || -return value ([, -].includes(value) ? : unit) }export default {unitFormatter }vue -ma…
阅读更多...
如何使用ArcGIS进行字段连接

如何使用ArcGIS进行字段连接

&#xff08;本文首发于“水经注GIS”公号&#xff0c;关注公号免费领取地图数据 当我们的shapefile文件属性表中的数据不够丰富&#xff0c;而Excel表格中的数据很丰富的时候&#xff0c;我们可以通过两个数据之间的共有字段进行连接&#xff0c;这里为大家介绍一下ArcGIS中字…
阅读更多...
五、easyUI中的datagrid（数据表格）组件

五、easyUI中的datagrid（数据表格）组件

1.datagrid&#xff08;数据表格&#xff09;组件的概述 datagrid以表格形式展示数据&#xff0c;并提供了丰富的选择、排序、分组和编辑数据的功能支持。datagrid的设计用于缩短开发时间&#xff0c;并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富&#xff0c;…
阅读更多...
MDM（移动设备管理策略系统）、MAM、MCM作用

MDM（移动设备管理策略系统）、MAM、MCM作用

目录 定义 MDM MAM MCM 作用 定义 MDM 移动设备管理是一种软件应用程序，用于管理企业中的终端，如笔记本电脑、智能手机、平板电脑等。随着越来越多的员工使用这些设备，各种形式和规模的企业现在都转向移动设备管理，以增强数据安全性并提高生产力。 Device Management…
阅读更多...
C嘎嘎~~[构造函数提升篇]

C嘎嘎~~[构造函数提升篇]

构造函数提升篇 1. 再谈构造函数1.1. 引入1.1.1问题引入1.1.2 const引入 1.2 正篇1.2.1 构造函数体赋值1.2.2 初始化列表1.2.3.1 浅浅认识1.2.3.2 构造函数的 行走顺序1.2.3.3 引用修饰成员变量1.2.3.4 没有默认构造的自定义类型 1.2.3初始化列表的 坑1.2.4 谈谈初始化列表 和 …
阅读更多...
如何使用ChatGPT生成Excel公式?

如何使用ChatGPT生成Excel公式?

Excel是日常工作和生活中经常使用的一款数据统计和分析软件&#xff0c;它可以帮助我们快速完成各种复杂的数据计算。但对于一些复杂的计算公式&#xff0c;不是每个人都能轻松掌握&#xff0c;或者说有时候并不想手动输入计算公式。如果能有一个智能工具&#xff0c;帮助我们快…
阅读更多...
libiosa语音信号处理

libiosa语音信号处理

img { margin: auto; display: block } librosa是一个非常强大的python语音信号处理的第三方库&#xff0c;本文参考的是librosa的官方文档&#xff0c;本文主要总结了一些重要&#xff0c;对我来说非常常用的功能。学会librosa后再也不用python去实现那些复杂的算法了&#xf…
阅读更多...
人工智能与大模型主题师资培训落地，飞桨持续赋能AI人才培养

人工智能与大模型主题师资培训落地，飞桨持续赋能AI人才培养

5月12日-5月14日&#xff0c;由百度飞桨联合中国自动化学会、复旦大学共同举办的“人工智能与大模型”主题师资培训班在百度飞桨&#xff08;张江&#xff09;人工智能产业赋能中心圆满举办。来自全国各地17所高校、26个人工智能及相关专业的50名教师线下参加此次培训。复旦大学…
阅读更多...
Java --- redis的缓存淘汰策略

Java --- redis的缓存淘汰策略

目录 一、redis内存查看与设置 二、redis的数据删除方式 三、redis缓存淘汰策略 一、redis内存查看与设置 查看redis最大占用内存&#xff1a; redis默认内存使用&#xff1a; 不设置最大内存大小或设置为0&#xff0c;在64位操作系统下不限制内存大小&#xff0c;32位操作系…
阅读更多...
Linux系统编程（四）—— 进程基本知识

Linux系统编程（四）—— 进程基本知识

一、进程标识符pid 1、pid的类型&#xff1a;pid_t pid 是有符号的16位整型数&#xff0c;也就是说可以同时进行三万多进程。 2、命令&#xff1a;ps ps命令用于报告当前进程的信息&#xff1a; ps命令有着不同的组合&#xff0c;可以显示进程不同的内容&#xff1a; &…
阅读更多...
夜天之书 #83 Web API 的开发工具和平台

夜天之书 #83 Web API 的开发工具和平台

上一篇文章《Web API 简介》的落脚点是 Web API 的体验。 Web API 作为许多软件的第一道门面&#xff0c;提升其体验的努力从来没有停止过。今天&#xff0c;围绕 Web API 的开发体验和使用体验&#xff0c;已经成长出一个庞大的软件生态。本文以常用的 Web API 开发工具和平台…
阅读更多...
什么是 Java中的零拷贝

什么是 Java中的零拷贝

什么是零拷贝 WIKI中对其有如下定义&#xff1a; “Zero-copy” describes computer operations in which the CPU does not perform the task of copying data from one memory area to another. 从WIKI的定义中&#xff0c;我们看到“零拷贝”是指计算机操作的过程中&#x…
阅读更多...
数据库迁移 | 拥抱国产化数据库openGauss

数据库迁移 | 拥抱国产化数据库openGauss

Squids DBMotion再添新库同步能力&#xff0c;本期增加了对openGauss数据库的同步支持。 openGauss数据库是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行。openGauss内核深度融合华为在数据库领域多年的经验&#xff0c;结合企业级场景需求&#xff0c;持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023