11. Html5的局：从CPU到GPU，底层技术的变化

最新推荐文章于 2024-04-27 22:23:55 发布

weixin_33909059

最新推荐文章于 2024-04-27 22:23:55 发布

阅读量559

点赞数 1

文章标签：前端移动开发 c/c++ ViewUI

原文链接：https://yq.aliyun.com/articles/62338

版权

紧接上文

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框架中，架构图如下：
screenshot

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倍以上。
screenshot

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"：
screenshot
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空间。