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的应用程序。
(31)
28343
CDbException
CDbCommand 无法执行 SQL 语句: SQLSTATE[HY000]: General error: 2006 MySQL server has gone away
| 程序日志 | ||||
|---|---|---|---|---|
| 时间 | 等级 | 类别 | 信息 | |
| 22:33:09.148124 | error | system.db.CDbCommand | CDbCommand::fetchColumn() failed: SQLSTATE[HY000]: General error: 2006 MySQL server has gone away. The SQL statement executed was: SELECT COUNT(*) FROM `comments` `t` JOIN news_articles_comments cm ON t.id = cm.commentId WHERE cm.articleId=:pk. Bound with :pk='119'. |
|
| 22:33:09.199954 | error | exception.CDbException | CDbException: CDbCommand 无法执行 SQL 语句: SQLSTATE[HY000]: General
error: 2006 MySQL server has gone away in
/home/www/sites/framework/db/CDbCommand.php:541
Stack trace:
#0 /home/www/sites/framework/db/CDbCommand.php(432):
CDbCommand->queryInternal('fetchColumn', 0, Array)
#1 /home/www/sites/framework/db/ar/CActiveRecord.php(1546):
CDbCommand->queryScalar()
#2
/home/www/sites/techbrood/protected/modules/Social/behaviors/CommentableBehavior.php(134):
CActiveRecord->count(Object(CDbCriteria))
#3 /home/www/sites/framework/base/CComponent.php(260):
CommentableBehavior->getCommentCount()
#4 /home/www/sites/framework/db/ar/CActiveRecord.php(225):
CComponent->__call('getCommentCount', Array)
#5
/home/www/sites/techbrood/themes/techbrood/widgets/News/ArticleDetails.php(60):
CActiveRecord->__call('getCommentCount', Array)
#6 /home/www/sites/framework/web/CBaseController.php(126):
require('/home/www/sites...')
#7 /home/www/sites/framework/web/CBaseController.php(95):
CBaseController->renderInternal('/home/www/sites...', Array, true)
#8 /home/www/sites/framework/web/widgets/CWidget.php(243):
CBaseController->renderFile('/home/www/sites...', Array, true)
#9 /home/www/sites/techbrood/protected/base/AppWidget.php(141):
CWidget->render('ArticleDetails', Array, true)
#10
/home/www/sites/techbrood/protected/modules/News/components/ArticleDetailsWidget.php(65):
AppWidget->render('ArticleDetails', Array)
#11
/home/www/sites/techbrood/protected/extensions/helpers/Template.php(38):
ArticleDetailsWidget->run()
#12 /home/www/sites/techbrood/themes/techbrood/views/news-details.php(7):
Template::widget('ARTICLE_DETAIL', 'application.mod...')
#13 /home/www/sites/framework/web/CBaseController.php(126):
require('/home/www/sites...')
#14 /home/www/sites/framework/web/CBaseController.php(95):
CBaseController->renderInternal('/home/www/sites...', NULL, true)
#15 /home/www/sites/framework/web/CController.php(869):
CBaseController->renderFile('/home/www/sites...', NULL, true)
#16 /home/www/sites/framework/web/CController.php(782):
CController->renderPartial('/news-details', NULL, true)
#17
/home/www/sites/techbrood/protected/controllers/CmsBaseController.php(82):
CController->render('/news-details')
#18
/home/www/sites/techbrood/protected/controllers/DefaultController.php(40):
CmsBaseController->showTemplate()
#19 /home/www/sites/framework/web/actions/CInlineAction.php(49):
DefaultController->actionIndex()
#20 /home/www/sites/framework/web/CController.php(308):
CInlineAction->runWithParams(Array)
#21 /home/www/sites/framework/web/CController.php(286):
CController->runAction(Object(CInlineAction))
#22 /home/www/sites/framework/web/CController.php(265):
CController->runActionWithFilters(Object(CInlineAction), Array)
#23 /home/www/sites/framework/web/CWebApplication.php(282):
CController->run('index')
#24 /home/www/sites/framework/web/CWebApplication.php(141):
CWebApplication->runController('default/index')
#25 /home/www/sites/framework/base/CApplication.php(168):
CWebApplication->processRequest()
#26 /home/www/sites/techbrood/index.php(31): CApplication->run()
#27 {main}
REQUEST_URI=/zh/news/webgl/webgl%25E5%2585%25A5%25E9%2597%25A8%25E6%2595%2599%25E7%25A8%258B2---gpu%25E5%259F%25BA%25E6%259C%25AC%25E6%25A6%2582%25E5%25BF%25B5%25E5%2592%258C%25E5%25B7%25A5%25E4%25BD%259C%25E6%25B5%2581%25E6%25B0%25B4%25E7%25BA%25BF.html
--- |
|