基于WebGL的在线图像浏览器的设计与实现

(华北电力大学控制与计算机工程学院 北京 102206)

一、引言

伴随网络程序的应用频率加强，之前惯用的2D图像已经不能达到应用的要求，随之产生了3D图像交互式的网页技术。然而网页互动式3D显示技术是有缺陷的，如Java Applet需求空间大，功能差，不能实现图像硬件加速效果；插件Flash及微软银光的效果很好、很实用，但有一个需要插件实现，很难兼容平台使用的问题。

WebGL技术的应用及时地帮助处理这个难题，图纸功能标准添加了JS脚本将附带OpenGL ES2.0，使得JS脚本和OpenGL ES完美组合起来，从而实现一个硬件加速三维 html5的画布渲染功能。在线图像浏览器的设计与实现，主要是利用WebGL及其代码实现一些类似于PS中的滤镜的功能，应用于图片的处理[1]。以前利用VC对图片实现一些基本的处理：平移、缩放、百叶窗显示等。这里，我们又拓宽了一条图像处理的道路，利用WebGL，将JavaScript和OpenGL ES2.0结合在一起，实现对二维图像的处理。

二、图像显示原理

(一)Canvas2D加速原理

作为传统的 2D 绘制接口，Canvas2D 提供了丰富的功能用以绘制 2D 对象。有一套以 begin Path开始，以 close Path 结束的，基于过程的绘制接口，也有如 draw Image 等实时绘制接口，并且维持一个2D 变换矩阵和一组绘制模式，应用在当前绘制的图形上。其优势在于使用简单，开发成本低，而缺点在于绘制方式固定，无法充分利用现代图形硬件。它提供的绘制方式是以像素为基础的，并且也支持浏览器进行硬件加速。

(二)WebGL绘制原理

WebGL是一款近几年开发出的JavaScript渲染软件包。它WebGL 接口的基本功能由着色器(Shader)输入、绘制指令、状态指令四部分组成。为了完成一次基本绘制，首先需要初始化着色器，包括编译着色器，得到着色器内各个输入的地址等。着色器是将要运行在GPU上的小程序，分为顶点着色器(Vertex Shader)和片段着色器(FragmentShader)，顶点着色器负责将输入的顶点信息转化为顶点在屏幕上的位置，并且可以计算一些顶点的属性[2]。光栅化操作依据绘制的图元，将屏幕上的顶点数组填充成三角形等区域，同时可以考虑遮挡关系，并且自动对三角形的顶点信息插值，将得到的像素则交给片段着色器。片段着色器依据得到像素的各个属性，计算像素最终的颜色[3]。

三、浏览系统分析

(一)WebGL技术与架构

脚本，WebGL技术的核心，也就是着色器，用来定义图形的每个像素点怎样展现在显示器上。WebGL的滤光镜分为两类：顶点和片段滤光镜。顶点滤光镜职责是确定位置坐标；片段滤光镜职责是规定此处的色彩[3]。顶点滤光镜的基本任务是进行转换，也就是把点从三维模型转换成二维屏幕上的坐标。片段滤光镜的基本任务是通知WebGL，模型的某个特定的点应该要渲染哪种颜色。

(二)基于 WebGL-DMA的贴图绘制

由于图像选2D贴图对象常以中心点、旋转、缩放、纹理映射为主要属性，根据具体应用中贴图的属性的活跃程度，可以设计特定的Shader[4]。文本使用的Shader的顶点属性输入为位置、偏移、纹理、颜色和旋转，其中位置为该顶点所属贴图的中心位置，偏移为顶点相对于中心位置的偏移量，而旋转是贴图的旋转角度。由Java Script定义一段顶点着色器程序的字符串，生成并且编译成一段着色器程序传递给GPU。顶点着色器利用位置、偏移和旋转计算出该顶点的实际位置，可以减少Java Script端的计算量。

四、图像浏览设计

(一)特效处理库应用

此系统应用多个特效处理库，其中最主要的一个是Glfx.js，可以利用它在浏览器中实时地调整图片。它通过作用于显卡，以达到对图像产生效果的目的。单单用JavaScript编辑是不可能实现实时调整图像的效果的。对于使用glfx.js是有两点附加说明需要注意的。第一，WebGL并非所有浏览器可以适用它，等到所有用户可以使用它，需要经过一段相当长的发展期。第二，基于同源的政策，JavaScript只允许读取某些符合特定标准的图片，这些图像必须满足来自同一个域的脚本[5]。

(二)着色器功能实现

对于画布对象来说，所有的着色器都是一种作用方法，它们将会修改当前画布上呈现的图像。在使用一个着色器之前，需要在当前的画布上draw()绘制出纹理[6]。基于效率等因素，当每次着色器应用时，内部的图像缓存不会每次都呈现在屏幕上。当完成了某个过滤器的调用，并且能够看到图像效果之后，必须在画布上主动应用update()刷新页面，以保证下一个着色器的正常使用。调整区域应用canvas.curves(red,green,blue);函数，这是一个功能十分强大的映射工具，它可以通过调用任何一个函数来实现对图像上的颜色的转换。这个函数其实是一个样条函数，并且是由函数插值之间的一组二维点组成的[7][8]。曲线滤波器可以拾取一个或三个参数，并且分别应用这些映射到亮度或者RGB数值上。