WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
在教程1中,我们已经讲述了基础的3D图形知识,接下来我们了解具体的硬件结构、GPU基本概念。
计算机图形硬件结构
如前所述,WebGL能利用硬件加速来完成绘图,计算机硬件结构如下图所示:
WebGL直接基于GPU来绘制图像,GPU利用专有的图形内存/缓存来加速渲染,帧缓存包含颜色、透明度、深度和模版掩码属性。GPU把像素写入帧缓存,显示设备从缓存中进行光栅化扫描读取,为了保持读写同步,GPU使用了双缓存(前缓存和后缓存)以及垂直同步(vSync)技术,所谓vSync就是在光栅扫描结束时给GPU发出信号,使得GPU可以置换前后缓存。
WebGL渲染工作流水线
工作流水线指的是WebGL程序的执行过程,如上图所示,主要分为4个步骤,第1步是顶点着色器的处理,主要是一组矩阵变换操作,用来把3D模型(顶点和原型)投影到Viewport上,输出是一个个多边形(比如三角形),第2步是光栅化,也就是把三角形连接区域按一定的粒度逐行转化成片段(fragement),我们可以把这些片段看做是3D空间的像素点,第3步是片段着色器的处理,为每个像素添加颜色,第4步把3D空间的片段合并输出为2D像素数组并显示在屏幕上。
顶点(Vertex)、图元(Primitives)、片段和像素
顶点不只是立体几何中的坐标点,它还包含颜色、纹理,以及表面法向量(通常是由表面向外)用来区分对象的正反面。表面法向量遵循右手规则(或逆时针旋转)。
图元(或原始对象)是一组最简单的图形元素,如点、线段和若干点的闭合连接,下面是常用的原型:
我们在后续文章中的例子中就将使用GL_TRIANGLE_STRIP来创建一个简单的矩形。
像素是二维空间数据,坐标为(x,y),然后还有颜色,用于在物理屏幕上显示。
片段是三维空间的数据,坐标为(x,y,z),x/y和2D像素相同,z表示颜色深度,合成时需要处理前后遮挡关系以及透明度的处理。除此之外,片段是顶点光栅化而来,其还包含和Vertex对象相同的属性,比如纹理。
顶点着色器的变换操作
现代GPU中,顶点处理和片段处理都是可编程的,称之为着色器(Shader)。顶点处理包括如下变换:
放置对象在3D空间中,也就是模型变换(Model Transformation)
设定相机的位置和观察方向,称之为视图变换或取景变换(View transformation)
选择相机镜头(广角,正常或可伸缩的),调整焦距和缩放系数来设定相机的视觉空间(实际就是调整视锥体范围内的某个投影截面的位置),称之为投影变换(Projection transformation),投影方式有两种:正交投影和远景投影,其中常用的是远景投影,即模拟人眼来观察真实世界中的对象,正交投影可以理解为把观察点拉到足够远,此时视觉空间将逼近为平行的长方体而不再是一个视椎体。
把相片打印到选定纸面区域,称之为视窗变换(Viewport transformation),这一步是在光栅化的时候执行的,注意Viewport实际对应于屏幕Web应用程序的窗口,其坐标原点是在左上角,y轴的方向向下。
我们这里主要讲解概念,不列出实际的变换矩阵和公式,想了解细节的请参考计算机图形学教程相关章节。
在接下来的教程中我们将说明如何具体编写WebGL的应用程序。
最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...使用HTML5 Canvas实现的界面元素截屏功能
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...