GCanvas 渲染引擎介绍

2017/07/31 · HTML5 ·
Canvas

最初的作品出处: 天猫前端团队(FED)-
韦青   

图片 1

GCanvas 提供了一套类似于 H5 Canvas 规范的 JavaScript API。基于这套 API
能够方便的去做图形绘制、动画渲染等,开荒的体验与 H5 Canvas
是全然一致的。

GCanvas 介绍

GCanvas发展经历了三个阶段。

  • 率先等第,二零一四 年中到 2016 年终,解决 Android 平台 WebView Canvas
    渲染品质差的题材。
  • 其次等第,二〇一六 年 11 月到明天,为前端提供 Native 图形绘制能力。

用一句话来总结 GCanvas,即依照 W3C
标准,移动端的跨平台的高品质图形渲染引擎。能够从七个方面来解释。

  • 遵循 W3C 标准
    GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript
    API,开荒人士基于那套 API
    能够方便的去做图形绘制、动画渲染等。开垦的经验与 H5 Canvas
    是完全同样的。
  • 跨平台
    GCanvas 的基石基于 OpenGL ES, 用 C++ 实现了一套用于描述 Canvas 规范API
    的接口完毕。大家将其誉为渲染引擎内核。并透过交叉编写翻译,使得能够适配
    Android、iOS 这两大主流移动平台,因此具备跨平台的特征。
  • 高性能
    中期移动平台上 H5 Canvas 去做一些复杂的卡通片或嬉戏,在 WebView
    上的体验十分差。 主因是 WebView 对 GPU
    硬件加快的支撑差。高品质则是足够利用了 GPU
    硬件的渲染技能,主要彰显三个方面:

    • 对此 Android 3.0 在此在此之前的体系,Android
      的渲染管线是不支持硬件加速的,WebView 中的 Canvas 不可能获得 GPU
      的图样渲染技巧的支撑。对于那类系统,通过 GCanvas
      能够获得更底层的 OpenGL ES 的硬件加快技术提升渲染效用。
    • 链路上来看,减弱了调用路线,进步了渲染品质。使用了 GCanvas
      则不必要经过 WebView 内部的复杂逻辑管理和图层树渲染,而是让
      JavaScript 通过桥接方式一向调用渲染引擎内核(OpenGL ES)。

GCanvas 组成

图片 2

如上海教室所示 GCanvas 由三层组成 JavaScript 层、插件层、大旨渲染库。

  • JavaScript 层
    JavaScript 提供对外统一的 API,扶助 Canvas 2D 和 WebGL
    的效招待口。接口援助情形请参照他事他说加以考察 API
    覆盖。
  • 插件层
    基于这套 API。插件层大旨包涵三局部。

    • 基于这套 API。Bridge 桥接
      JavaScript 到 Native 的桥接,相比主流的形式 JSBridge 和
      JSBinding。JSBridge 完毕格局,如 Cordva、WebviewJavascriptBridge
      等。 还是能够用 JSBinding 情势来促成,如 V8、JavascriptCore
      等。实际的运用场景中那二种桥接方式都有协理。
    • 通用插件
      通用插件包罗了通用插件接口与贯彻、GCanvas
      的军管、渲染命令队列管理、纹理缓存等。帮忙分化连串桥接格局下的扩大。
    • 系统适配
      系统适配涉及 Android 和 iOS 对 OpenGL ES
      完结的区别,互联网图片下载,字体渲染等方面。
  • 主干渲染库
    基本渲染库包含对外统一的接口,以及 Contex2D 和 WebGL
    模块,底层则是对 OpenGL ES API 等分装。

GCanvas 流程

图片 3

上海教室是 JavaScript 层渲染焦点库的差不离流程,关键的八个流程是初阶化和渲染。

  • 初始化
    开首化,JavaSript
    层获取配置剖断运营意况,通过桥接层,插件层完结视图和 GCanvas
    的创导。进一步变成对 OpenGL 境况的初阶化。
  • 基于这套 API。渲染
    渲染,JavaScript
    层将有所的API调用托管,并且转变来自定义的命令格式(命令类型 +
    参数的咬合)。渲染触发则由 JavaScript
    机械漏刻触发或然手动触发的不二等秘书诀,将这么些命令颁发到渲染核心库施行。

基于这套 API。以 Weex 为例, 绘制图形和图表的测量试验代码如下。

JavaScript

<template> <div ref=”test”> <gcanvas ref=”canvas_holder”
style=”width:750; height:750; background-color:rgba(0, 0, 0,
0.1)”></gcanvas> </div> </template> <script>
var GCanvas=require(‘weex-gcanvas’); var
Image=require(‘weex-gcanvas/gcanvasimage’); module.exports = { mounted:
function () { //1、初始化 GCanvas var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref); var ctx = gcanvas.getContext(‘2d’);
//2、实施渲染操作 //rect ctx.fillStyle = ‘red’; ctx.fillRect(0, 0, 100,
100); //rect ctx.fillStyle = ‘black’; ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5); //circle ctx.arc(450, 200, 100, 0,
Math.PI * 2, true); ctx.fill(); //drawImage var image = new Image();
image.onload = function(){ ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75); } image.src =
”;
} }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
<div ref="test">
<gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas>
</div>
</template>
<script>
var GCanvas=require(‘weex-gcanvas’);
var Image=require(‘weex-gcanvas/gcanvasimage’);
module.exports = {
mounted: function () {
  
  //1、初始化 GCanvas
var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref);
var ctx = gcanvas.getContext(‘2d’);
//2、执行渲染操作
//rect
ctx.fillStyle = ‘red’;
ctx.fillRect(0, 0, 100, 100);
 
//rect
ctx.fillStyle = ‘black’;
ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5);
 
//circle
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
ctx.fill();
 
//drawImage
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = ‘https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png’;
}
};
</script>

因而 Weex Playground 运维结果如下

图片 4

具体深入分析下整个流程。结合插件层和宗旨渲染库来分析。

  • 插件层流程
    以 iOS 为例剖析,Android 的进度是近似的。

    • GLKView 视图成立,并且与 GCanvas 对象创建绑定关系;
    • GCVCommon,能源加载与纹理绑定;
    • GCanvasPlugin,设置任务消息、设备比率、下发渲染命令;
  • 渲染库流程

图片 5

渲染命令的辨析,最后经过调用 OpenGL ES 的主意或结成措施来实现 Context2D
和 WebGL 的功能,生成帧缓存,提交给 GPU 渲染,最终在绑定的 GLKView
视图上显示。

  • Context2D,需求贯彻诸如 GPath、GTexture、GTransform、GTriangulate
    等来兑现 Canvas 的渲染效果;
  • WebGL 相对简便易行,WebGL1.0 的 API 基本都能与从 OpenGL ES2.0
    找到与之相呼应的 API;

GCanvas 测量试验例子

下边给出一些 GCanvas 的案例。

  • GCanvas 与 H5 Canvas 质量相比

图片 6

  • Android 平台,左边是 GCanvas,左边是 H5
    Canvas。同屏渲染图片越来越多,品质差别越驾驭。
  • Hilo 2D
    100
    条鱼基于
    Hilo 2D 动画库,满屏鱼的动画测量检验。
  • Chart Logo渲染
    Chart
    Logo库的渲染效果依据图表库,不相同品类的图形渲染测量试验。

附:GCanvas API 扶助情况

末尾附上 GCanvas Contex2D 和 WebGLAPI
的辅助列表,协助常用的接口。其余,WebGL 的 API
近些日子正值做补全开荒,后续会帮助 WebGL1.0 API 的全覆盖。

  • Context2D API
API名称 API类型 状态
fillStyle Attribute getter/setter Implemented
strokeStyle Attribute getter/setter Empty
shadowColor Attribute getter/setter Empty
shadowBlur Attribute getter/setter Empty
shadowOffsetX Attribute getter/setter Empty
shadowOffsetY Attribute getter/setter Empty
createLinearGradient() Method Empty
createPattern() Method Empty
createRadialGradient() Method Empty
addColorStop() Method Empty
isPointInPath() Method Empty
createEvent() Method Empty
toDataURL() Method Empty
lineCap Attribute getter/setter Implemented
lineJoin Attribute getter/setter Implemented
lineWidth Attribute getter/setter Implemented
miterLimit Attribute getter/setter Implemented
font Attribute getter/setter Implemented
textAlign Attribute getter/setter Implemented
textBaseline Attribute getter/setter Implemented
globalAlpha Attribute getter/setter Implemented
globalCompositeOperation Attribute getter/setter Implemented
rect() Method Implemented
fillRect() Method Implemented
strokeRect() Method Implemented
clearRect() Method Implemented
fill() Method Implemented
stroke() Method Implemented
beginPath() Method Implemented
moveTo() Method Implemented
closePath() Method Implemented
lineTo() Method Implemented
clip() Method Implemented
quadraticCurveTo() Method Implemented
bezierCurveTo() Method Implemented
arc() Method Implemented
arcTo() Method Implemented
scale() Method Implemented
rotate() Method Implemented
translate() Method Implemented
transform() Method Implemented
setTransform() Method Implemented
fillText() Method Implemented
strokeText() Method Implemented
measureText() Method Implemented
drawImage() Method Implemented
createImageData() Method Implemented
getImageData() Method Implemented
putImageData() Method Implemented
save() Method Implemented
restore() Method Implemented
getContext() Method Implemented
loadTexture() Method Implemented
unloadTexture() Method Implemented
resetTransform() Method Implemented
render() Method Implemented
capture() Method Implemented
resetClip() Method Implemented
  • WebGL API
API名称 API类型 状态
viewport() Method Implemented
vertexAttribPointer() Method Implemented
vertexAttrib2fv() Method Implemented
useProgram() Method Implemented
uniformMatrix4fv() Method Implemented
uniformMatrix3fv() Method Implemented
uniformMatrix2fv() Method Implemented
uniform4iv() Method Implemented
uniform4i() Method Implemented
uniform4fv() Method Implemented
uniform4f() Method Implemented
uniform3iv() Method Implemented
uniform3i() Method Implemented
uniform3fv() Method Implemented
uniform3f() Method Implemented
uniform2iv() Method Implemented
uniform2i() Method Implemented
uniform2fv() Method Implemented
uniform2f() Method Implemented
uniform1iv() Method Implemented
uniform1i() Method Implemented
uniform1fv() Method Implemented
uniform1f() Method Implemented
texParameteri() Method Implemented
texImage2D() Method Implemented
shaderSource() Method Implemented
scissor() Method Implemented
renderbufferStorage() Method Implemented
pixelStorei() Method Implemented
linkProgram() Method Implemented
lineWidth() Method Implemented
getUniformLocation() Method Implemented
getShaderParameter() Method Implemented
getAttribLocation() Method Implemented
generateMipmap() Method Implemented
frontFace() Method Implemented
framebufferTexture2D() Method Implemented
flush() Method Implemented
enableVertexAttribArray() Method Implemented
enable() Method Implemented
drawElements() Method Implemented
disableVertexAttribArray() Method Implemented
disable() Method Implemented
depthMask() Method Implemented
depthFunc() Method Implemented
deleteTexture() Method Implemented
deleteShader() Method Implemented
deleteRenderbuffer() Method Implemented
deleteProgram() Method Implemented
deleteFramebuffer() Method Implemented
deleteBuffer() Method Implemented
cullFace() Method Implemented
createTexture() Method Implemented
createShader() Method Implemented
createRenderbuffer() Method Implemented
createProgram() Method Implemented
createFramebuffer() Method Implemented
createBuffer() Method Implemented
compileShader() Method Implemented
colorMask() Method Implemented
clearStencil() Method Implemented
clearDepth() Method Implemented
clearColor() Method Implemented
clear() Method Implemented
bufferData() Method Implemented
blendFuncSeparate() Method Implemented
blendFunc() Method Implemented
blendEquationSeparate() Method Implemented
blendEquation() Method Implemented
bindRenderbuffer() Method Implemented
bindFramebuffer() Method Implemented
bindBuffer() Method Implemented
bindAttribLocation() Method Implemented
attachShader() Method Implemented
activeTexture() Method Implemented
validateProgram() Method Empty
texSubImage2D() Method Empty
texParameterf() Method Empty
stencilOpSeparate() Method Empty
stencilOp() Method Empty
stencilMaskSeparate() Method Empty
stencilMask() Method Empty
stencilFuncSeparate() Method Empty
stencilFunc() Method Empty
sampleCoverage() Method Empty
readPixels() Method Empty
polygonOffset() Method Empty
isTexture() Method Empty
isShader() Method Empty
isRenderbuffer() Method Empty
isProgram() Method Empty
isFramebuffer() Method Empty
isEnabled() Method Empty
isContextLost() Method Empty
isBuffer() Method Empty
getVertexAttribOffset() Method Empty
getVertexAttrib() Method Empty
getUniform() Method Empty
getTexParameter() Method Empty
getSupportedExtensions() Method Empty
getShaderSource() Method Empty
getShaderPrecisionFormat() Method Empty
getShaderInfoLog() Method Empty
getRenderbufferParameter() Method Empty
getProgramParameter() Method Empty
getProgramInfoLog() Method Empty
getParameter() Method Empty
getFramebufferAttachmentParameter() Method Empty
getExtension() Method Empty
getError() Method Empty
getContextAttributes() Method Empty
getBufferParameter() Method Empty
getAttachedShaders() Method Empty
getActiveUniform() Method Empty
getActiveAttrib() Method Empty
drawArrays / drawArraysInstancedANGLE() Method Empty
detachShader() Method Empty
depthRange() Method Empty
copyTexSubImage2D() Method Empty
copyTexImage2D() Method Empty
compressedTexSubImage2D() Method Empty
compressedTexImage2D() Method Empty
checkFramebufferStatus() Method Empty
bufferSubData() Method Empty
blendColor() Method Empty
bindTexture() Method Undefined
commit() Method Undefined
finish() Method Undefined
framebufferRenderbuffer() Method Undefined
hint() Method Undefined

1 赞 1 收藏
评论

图片 7

相关文章