紧接上文

WebGL为不同的平台/硬件提供了统一的封装，屏蔽了OpenGL ES2.0在各平台差异。后续我们会继续谈谈OpenGL ES2.0在Android/iOS平台的更多差异。这回我们分析WebKit的源码，谈谈WebGL与Cavans不同，WebGL又多做了哪些呢，性能提升在哪里呢。

在H5中渲染机制

我们可以使用多种方式来绘制图形【本文以iOS版本的WebKit为例】DOM+CSS：为前端提供了强大图形渲染技术，门槛低上手快，对硬件要求较高。

Canvas2D：元素本身并没有绘制能力，它仅仅是2D图形的容器，必须使用脚本来完成实际的绘图任务。getContext('2d') 方法可返回一个对象CanvasRenderingContext（后续简称canvas），该对象提供了用于在画布上绘图的方法和属性，可用于在画布上绘制图片、文本、图形、颜色等，并提供常见的图形转换API，进行图片的缩放、旋转、像素再加工能力，最终通过OpenGL渲染到屏幕上。

Canvas3D：同2D一样，本身没有渲染能力，通过getContext('webgl')方法可以返回一个基于OpenGL ES2.0上下文的对象WebGLRenderingContext（后续简称webgl），通过webgl可以直接访问GPU硬件资源，对码农要求更高，优化空间更大。

2D领域Canvas VS WebGL

Canvas使用CoreGraphics渲染图像

WebKit的实现代码

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

对应GraphicsContext.cpp中的

void GraphicsContext::drawNativeImage(imagePtr, imageSize, styleColorSpace, destRect, srcRect, op, blendMode, orientation) { ······ // Flip the coords. CGContextTranslateCTM(context, 0, adjustedDestRect.height()); CGContextScaleCTM(context, 1, -1); // Adjust the color space. image = Image::imageWithColorSpace(image.get(), styleColorSpace); // Draw the image. CGContextDrawImage(context, adjustedDestRect, image.get()); CGContextRestoreGState(context); ······ }

WebGL直接使用OpenGL ES2.0渲染图片：

在《 07. WebApp2.0时代启程：倒立者赢，从CPU到GPU，一张图片的旅行 》中，这里不重新做说明了。

Canvas与WebGL的对比

CoreGraphics是运行在CPU上的图形库

它在iOS中已经深入的融合到UIView和UILayer框架中，架构图如下：

WebGL只是对OpenGL ES2.0的轻量级封装

js代码

gl.bindTexture(gl.TEXTURE_2D, texID);

在WebKit中对应于C++代码:

void GraphicsContext3D::bindTexture(GC3Denum target, Platform3DObject texture) { makeContextCurrent(); if (m_state.activeTexture == GL_TEXTURE0 && target == GL_TEXTURE_2D) m_state.boundTexture0 = texture; ::glBindTexture(target, texture); }

图形渲染WebGL完胜Canvas

CPU在RAM中处理完图片后，仍需要上传到GPU中才可以显示，同时，GPU图形渲染速度比CPU提升10倍以上。

Canvas的不可替代和WebGL的优势

Canvas提供高级的图形渲染API

直接使用DOM对象绘制图形

var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); var img = new Image() img.src = "flower.png" cxt.drawImage(img, 0, 0);

而WebGL需要负责的代码实现：

gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);

可以渲染文字

使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：JS代码为：

var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.font="20px Georgia"; ctx.fillText("Hello World!",10,50); ctx.font="30px Verdana"; // 创建渐变 var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // 用渐变填色 ctx.fillStyle=gradient; ctx.fillText("w3school.com.cn",10,90);

WebGL无此API，WebKit也是通过FreeType通过CPU来实现文字的加载与渲染。如果需要渲染文字，需要生成一个Canvas对象，在Canvas绘制完成之后，在直接渲染到WebGL空间。

高效的上下文切换

多个Canvas实例可以轻松切换，因为在CPU中他只是一个静态的Bitmap。而WebGL上线文最好只有一个，切换上线文需要更改GPU硬件管线的状态和flushbuffer，频繁的切换会消耗大量的CPU资源。

WebGL的优势

GPU的framebuffer直接push到Display

CPU需要将渲染好的内存Bitmap上传给GPU，然后通过display link到屏幕上。WebGL避免了CPU到GPU的大量的数据传输，只需要发送指令给GPU即可。

支持批量渲染

支持vertexArray和IndiceArray，多个精灵共享一张文理，只需要将vertext数据缓冲到顶点数据，通过glDrawElements可以一次批量渲染。

支持异步操作

Canvas的API每次都是同步操作，每次渲染必然同步到framebuffer中，不利于性能优化。WebGL可以自定义渲染机制和时机

下一回

我们将谈谈WebGL的纹理格式转换，也是WebGL区别于OpenGL ES2.0最大的区别。