WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)

techbrood 发表于 2016-05-25 19:44:13

标签: webgl, 渲染, canvas, 教程, pipeline

- +

教程1中,我们已经讲述了基础的3D图形知识,接下来我们了解具体的硬件结构、GPU基本概念。

计算机图形硬件结构

如前所述,WebGL能利用硬件加速来完成绘图,计算机硬件结构如下图所示:

WebGL直接基于GPU来绘制图像,GPU利用专有的图形内存/缓存来加速渲染,帧缓存包含颜色、透明度、深度和模版掩码属性。GPU把像素写入帧缓存,显示设备从缓存中进行光栅化扫描读取,为了保持读写同步,GPU使用了双缓存(前缓存和后缓存)以及垂直同步(vSync)技术,所谓vSync就是在光栅扫描结束时给GPU发出信号,使得GPU可以置换前后缓存。

WebGL渲染工作流水线

blob.png

工作流水线指的是WebGL程序的执行过程,如上图所示,主要分为4个步骤,第1步是顶点着色器的处理,主要是一组矩阵变换操作,用来把3D模型(顶点和原型)投影到Viewport上,输出是一个个多边形(比如三角形),第2步是光栅化,也就是把三角形连接区域按一定的粒度逐行转化成片段(fragement),我们可以把这些片段看做是3D空间的像素点,第3步是片段着色器的处理,为每个像素添加颜色,第4步把3D空间的片段合并输出为2D像素数组并显示在屏幕上。

顶点(Vertex)、图元(Primitives)、片段和像素

顶点不只是立体几何中的坐标点,它还包含颜色、纹理,以及表面法向量(通常是由表面向外)用来区分对象的正反面。表面法向量遵循右手规则(或逆时针旋转)。

图元(或原始对象)是一组最简单的图形元素,如点、线段和若干点的闭合连接,下面是常用的原型:

blob.png

我们在后续文章中的例子中就将使用GL_TRIANGLE_STRIP来创建一个简单的矩形。

像素是二维空间数据,坐标为(x,y),然后还有颜色,用于在物理屏幕上显示。

片段是三维空间的数据,坐标为(x,y,z),x/y和2D像素相同,z表示颜色深度,合成时需要处理前后遮挡关系以及透明度的处理。除此之外,片段是顶点光栅化而来,其还包含和Vertex对象相同的属性,比如纹理。

顶点着色器的变换操作

现代GPU中,顶点处理和片段处理都是可编程的,称之为着色器(Shader)。顶点处理包括如下变换:

  1. 放置对象在3D空间中,也就是模型变换(Model Transformation)

  2. 设定相机的位置和观察方向,称之为视图变换或取景变换(View transformation)

  3. 选择相机镜头(广角,正常或可伸缩的),调整焦距和缩放系数来设定相机的视觉空间(实际就是调整视锥体范围内的某个投影截面的位置),称之为投影变换(Projection transformation),投影方式有两种:正交投影和远景投影,其中常用的是远景投影,即模拟人眼来观察真实世界中的对象,正交投影可以理解为把观察点拉到足够远,此时视觉空间将逼近为平行的长方体而不再是一个视椎体。

  4. 把相片打印到选定纸面区域,称之为视窗变换(Viewport transformation),这一步是在光栅化的时候执行的,注意Viewport实际对应于屏幕Web应用程序的窗口,其坐标原点是在左上角,y轴的方向向下。

我们这里主要讲解概念,不列出实际的变换矩阵和公式,想了解细节的请参考计算机图形学教程相关章节。

接下来的教程中我们将说明如何具体编写WebGL的应用程序。

possitive(31) views28461 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...