【第2962期】WebGL在次元秀的实践
前言
二次元赛道以往只是听过，今年一首极乐净土翻火了二次元。今日前端早读课文章由 @孙立想分享，公号：西瓜前端技术团队授权。
@西瓜视频前端部门，负责西瓜视频的产品研发工作。致力于分享产品内的业务实践，为业界提供经验价值。包括但不限于营销搭建、互动玩法、工程能力、稳定性、Nodejs、中后台等方向。
正文从这开始～～
业务介绍
半次元，一个泛二次元兴趣的社区，这里聚集了 COS、绘画、三坑、条漫、唱见等领域的共同爱好者。
次元秀作为一款捏脸应用。用户可以根据自己的偏好捏制喜欢的原创动漫人物，可以把自己捏制的人物保存动态表情套图、头像、角色卡。
欢迎下载半次元体验一下次元秀，效果录屏如下：
先整体看下次元秀的基本业务流程。主体部分包括创作端和消费端：
流程图
创作端，面向具有绘画创作能力的用户，提供专业领域的生产工具。每个玩法，由多个有序图层的组成，每个图层可以有多个可选的素材；
消费端，面向同好用户提供简易工具，满足用户基于 PGC 二次创作的诉求。消费者，可以通过切换素材、切换素材颜色、以及随机组合这三种行为，生产二创作品。
技术挑战
次元秀的页面数有 20+，其中最核心的页面是编辑器。
消费端编辑器
编辑器主要由人物预览区域和素材选择区域组成。其中人物预览区域需要实现如下功能：
多张图片叠加绘制（部分图片存在透明度）；
支持图片的叠色。比如给头发进行染色，提升作品的个性化；
支持整个预览效果的导出，作为作品封面使用；
支持单张图层素材的导出，作为输入提供给智创的动态表情能力；
前端领域需要实现上述功能，只能借助 Canvas。最初，基于 Konva.js（一个 Canvas 框架，扩展了 Canvas 2d 上下文，提供了简易的方法用来创建几何、动画、交互等）实现了编辑器的绘制功能。核心流程如下：
滤镜处理：通过
CanvasRenderingContext2D.drawImage()把素材图片绘制到 Canvas 上，然后通过CanvasRenderingContext2D.getImageData()方法获取图片的像素数据；然后逐一对像素进行 filter 运算，得到新的像素数据；最后通过CanvasRenderingContext2D.putImageData()绘制到中间 Canvas 上。屏幕绘制：等到所有图片处理完成之后，再把中间 canvas 拷贝到主屏幕 canvas 上。
图片导出：为了实现每个素材的导出功能，需要图片素材以独立的 Canvas 或 imageData 存在。
Canvas 2D 绘制流程
但是，测试过程发现手机一个问题：多次随机操作，或者频繁切换玩法，画布大小会失真，甚至整个页面变成空白，必须强制杀掉 App。
原因分析
凭借经验，最先想到的内存溢出导致的。然后使用 Safari Performance 调试工具查看了下次元秀的性能数据。发现次元秀的 Javascript 内存占用达到几百兆。
内存占用过大，最容易想到的原因之一是图片分辨率太高了，因此，首要的是利用中台能力对图片做缩放处理，降低分辨率，
不止步于此。进一步分析 Canvas 2D 绘制流程，可以发现 Canvas 2D 实现存在两点隐患：
需要 Javascript 在内存中保留图片的像素数据，如果一个玩法的素材较多的话（一般在 20+），会导致内存占用过多，剩余内存溢出。
对像素数据进行逐一计算是在 CPU 中完成的。一般素材大小是 750*750（支持 ios retina 屏图片高清显示），那么像素数约 56w，也就是说一个素材的滤镜计算至少需要 56 万次计算。如果再考虑到素材的数目，计算量还有几十倍的增长。因此，滤镜计算对 CPU 的消耗是不容忽视的。
有什么方案，可以既减少内存消耗，又减少 CPU 消耗了？
解决方案
Canvas 不仅可以提供 2D 上下文，还可以提供 webgl 上下文。听说 WebGL 适合高性能渲染，一起来看看实际效果。
WebGL 是什么？
WebGL 是一套图形 API，使得前端可以高性能地渲染 2D/3D 图形。先简单了解 WebGL 应用是如何工作。可以把 WebGL 应用看成三个组成部分：
WebGL 工作流
HTML Canvas：Canvas 起初由 Apple 引入作为一种渲染 2D 图形的技术，后经 Mozilla 升级使得其支持 3D 图形渲染。Canvas 作为浏览器端图形 API 的载体存在，因此，WebGL App 必须包含 HTML Canvas，通过 HTMLCanvasElement.getContext() 可以获得不同的渲染上下文。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");GLSL ES：一种类 C 语言，专门用于编写着色器程序。最常用的着色器是顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）。
// 接受javascript传递过的顶点坐标（裁剪坐标系）
const vertextSource = `
attribute vec2 a_position;
void main(void) {
gl_Position = vec4(a_position, 0, 1);
}
`; // 下面代码，定义所有的片元都是红色。
const fragmentSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0, 0, 1.0);
}
`;片元着色器：接受光栅化的片元数据，确定每个片元的像素值。
顶点着色器：主要作用是做一些矩阵变换运算。接受 javascript 传递过来的顶点数据，转换到裁剪坐标系。然后顶点数据会用来生成几何图元，再进行光栅化后传递给片元着色器。
Javascript：Javascript 负责向 GPU 渲染管线传递数据，比如着色器代码、顶点数据、纹理数据、颜色数据等。
// 向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 可以实现并行计算，一次性可以完成多个像素的颜色计算。
摘自 The book of shader
WebGL 如何落地
下面详细介绍一下 WebGL 在次元秀编辑器绘制中使用示例。
多张透明通道的图片叠加
人物是由多张具有透明通道的图片有序叠加合成的。
图片叠加
这里就会涉及一个问题：同一个位置会存在多个像素值，最终的颜色值应该如何计算？
WebGL 默认，即将写入缓冲区的颜色（source color），会覆盖已经存在于缓冲区的颜色（destination color），这样的话，最终只会显示最后绘制的内容。
开发者可以让 WebGL 开启混合功能，使得即将写入缓存区的颜色和已经在缓冲区的颜色通过公式计算得到新的像素，常常用于半透明内容的叠加显示。混合公式如下：
WebGL 提供了方法 blendFunc (sfactor: GLenum, dfactor: GLenum) 指定源色的比例因子和目标色的比例因子。
图片实现叠色效果
次元秀支持图片叠加任意颜色，进一步提升作品的多样性。
叠色操作
给图片叠色，本质上也是混色，和前文图片叠加的混合过程是一致的。公式如下：
图片叠色公式中，源色混合因子是源色的透明通道分量，目标色混合因子是 常量 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 实现离屏画布。
framebuffer 渲染流程
数据验证
分析数据可见，相比于 canvas 2D， webgl 对 CPU 和内存的消耗都出现大幅度地下降。
相比于 Canvas 版本，WebGL 版本的 CPU 负载下降 30% - 83%；
相比于 Canvas 版本，WebGL 版本的 image 内存消耗下降 78% - 83%；
相比于 Canvas 版本，WebGL 版本的 javascript 内存消耗下降 60% - 77%；
关于本文
作者：@孙立想
原文：https://mp.weixin.qq.com/s/pfNhFV1dSuBzWLBqiTpPZg
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。