WebGL在次元秀的实践

693次阅读  |  发布于1年以前

业务介绍

半次元,一个泛二次元兴趣的社区,这里聚集了COS、绘画、三坑、条漫、唱见等领域的共同爱好者。

次元秀作为一款捏脸应用。用户可以根据自己的偏好捏制喜欢的原创动漫人物,可以把自己捏制的人物保存动态表情套图、头像、角色卡。

欢迎下载半次元体验一下次元秀,效果录屏如下:

先整体看下次元秀的基本业务流程。主体部分包括创作端和消费端:

流程图.jpg

image.png

image.png

技术挑战

次元秀的页面数有20+,其中最核心的页面是编辑器。

消费端编辑器

编辑器主要由人物预览区域素材选择区域组成。其中人物预览区域需要实现如下功能:

前端领域需要实现上述功能,只能借助Canvas。最初,基于Konva.js(一个Canvas框架,扩展了Canvas 2d上下文,提供了简易的方法用来创建几何、动画、交互等)实现了编辑器的绘制功能。核心流程如下:

Canvas 2D绘制流程

但是,测试过程发现手机一个问题:多次随机操作,或者频繁切换玩法,画布大小会失真,甚至整个页面变成空白,必须强制杀掉App。

image.png

原因分析

凭借经验,最先想到的内存溢出导致的。然后使用Safari Performance调试工具查看了下次元秀的性能数据。发现次元秀的Javascript内存占用达到几百兆。

内存占用过大,最容易想到的原因之一是图片分辨率太高了,因此,首要的是利用中台能力对图片做缩放处理,降低分辨率,

不止步于此。进一步分析Canvas 2D绘制流程,可以发现Canvas 2D实现存在两点隐患:

有什么方案,可以既减少内存消耗,又减少CPU消耗了?

解决方案

Canvas不仅可以提供2D上下文,还可以提供webgl上下文。听说WebGL适合高性能渲染,一起来看看实际效果。

WebGL是什么?

WebGL是一套图形API,使得前端可以高性能地渲染2D/3D图形。先简单了解WebGL应用是如何工作。可以把WebGL应用看成三个组成部分:

image.png

WebGL工作流

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 向gpu传递矩形的四个顶点数据
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 1, 1, 1, 1, -1, 1, -1, -1, 1, -1, -1]), gl.STATIC_DRAW);

const aLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(aLocation);
gl.vertexAttribPointer(aLocation, 2, gl.FLOAT, false, 0, 0);

WebGL有什么优势?

可以把CPU看成一个管道,计算任务需要有序地逐一完成。如果单个任务执行时间较长,或者任务数太多,就会让CPU处理效率降低。

得益于并行计算架构, GPU 处理像素计算非常快。GPU可以看成一大堆小型CPU组成,多个小型CPU可以实现并行计算,一次性可以完成多个像素的颜色计算。

image.png

摘自The book of shader

WebGL如何落地

下面详细介绍一下WebGL在次元秀编辑器绘制中使用示例。

多张透明通道的图片叠加

人物是由多张具有透明通道的图片有序叠加合成的。

图片叠加

这里就会涉及一个问题:同一个位置会存在多个像素值,最终的颜色值应该如何计算?

WebGL默认,即将写入缓冲区的颜色(source color),会覆盖已经存在于缓冲区的颜色(destination color),这样的话,最终只会显示最后绘制的内容。

开发者可以让WebGL开启混合功能,使得即将写入缓存区的颜色和已经在缓冲区的颜色通过公式计算得到新的像素,常常用于半透明内容的叠加显示。混合公式如下:

WebGL提供了方法blendFunc(sfactor: GLenum, dfactor: GLenum)指定源色的比例因子和目标色的比例因子。

图片实现叠色效果

次元秀支持图片叠加任意颜色,进一步提升作品的多样性。

image.png

叠色操作

给图片叠色,本质上也是混色,和前文图片叠加的混合过程是一致的。公式如下:

图片叠色公式中,源色混合因子是源色的透明通道分量,目标色混合因子是 常量1与源色的透明通道分量的差值。

前文我们提到片元着色器就是用来决定像素的颜色值的,因此,我们只需要用GLSL ES语言在片元着色器中实现叠色公式即可。

void main() {
   vec4 v_texture_color = texture2D(u_texture, v_textureCoord);

   float alpha_minus = 1.0 - v_rgba.a;

   float blend_r = v_rgba.r * v_rgba.a + v_texture_color.r * alpha_minus;
   float blend_g = v_rgba.g * v_rgba.a + v_texture_color.g * alpha_minus;
   float blend_b = v_rgba.b * v_rgba.a + v_texture_color.b * alpha_minus;

   gl_FragColor = vec4(blend_r, blend_g, blend_b, v_texture_color.a);
}

同步绘制多张图片

首先,看下如何绘制多张图片。在WebGL 1.0,想要绘制多张图片,一般有两种方式:

如果每次绘制都直接作用到屏幕的话,会让用户看见人物是一张张图片的绘制出来,如下视频:

这里可以使用离屏画布(不显示到屏幕上),图片先依次绘制到离屏画布,等到所有图片绘制完成,再把离屏画布绘制到屏幕画布即可。在WebGL的世界,可以用FrameBuffer实现离屏画布。

image.png

framebuffer渲染流程

数据验证

image.png

分析数据可见,相比于canvas 2D, webgl 对CPU和内存的消耗都出现大幅度地下降。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8