基于可编程GPU的光照模型实验案例设计
2019-11-28谢伙生陆泽萍
谢伙生，林 晶，陆泽萍
基于可编程GPU的光照模型实验案例设计
谢伙生1,2，林 晶1,2，陆泽萍1,2
（1. 福州大学 数学与计算机科学学院，福建 福州 350116；2. 福州大学 网络信息安全与计算机技术国家级实验教学示范中心，福建 福州 350116）
为了更好地适应新工科建设，培养学生解决复杂图形系统工程问题的能力，探讨基于可编程GPU的自顶向下、案例驱动的计算机图形学实验教学框架，设计了基于可编程GPU复杂场景光照渲染的实验案例，总结了该框架下的案例教学实施过程与方法。实践效果表明该方法提升了学生使用图形库开发图形工程的实践能力，对提高学生的兴趣和改善教学质量有明显的促进作用。
计算机图形学；光照模型；可编程GPU；实验教学
计算机图形学是研究图形的计算机生成、处理和显示的学科，并且越来越呈现出多元化和学科交叉的特点，被广泛应用于工业设计、用户界面、科学计算可视化、数字娱乐、虚拟现实等领域[1]。国内许多高校将“计算机图形学”列为计算机及其相关专业的核心课程。
“计算机图形学”也是高校一门理论教学与实践环节紧密联系且重要的课程。目前国内大部分图形学教材都是基于C/C++语言平台、从底层算法（如绘制线段）开始编写的，与学生实际直接接触的图形应用程序脱节，教材的理论性强、教学难度大。另外，教材内容少有涉及学科前沿的研究动态，不利于开阔学生的视野、激发学生自主学习的兴趣和意识。近年来，许多高校对计算机图形学的教学框架、教学内容、教学方法、融合新技术的教学手段进行了改革[2-7]。
本文采用基于可编程GPU的自顶向下方法和WebGL技术，从整体框架[8]（图形绘制系统的体系结构）导入课程案例，用底层的算法进行复杂场景光照渲染的实验案例设计，其内容涉及计算机图形学综合实验课程的多个知识点。
1 实验案例关键技术
1.1 可编程GPU绘制流水线
随着图形处理单元（graphics processing unit，GPU）技术的发展，迫切需要将基于可编程GPU绘制流水线及面向着色器编程的新型教学模式引入计算机图形学课程中，以提高计算机图形学课程的教学质量与教学效果。OpenGL是大多数传统图形学实验课使用的标准图形库。自OpenGL2.0以来，OpenGL增加了着色器语言，允许程序员编写自己的着色器来充分利用GPU性能。随着移动智能设备和互联网的广泛应用，陆续衍生出OpenGL的变体——OpenGL ES 2.0和WebGL。WebGL是用JavaScript实现的OpenGL ES 2.0，是为在Web浏览器上工作而专门开发的。利用WebGL编写图形应用程序不需要额外的浏览器插件支持，可以通过JavaScript脚本实现Web交互式三维图形制作程序的设计与实现，并利用可编程GPU的加速功能进行图形渲染，不仅可以在用户端浏览器上流畅地展示3D模型和场景，也可以在移动设备上的浏览器显示[9]。
由于GPU具有高并行结构性，所以GPU在处理图形数据和复杂算法方面拥有比CPU更高的效率，专用于图形处理。可编程GPU的流水线如图1所示，其中顶点着色器和片元着色器两个阶段是流水线中的可编程部分。
图1 可编程GPU绘制流水线
顶点着色器接收的是从CPU端传送的顶点相关数据（如顶点位置、颜色、法线等），每个顶点数据输入时都会调用一次顶点着色器，顶点着色器主要完成的工作是坐标变换和逐顶点光照计算，并输出后续阶段需要的数据。
片元着色器输入的是图元装配和光栅化阶段对顶点信息插值得到的结果。其中图元装配过程是将经过顶点着色器处理后输出的顶点装配成几何图形；光栅化过程是将装配好的几何图形分解成像素大小的片元。片元着色器可以完成很多重要的渲染技术：逐像素计算颜色和纹理坐标、应用纹理、雾化计算、逐像素光照、计算法线。这一阶段的输出是一个或者多个颜色值，经过混合操作得到最后渲染的颜色值。
1.2 光照原理
当物体被光线照射时会反射一部分光，物体因为这些反射光而可见。物体的反射光强与光源位置、物体表面的法向以及物体材质有关。为了使光照计算简便，也便于学生理解，以简单的光照模型为案例。该模型由环境反射光、漫反射光和镜面反射光叠加而成，可以表示为
图2 光照反射模型
2 实验案例基本环境和场景构建
WebGL应用程序包括3种语言：HTML5、JavaScript和OpenGL着色器语言。着色器语言通常以字符串的形式内嵌在JavaScript中，所以WebGL程序只需由HTML文件和JavaScript文件组成。HTML5文件用于描述一个文档或者Web页面，文件包含标签和数据，标签表示诸如文本、图像和布局信息等各种元素的开始和结束，如JavaScript程序和着色器都是在结束标签之间描述的页面元素。HTML5引入的
在编写WebGL应用程序前，先构建一个较复杂的场景。该案例场景包含一个二维平面模拟地面、设置几个几何实体用来观察光照效果，用一个小球来模拟光源。场景的几何体较多，采用AJAX+JSON方式从文件中加载几何体[10]，具体加载过程如图3所示。
图3 AJAX异步加载文件过程
3 光照模型实现
光照模型的实现就是根据光照条件重建物体表面的明暗现象，这一过程在三维图形学中称为着色，是由可编程GPU流水线中的着色器来实现的。在实现简单光照模型前，GPU端要接收数据，将其从CPU端发送到着色器中。
3.1 从CPU端发送数据到GPU端
在WebGL渲染管线中将数据从CPU端传到GPU端，其中attribute、uniform和varying变量是在着色器编程中比较常见的变量类型，通过这3种变量可以进行数据的传输[11]，如图4所示。
图4 WebGL渲染管线数据的传输
varying变量用于将数据从顶点着色器传向片元着色器。只要在顶点着色器和片元着色器中同时声明同名的varying变量，那么该变量的数据就会由这个变量从顶点着色器流向片元着色器。uniform变量服务于顶点着色器和片元着色器，包含的是“一致”的数据，即数据在渲染周期内保持不变，如光源的位置。attribute变量只能作为顶点着色器中的输入变量，用来表示顶点的信息，如顶点坐标、颜色等。
使用attribute变量传送数值，包含以下几个关键步骤：
（1）在顶点着色器中声明attribute变量：
attribute vec4 a_Position；
（2）在JavaScript程序中获取attribute变量存储地址，并存放在变量a_Position里，gl是WebGL上下文，包含所有WebGL函数及参数；getAttribLocation第一个参数是初始化着色器后得到的程序对象，第二个参数是在顶点着色器中声明的attribute变量名：
var a_Position=gl.getAttribLocation (gl.program, ‘a_ Position’)；
（3）向attribute变量赋值，vertexAttrib4f的第一个参数是上一步骤获取的变量地址，后面4个参数是要传送数据的4个分量，还有其他同族函数：
gl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 0.0)。
使用uniform变量传送数值与attribute变量类似，包含以下几个步骤：
（1）声明变量：
uniform vec4 u_FragColor;
（2）获取变量地址：
var u_FragColor=gl.getUniformLocation (gl.program, ‘u_FragColor’);
（3）向变量传送数据：
gl.uniform4f (u_FragColor, 1.0, 1.0, 1.0 1.0)。
以上方式一次只能向attribute变量传送一个顶点的相关数据，而绘制多边形图形时需要一次性传送多个顶点数据，因而要利用WebGL提供的缓冲区对象机制进行传送。图5显示了使用顶点缓冲区对象传输数据的5个步骤：（1）创建缓冲区对象（createBuffer）；（2）绑定缓冲区对象（bindBuffer）；（3）将数据写入缓冲区对象（bufferData）；（4）将缓冲区对象分配给一个attribute变量（vertexAttriPointer）；（5）开启attribute变量（enableVertexArray）。其中各步骤所用函数的具体使用规范可参见文献[12]。索引缓冲区对象（IBO）由前3个步骤创建，根据缓冲区中的索引值直接抽取顶点的相关数据。
3.2 光照计算
准备好光照模型所需的数据后，就可以进行光照计算。可以选择在程序的不同地方进行计算——CPU中、顶点着色器中或者片元着色器中。
3.2.1 在CPU中实现
在CPU中进行光照计算，得到每个顶点的环境光反射分量、漫反射分量和镜面反射分量3项之和，将结果传送给着色器进行渲染处理。这种方式，当场景中物体发生变化时（例如旋转），则光照情况发生变化，需要在CPU中重新完成所有光照计算，并再一次传送给着色器。当需要处理大量数据时，这种方式是低效的。因此，通常选择在着色器中进行光照计算。
图5 使用缓冲区对象传输数组的5个步骤
3.2.2 在顶点着色器中实现
将式（1）中必要的数据发送到顶点着色器，对所有顶点保持一致的数据用uniform变量来发送，其余数据可以作为顶点属性用attribute变量发送。顶点着色器的输出是光照模型的3个分量之和，通过varying变量传送给片元着色器，得到逐顶点插值后的颜色值。
uniform vec4 uAmbientProduct；
uniform vec4 uDiffuseProduct；
uniform vec4 uSpecularProduct；
得到环境光反射分量ambient为：
ambient = uAmbientProduct；
漫反射中需要单位法向量：
vec3 N = normalize (aNormal.xyz);
光源单位方向向量：
vec3 L = normalize (lightPosition-vertexPosition). xyz;
得到漫反射分量diffuse为：
diffuse = max (dot(L, N), 0)*uDiffuseProduct;
同样，镜面反射需要观察者单位方向向量，因为视点位于坐标系原点，所以
vec3 E = normalize (vertexPosition);
反射光单位方向为：
vec3 R = reflect (-L, N);
得到镜面反射分量specular为：
specular = pow (max(dot(R, E), 0.0), uShininess);
最终3个分量和为：
vFinalColor = ambient + diffuse + specular;
vFinalColor.a = 1.0;
3.2.3 在片元着色器中实现
不论是在WebGL应用程序代码中，还是在顶点着色器中执行光照计算，光栅化模块逐顶点插值得到片元颜色；而片元着色器是进行逐片元处理过程的程序，基于每个片元进行光照计算。片元着色器需要来自光栅化模块（从顶点着色器传送过来）的数据有：插值后的法向量、光源位置和视点位置，通过varying变量将这3个变量从顶点着色器发送给片元着色器。除此外，光照计算代码部分与顶点着色器中的相同。
图6是在顶点着色器与片元着色器中的光照模型效果图。可以看出：立方体在图6（a）基于逐顶点的光照计算下，正面两个三角形的接缝处十分明显，而图6（b）基于片元的光照就避免了这种情况，比较接近真实光照情况。同样，球体在片元着色器中计算光照，着色更平滑、高亮区域更集中。
图6 光照模型的效果
4 交互界面设计
图7 光照模型实现的交互界面
5 实验案例教学实施
5.1 实验案例的教学组织
在基于可编程GPU的自顶向下、案例驱动的教学框架下实施了光照模型实验的案例教学。本案例课时为8学时，包括多个知识点：可编程GPU绘制流水线（1学时）、光照模型介绍（1学时）、着色器编程之数据传送模块（2学时）、光照实现模块（3学时）、交互模块（1学时）。在实验过程中，由于学生初次学习着色器复杂的编程，且没有很好的调试工具，或不能很好地理解着色器概念。所以课上要讲解清楚着色器语言的一些基本概念，对关键内容需多次强调。该实验案例实现的是一个简单的光照模型，要求学生在程序的不同地方实现光照计算，并且鼓励学生参考教材、互联网上资料对其进行拓展，设计更为复杂的光照模型。
5.2 实验教学效果
“计算机图形学”课程在我校已面向本科三年级计算机类专业学生开设多年，先后选用《交互式计算机图形学：基于OpenGL的自顶向下方法》的第4版（固定流水线）、第5版（可编程流水线、着色器编程）和最新的《交互式计算机图形学：基于WebGL的自顶向下方法》，利用WebGL技术在浏览器上直接实现三维图形的绘制。WebGL的选择更好地与国际计算机图形学教育及科研实践接轨，免去了编程环境配置的麻烦，也更适合课程的讲授。开设此课程的1个班级50名学生都很好地完成了该课程的学习，取得了非常好的学习效果。
6 结语
基于可编程GPU的光照模型实验案例可以运行在当前大多数Web浏览器上，实际运用在计算机图形学实践课程的教学上，取得了较好的教学效果。基于自顶向下的实验教学框架教学实施，一方面使学生能直观地深入理解图形学理论的算法原理，了解计算机图形软硬件系统基本架构，培养学生基于现代化GPU的可编程计算思维；另一方面将图形学理论与实际图形工程开发相结合，提高了学生学习热情，提升了学生使用图形库开发图形工程、解决复杂图形系统工程问题的能力。
[1] 刘永进. 中国计算机图形学研究进展[J]. 科技导报，2016, 34(14): 76–85.
[2] 李丹，袁凌，胡迎松，等.面向游戏开发的计算机图形学立体化实践教学框架研究[J].实验技术与管理，2015, 32(7): 202–205.
[3] 黄晓生，曹义亲.多模态学习理论在“计算机图形学”实验教学中的应用[J].实验技术与管理，2012, 29(4): 162–165.
[4] 宋春霖，杨金龙，袁运浩.计算机图形学教学改革与探讨[J].教育教学论坛，2015(49): 152–153.
[5] 赵明.计算机图形学“MOOC+翻转课堂”教学实践及效果[J].高教探索，2016(增刊1): 54–55.
[6] 高雪瑶，张春祥.基于翻转课堂的计算机图形学教学模式研究[J].计算机教育，2017(1): 113–116.
[7] 赵君峤，王小平，李光耀，等.面向国际工程教育认证的计算机图形学课程设计及其中外案例分析[J].计算机应用与软件，2017, 34(10): 143–148.
[8] ANGEL E, SHREINER D.交互式计算机图形学：基于WebGL的自顶向下方法[M].张荣华，姜丽梅，邵绪强，等译. 7版.北京：电子工业出版社，2016.
[9] ANGEL E. The Case for Teaching Computer Graphics with WebGL: A 25-Year Perspective[J]. IEEE Computer Graphics & Applications, 2017, 37(2): 106–112.
[10] CANTOR D, JONES B. WebGL编程指南[M].李强，译.北京：清华大学出版社，2013.
[11] MATSUDA K, LEA R. WebGL programming guide: Interactive 3D graphics programming with WebGL[M]. Addison- Wesley Professional, 2013.
[12] BAILEY M, CUNNINGHAM S.图形着色器：理论与实践[M].刘鹏，译. 2版.北京：清华大学出版社，2013.
Design of illumination model experiment case based on programmable GPU
XIE Huosheng1,2, LIN Jing1,2, LU Zeping1,2
(1. College of Mathematics and Computer Science, Fuzhou University, Fuzhou 350116, China; 2. National Experimental Teaching Demonstration Center of Network Information Security and Computer Technology, Fuzhou University, Fuzhou 350116, China)
In order to better adapt to new engineering construction and cultivate students’ ability to solve complex graphic system engineering problems, the top-down and case-driven computer graphics experimental teaching framework based on programmable GPU is discussed and analyzed. The experiment cases of illumination rendering of complex scenes based on programmable GPU are designed, and the implementation process and method of case teaching under the framework are summarized. The practical results show that this method improves students’ practical ability to develop graphic engineering with the graphics library, and has a significant promoting effect on improving students’ interest and teaching quality.
computer graphics; illumination model; programmable GPU; experimental teaching
TP391.4; G642
A
1002-4956(2019)11-0128-05
10.16791/j.cnki.sjg.2019.11.031
2018-12-04
谢伙生（1964—），男，福建宁化，硕士，副教授，主要研究方向为数据挖掘、图形图像处理。
林晶（1989—），女，福建龙岩，硕士，实验师，主要研究方向为图像处理、模式识别。E-mail: 377676261@qq.com
