WebGL入门教程2 - GPU基本概念和工作流水线

iefreer 发表于 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轴的方向向下。

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

possitive(8) negative(0) views10844 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 更多...