首页 前端知识 关于WebGL,Three.js,OpenGL,Direct3D,CSS3D,GPU

关于WebGL,Three.js,OpenGL,Direct3D,CSS3D,GPU

2024-04-13 23:04:40 前端知识 前端哥 824 440 我要收藏
OpenGL

OpenGL(英语:Open Graphics Library,译名:开放图形库或者"开放式图形库")是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。这个接口由近350个不同的函数调用组成,用来绘制从简单的图形比特到复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。

OpenGL的高效实现(利用了图形加速硬件)存在于Windows,部分UNIX平台和Mac OS。这些实现一般由显示设备厂商提供,而且非常依赖于该厂商提供的硬件。开放源代码库Mesa是一个纯基于软件的图形API,它的代码兼容于OpenGL。但是,由于许可证的原因,它只声称是一个"非常相似"的API。

OpenGL规范描述了绘制2D和3D图形的抽象API。尽管这些API可以完全通过软件实现(CPU),但它是为大部分或者全部使用硬件加速(GPU)而设计的。

OpenGL规范由1992年成立的OpenGL架构评审委员会(ARB)维护。ARB由一些对创建一个统一的、普遍可用的API特别感兴趣的公司组成。根据OpenGL官方网站,2002年6月的ARB投票成员包括3Dlabs、Apple Computer、ATI Technologies、Dell Computer、Evans & Sutherland、Hewlett-Packard、IBM、Intel、Matrox、NVIDIA、SGI和Sun Microsystems,Microsoft曾是创立成员之一,但已于2003年3月退出。

Direct3D

Direct 3D(简称:D3D)是基于微软的通用对象模式COM(Common Object Mode)的3D图形API。它是由微软(Microsoft)一手树立的3D API规范,微软公司拥有该库版权,它所有的语法定义包含在微软提供的程序开发组件的帮助文件、源代码中。Direct3D是微软公司DirectX SDK集成开发包中的重要部分,适合多媒体、娱乐、即时3D动画等广泛和实用的3D图形计算。自1996年发布以来,Direct3D以其良好的硬件兼容性和友好的编程方式很快得到了广泛的认可,现在几乎所有的具有3D图形加速的主流显示卡都对Direct3D提供良好的支持。但它也有缺陷,由于是以COM接口形式提供的,所以较为复杂,稳定性差,另外,目前只在Windows平台上可用。

GPU

图形处理器(英语:Graphics Processing Unit,缩写:GPU),又称显示核心、视觉处理器、显示芯片,是一种专门在个人电脑、工作站、游戏机和一些[动设备(如平板电脑、智能手机等)上图像运算工作的微处理器。

用途是将计算机系统所需要的显示信息进行转换驱动,并向显示器提供行扫描信号,控制显示器的正确显示,是连接显示器和个人电脑主板的重要元件,也是"人机对话"的重要设备之一。显卡作为电脑主机里的一个重要组成部分,承担输出显示图形的任务,对于从事专业图形设计的人来说显卡非常重要。

显卡的处理器称为图形处理器(GPU),它是显卡的"心脏",与CPU类似,只不过GPU是专为执行复杂的数学和几何计算而设计的,这些计算是图形渲染所必需的。某些最快速的GPU集成的晶体管数甚至超过了普通CPU。

时下的GPU多数拥有2D或3D图形加速功能。如果CPU想画一个二维图形,只需要发个指令给GPU,如"在坐标位置(x, y)处画个长和宽为a×b大小的长方形",GPU就可以迅速计算出该图形的所有像素,并在显示器上指定位置画出相应的图形,画完后就通知CPU “我画完了”,然后等待CPU发出下一条图形指令。

有了GPU,CPU就从图形处理的任务中解放出来,可以执行其他更多的系统任务,这样可以大大提高计算机的整体性能。

GPU会产生大量热量,所以它的上方通常安装有散热器或风扇。

图形处理器又名显示处理器。图形处理器是显示卡的"心脏",也就相当于CPU在电脑中的作用,它决定了该显卡的档次和大部分性能,同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力,称为"软加速"。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内,也即所谓的"硬件加速"功能。显示芯片通常是显示卡上最大的芯片(也是引脚最多的)。时下市场上的显卡大多采用NVIDIA和AMD两家公司的图形处理芯片。

NVIDIA公司在1999年发布GeForce256图形处理芯片时首先提出GPU的概念。GPU使显卡减少了对CPU的依赖,并进行部分原本CPU的工作,尤其是在3D图形处理时。GPU所采用的核心技术有硬体T&L、立方环境材质贴图和顶点混合、纹理压缩和凹凸映射贴图、双重纹理四像素256位渲染引擎等,而硬体T&L技术可以说是GPU的标志。

GPU能够从硬件上支持T&L(Transform and Lighting,多边形转换与光源处理)的显示芯片,因为T&L是3D渲染中的一个重要部分,其作用是计算多边形的3D位置和处理动态光线效果,也可以称为"几何处理"。一个好的T&L单元,可以提供细致的3D物体和高级的光线特效;只不过大多数PC中,T&L的大部分运算是交由CPU处理的(这就也就是所谓的软件T&L),由于CPU的任务繁多,除了T&L之外,还要做内存管理、输入响应等非3D图形处理工作,因此在实际运算的时候性能会大打折扣,常常出现显卡等待CPU数据的情况,其运算速度远跟不上今天复杂三维游戏的要求。即使CPU的工作频率超过1GHz或更高,对它的帮助也不大,由于这是PC本身设计造成的问题,与CPU的速度无太大关系。

WebGL

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

教程:http://www.yanhuangxueyuan.com/WebGL

Three.js

three.js是JavaScript编写的WebGL第三方库,是对WebGL的封装,提供了非常多的3D显示功能,因为完全使用WebGL来实现3D效果还是挺麻烦的,开发效率不高。

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

Canvas

HTML的Canvas元素提供了2D和3D绘图两种功能,平时程序员之间交流所说的Canvas一词就是指Canvas的2D绘图功能,而通过Canvas元素实现的3D绘图功能,也就是所谓的WebGL,或者说WebGL依赖于Canvas元素实现。

执行canvas.getContext('2d')返回对象具有一系列绘制二维图形的方法,比如绘制直线、圆弧等API。

执行canvas.getContext('webgl')返回的对象就是WebGL的对象。

教程:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

着色器语言 GLSL ES

对于前端工程来说学习WebGL,还需要学习一门新的语言着色器语言GLSL ES。

着色器语言用于计算机图形编程,运行在GPU中,平时所说的大多数语言编写的程序都是运行在CPU中。 与OpenGL API相配合的是着色器语言GLSL,与OpenGL ES API、WebGL API相互配合的是着色器语言GLSL ES。OpenGL标准应用的是客户端,OpenGL ES应用的是移动端,WebGL标准应用的是浏览器平台。

CSS3D

严格来说,CSS3D不是3D渲染的,而是完全利用CPU来运算,最终呈现一个类似3D的效果,没有利用到GPU,这使得其性能是个严重的问题,不推荐使用。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4879.html
标签
3d
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!