我的项目起因
通过对 GLSL 的理解，以及 shadertoy 上各种我的项目的洗礼，当初开发简略交互图形应该不是一个怎么艰难的问题了。上面开始来对一些已有业务逻辑的我的项目做GLSL渲染器替换开发。
起因是看到某些小游戏广告，感觉机制乏味，实现起来应该也不会很简单，就尝试本人开发一个。
游戏非常简略，相似泡泡龙一样的从屏幕下方两头射出不同色彩大小的泡泡，泡泡上浮到顶部，雷同色彩的泡泡能够合并成大一级的不同色彩泡泡。简略说就是一个高低反过来的合成大西瓜。
较特地的中央是为了体现泡泡的质感，在色彩雷同的泡泡凑近时，会有水滴外表先合并的成果，这一部分就须要用到着色器渲染来实现了。
我的项目构造
先对逻辑分层
最上层为游戏业务逻辑Game，治理游戏开始、完结状态，响应用户输出，记录游戏分数等。
其次为游戏逻辑驱动层Engine，治理游戏元素，裸露可由用户管制的动作，援用渲染器管制游戏场景渲染更新。
再往下是物理引擎模块Physics，治理游戏元素之间的关系，以及实现Engine须要的接口。
与引擎模块并列的是渲染器模块Renderer，读取从Engine输出的游戏元素，渲染游戏场景。
这样分层的益处是，各个模块能够独立替换/批改；例如在GLSL渲染器开发实现前，能够替换成其余的渲染器，如2D canvas渲染器，甚至应用HTML DOM来渲染。
结构图如下：
游戏逻辑实现
游戏业务逻辑 Game
因为游戏业务比较简单，这一层只负责做这几件事：
- 输出HTML canvas元素，指定游戏渲染范畴
- 初始化驱动层
Engine - 监听用户操作事件
touchend/click，调用Engine管制射出泡泡 - 循环调用
Engine的update更新办法，并查看超过指定高度的泡泡数量，如数量超过0则进行游戏
class Game { constructor(canvas) { this.engine = new Engine(canvas) document.addEventListener('touchend', (e) => { if(!this.isEnd) { this.shoot({ x: e.pageX, y: e.pageY }, randomLevel()) } }) } shoot(pos, newBallLevel) { // 已筹备好的泡泡射出去 this.engine.shoot(pos, START_V) // 在初始点生成新的泡泡 this.engine.addStillBall(BALL_INFO[newBallLevel]) } update() { this.engine.update() let point = 0; let overflowCount = 0; this.engine.physics.getAllBall().forEach(ball => { if(!ball.isStatic){ point += Math.pow(2, ball.level); if (ball.position.y > _this.sceneSize.width * 1.2) { overflowCount++ } } }) if(overflowCount > 1){ this.gameEnd(point); } } gameEnd(point) { this.isEnd = true ... }}驱动层 Engine
这一层的逻辑负责管理物理引擎Physics和渲染器模块Renderer，并裸露交互办法供Game调用。
指定了物理引擎模块需提供以下接口办法：
- 在指定的地位生成固定的泡泡，供用户作下一次操作时应用
- 把固定的泡泡按指定的方向射出
在更新办法update里，读取所有泡泡所在的地位和大小、等级色彩信息，再调用渲染器渲染泡泡。
class Engine { constructor(canvas) { this.renderer = new Renderer(canvas) this.physics = new Physics() } addStillBall({ pos, radius, level }) { this.physics.createBall(pos, radius, level, true) this.updateRender() } shoot(pos, startV) { this.physics.shoot(pos, startV) } updateRender() { // 更新渲染器渲染信息 } update() { // 调用渲染器更新场景渲染 this.renderer.draw() }}物理引擎模块 Physics
物理引擎应用了matter.js，没别的起因，就是因为之前有我的项目教训，并且自带一个渲染器，能够拿来辅助咱们本人渲染的开发。
包含上一节驱动层提到的，物理引擎模块须要实现以下几个性能：
- 在指定的地位生成固定的泡泡，供用户作下一次操作时应用
- 把固定的泡泡按指定的方向射出
- 查看是否有雷同色彩的泡泡相撞
- 相撞的雷同色彩泡泡合并为高一级的泡泡
在这之前咱们先须要初始化场景：
0.场景搭建
左、右、下的边框应用一般的矩形碰撞体实现。
顶部的半圆应用事后画好的SVG图形，应用matter.js里SVG类的pathToVertices办法生成碰撞体，插入到场景中。
因为泡泡都是向上沉没的，所以置重力方向为y轴的负方向。
// class Physicsconstructor() { this.matterEngine = Matter.Engine.create() // 置重力方向为y轴负方向（即为上） this.matterEngine.world.gravity.y = -1 // 增加三面墙 Matter.World.add(this.matterEngine.world, Matter.Bodies.rectangle(...)) ... ... // 增加上方圆顶 const path = document.getElementById('path') const points = Matter.Svg.pathToVertices(path, 30) Matter.World.add(this.matterEngine.world, Matter.Bodies.fromVertices(x, y, [points], ...)) Matter.Engine.run(this.matterEngine)}1.在指定的地位生成固定的泡泡，供用户作下一次操作时应用
创立一个圆型碰撞体放到场景的指定地位，并记录为Physics的外部属性供射出办法应用。
// class PhysicscreateBall(pos, radius, level, isStatic) { const ball = Matter.Bodies.circle(pos.x, pos.y, radius, { ...// 不同等级不同的大小通过scale辨别 }) // 如果生成的是固定的泡泡，则记录在属性上供下次射出时应用 if(isStatic) { this.stillBall = ball } Matter.World.add(this.matterEngine.world, [ball])}2.把固定的泡泡按指定的方向射出
射出的方向由用户的点击地位决定，但射出的速度是固定的。
能够通过点击地位和原始地位连线的向量，作归一化后乘以初速度大小计算。
// class Physics// pos: 点击地位，用于计算射出方向// startV: 射出初速度shoot(pos, startV) { if(this.stillBall) { // 计算点击地位与原始地位的向量，归一化（使长度为1）之后乘以初始速度大小 let v = Matter.Vector.create(pos.x - this.stillBall.position.x, pos.y - this.stillBall.position.y) v = Matter.Vector.normalise(v) v = Vector.mult(v, startV) // 设置泡泡为可流动的，并把初速度赋予泡泡 Body.setStatic(this.stillBall, false); Body.setVelocity(this.stillBall, v); }}3.查看是否有雷同色彩的泡泡相撞
其实matter.js是有提供两个碰撞体碰撞时触发的collisionStart事件的，然而对于碰撞后合并生成的泡泡，即便与雷同色彩的泡泡触碰，也不会触发这个事件，所以只能手动去检测两个泡泡是否碰撞。
这里应用的办法是判断两个圆形的核心间隔，是否小于等于半径之和，是则判断为碰撞。
// class PhysicscheckCollision() { // 拿到流动中的泡泡碰撞体的列表 const bodies = this.getAllBall() let targetBody, srcBody // 逐对泡泡碰撞体遍历 for(let i = 0; i < bodies.length; i++) { const bodyA = bodies[i] for(let j = i + 1; j < bodies.length; j++) { const bodyB = bodies[j] if(bodyA.level === bodyB.level) { // 用间隔的平方比拟，防止计算开平方 if(getDistSq(bodyA.position, bodyB.position) <= 4 * bodyA.circleRadius * bodyA.circleRadius) { // 应用靠上的泡泡作为指标泡泡 if(bodyA.position.y < bodyB.position.y) { targetBody = bodyA srcBody = bodyB } else { targetBody = bodyB srcBody = bodyA } return { srcBody, targetBody } } } } } return false}4.相撞的雷同色彩泡泡合并为高一级的泡泡
碰撞的两个泡泡，取y座标靠上的一个作为合并的指标，靠下的一个作为源泡泡，合并后的泡泡座标设在指标泡泡座标上。
源泡泡碰撞设为敞开，并设为固定地位；
只实现合并的性能的话，只须要把源泡泡的地位设为指标泡泡的座标就能够，但为了实现动画过渡，源泡泡的地位挪动做了如下的解决：
- 在每个更新周期计算源泡泡和指标泡泡地位的差值，失去源泡泡须要挪动的向量
- 挪动向量的
1/8，在下一个更新周期反复1、2的操作 - 当两个泡泡的地位差值小于一个较小的值（这里设为5）时，视为合并实现，销毁源泡泡，并更新指标泡泡的等级信息
// class PhysicsmergeBall(srcBody, targetBody, callback) { const dist = Math.sqrt(getDistSq(srcBody.position, targetBody.position)) // 源泡泡地位设为固定的，且不参加碰撞 Matter.Body.setStatic(srcBody, true) srcBody.collisionFilter.mask = mergeCategory // 如果两个泡泡合并到间隔小于5的时候, 指标泡泡降级为上一级的泡泡 if(dist < 5) { // 合并后的泡泡的等级 const newLevel = Math.min(targetBody.level + 1, 8) const scale = BallRadiusMap[newLevel] / BallRaiusMap[targetBody.level] // 更新指标泡泡信息 Matter.Body.scale(targetBody, scale, scale) Matter.Body.set(targetBody, {level: newLevel}) Matter.World.remove(this.matterEngine.world, srcBody) callback() return } // 须要持续播放泡泡凑近动画 const velovity = { x: targetBody.position.x - srcBody.position.x, y: targetBody.position.y - srcBody.position.y }; // 泡泡挪动速度先慢后快 velovity.x /= dist / 8; velovity.y /= dist / 8; Matter.Body.translate(srcBody, Matter.Vector.create(velovity.x, velovity.y));}因为应用了自定义的办法检测泡泡碰撞，咱们须要在物理引擎的beforeUpdate事件上绑定检测碰撞和合并泡泡办法的调用
// class Physicsconstructor() { ... Matter.Events.on(this.matterEngine, 'beforeUpdate', e => { // 查看是否有正在合并的泡泡，没有则检测是否有雷同色彩的泡泡碰撞 if(!this.collisionInfo) { this.collisionInfo = this.checkCollision() } if(this.collisionInfo) { // 若有正在合并的泡泡，（持续）调用合并办法，在合并实现后清空属性 this.mergeBall(this.collisionInfo.srcBody, this.collisionInfo.targetBody, () => { this.collistionInfo = null }) } }) ...}渲染器模块
GLSL渲染器的实现比较复杂，以后能够先应用matter.js自带的渲染器调试一下。
在Physics模块中，再初始化一个matter.js的render:
class Physics { constructor(...) { ... this.render = Matter.Render.create(...) Matter.Render.run(this.render) }}开发定制渲染器
接下来该说一下渲染器的实现了。
先说一下这种像是两滴液体凑近，边缘合并的成果是怎么实现的。
如果咱们把眼镜脱下，或焦点放远一点，大略能够看到这样的图像：
看到这里可能就有人猜到是怎么实现的了。
是的，就是利用两个边缘径向突变亮度的圆形，在它们的突变边缘叠加的地位，亮度的相加能达到圆形核心的水平。
而后在这个突变边缘的图形上加一个阶跃函数滤镜（低于某个值置为0，高于则置1），就能够得出第一张图的成果。
着色器构造
因为泡泡的数量是始终变动的，而片段着色器fragmentShader的for循环判断条件（如i < length）必须是和常量作判断，（即length必须是常量）。
所以这里把泡泡座标作为顶点座标传入顶点着色器vertexShader，初步渲染泡泡轮廓：
// 顶点着色器 vertexShaderattribute vec2 a_Position;attribute float a_PointSize;void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = a_PointSize;}// 片段着色器 fragmentShader#ifdef GL_ESprecision mediump float;#endifvoid main() { float d = length(gl_PointCoord - vec2(0.5, 0.5)); float c = smoothstep(0.40, 0.20, d); gl_FragColor = vec4(vec3(c), 1.0);}// 渲染器 Renderer.jsclass GLRenderer { ... // 更新游戏元素数据 updateData(posData, sizeData) { ... this.posData = new Float32Array(posData) this.sizeData = new Float32Array(sizeData) ... } // 更新渲染 draw() { ... // 每个顶点取2个数 this.setAttribute(this.program, 'a_Position', this.posData, 2, 'FLOAT') // 每个顶点取1个数 this.setAttribute(this.program, 'a_PointSize', this.sizeData, 1, 'FLOAT') ... }}渲染器的js代码中，把每个点的x,y座标合并成一个一维数组，传到着色器的a_Position属性；把每个点的直径同样组成一个数组，传到着色器的a_PointSize属性。
再调用WebGL的drawArray(gl.POINTS)办法画点，使每个泡泡渲染成一个顶点。
顶点默认渲染成一个方块，所以咱们在片段着色器中，取顶点渲染范畴的座标（内置属性）gl_PointCoord到顶点中心点（vec2(0.5, 0.5)）间隔画边缘亮度径向突变的圆。
如下图，咱们应该能失去每个泡泡都渲染成灯泡一样的成果：
留神这里的WebGL上下文须要指定混合像素算法，否则每个顶点的范畴会笼罩原有的图像，观感上为每个泡泡带有一个方形的边框
gl.blendFunc(gl.SRC_ALPHA, gl.ONE)gl.enable(gl.BLEND);如上文所说的，咱们还须要给这个图像加一个阶跃函数滤镜；但咱们不能在下面的片段着色器上间接采纳阶跃函数解决输入，因为它是对每个顶点独立渲染的，不会带有其余顶点在以后顶点范畴内的信息，也就不会有后面说的「亮度相加」的计算可能。
一个思路是将下面着色器的渲染图像作为一个纹理，在另一套着色器上做阶跃函数解决，作最初理论输入。
对于这样的多级解决，WebGL倡议应用FrameBuffer容器，把渲染后果绘制在下面；整个残缺的渲染流程如下：
泡泡绘制 --> frameBuffer --> texture --> 阶跃函数滤镜 --> canvas
应用frameBuffer的办法如下：
// 创立frameBuffervar frameBuffer = gl.createFramebuffer()// 创立纹理texturevar texture = gl.createTexture()// 绑定纹理到二维纹理gl.bindTexture(gl.TEXTURE_2D, texture)// 设置纹理信息，留神宽度和高度需是2的次方幂，纹理像素起源为空gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1024, 1024, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)// 设置纹理放大滤波器gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)// frameBuffer与纹理绑定gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)应用以下办法，指定frameBuffer为渲染指标：
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)当frameBuffer绘制实现，将主动存储到0号纹理中，供第二次的着色器渲染应用
// 场景顶点着色器 SceneVertexShaderattribute vec2 a_Position;attribute vec2 a_texcoord;varying vec2 v_texcoord;void main() { gl_Position = vec4(a_Position, 0.0, 1.0); v_texcoord = a_texcoord;}// 场景片段着色器 SceneFragmentShader#ifdef GL_ESprecision mediump float;#endifvarying vec2 v_texcoord;uniform sampler2D u_sceneMap;void main() { vec4 mapColor = texture2D(u_sceneMap, v_texcoord); d = smoothstep(0.6, 0.7, mapColor.r); gl_FragColor = vec4(vec3(d), 1.0);}场景着色器输出3个参数，别离是：
a_Position: 纹理渲染的面的顶点座标，因为这里的纹理是铺满全画布，所以是画布的四个角a_textcoord: 各个顶点的纹理uv座标，因为纹理大小和渲染大小不一样（纹理大小为1024*1024，渲染大小为画布大小），所以是从(0.0, 0.0)到(width / 1024, height / 1024)u_sceneMap: 纹理序号，用的第一个纹理，传入0
// 渲染器 Renderer.jsclass Renderer { ... drawScene() { // 把渲染指标设回画布 gl.bindFramebuffer(gl.FRAMEBUFFER, null); // 应用渲染场景的程序 gl.useProgram(sceneProgram); // 设置4个顶点座标 this.setAttribute(this.sceneProgram, "a_Position", new Float32Array([ -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0 ]), 2, "FLOAT"); // 设置顶点座标的纹理uv座标 setAttribute(sceneProgram, "a_texcoord", new Float32Array([ 0.0, 0.0, canvas.width / MAPSIZE, 0.0, 0.0, canvas.height / MAPSIZE, 0.0, canvas.height / MAPSIZE, canvas.width / MAPSIZE, 0.0, canvas.width / MAPSIZE, canvas.height / MAPSIZE ]), 2, "FLOAT"); // 设置应用0号纹理 this.setUniform1i(this.sceneProgram, 'u_sceneMap', 0); // 用画三角形面的办法绘制 this.gl.drawArrays(this.gl.TRIANGLES, 0, 6); }}不同类型的泡泡区别
在上一节中，实现了游戏里不同地位、不同大小的泡泡在画布上的绘制，也实现了泡泡之间粘合的成果，然而所有的泡泡都是一样的色彩，而且不能合并的泡泡之间也有粘合的成果，这不是咱们想要的成果；
在这一节，咱们把这些不同类型泡泡做出区别。
要辨别各种类型的泡泡，能够在第一套着色器中只传入某个类型的泡泡信息，反复绘制出纹理供第二套场景着色器应用。但每次只绘制一个类型的泡泡会减少很多的绘制次数。
其实在上一节的场景着色器中，只应用了红色通道，而绿色、蓝色通道的值和红色是一样的:
d = smoothstep(0.6, 0.7, mapColor.r);其实咱们能够在rgb3个通道中传入不同类型的泡泡数据（alpha通道的值若为0时，rgb通道的值与设定的不一样，所以不能应用），这样在一个绘制过程中能够绘制3个类型的泡泡；泡泡的类型共有8种，须要分3组渲染。咱们在第一套着色器绘制泡泡的时候，减少传入绘制组别和泡泡等级的数据。
并在顶点着色器和片段着色器间减少一个varying类型数据，指定该泡泡应用哪一个rgb通道。
// 批改后的顶点着色器 vertexShaderuniform int group;// 绘制的组序号attribute vec2 a_Position;attribute float a_Level;// 泡泡的等级attribute float a_PointSize;varying vec4 v_Color;// 片段着色器该应用哪个rgb通道void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = a_PointSize; if(group == 0){ if(a_Level == 1.0){ v_Color = vec4(1.0, 0.0, 0.0, 1.0);// 应用r通道 } if(a_Level == 2.0){ v_Color = vec4(0.0, 1.0, 0.0, 1.0);// 应用g通道 } if(a_Level == 3.0){ v_Color = vec4(0.0, 0.0, 1.0, 1.0);// 应用b通道 } } if(group == 1){ if(a_Level == 4.0){ v_Color = vec4(1.0, 0.0, 0.0, 1.0); } if(a_Level == 5.0){ v_Color = vec4(0.0, 1.0, 0.0, 1.0); } if(a_Level == 6.0){ v_Color = vec4(0.0, 0.0, 1.0, 1.0); } } if(group == 2){ if(a_Level == 7.0){ v_Color = vec4(1.0, 0.0, 0.0, 1.0); } if(a_Level == 8.0){ v_Color = vec4(0.0, 1.0, 0.0, 1.0); } if(a_Level == 9.0){ v_Color = vec4(0.0, 0.0, 1.0, 1.0); } }}// 批改后的片段着色器 fragmentShader#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_Color;void main(){ float d = length(gl_PointCoord - vec2(0.5, 0.5)); float c = smoothstep(0.40, 0.20, d); gl_FragColor = v_Color * c;}场景片段着色器别离对3个通道作阶跃函数解决（顶点着色器不变），同样传入绘制组序号，区别不同类型的泡泡色彩:
// 批改后的场景片段着色器#ifdef GL_ESprecision mediump float;#endifvarying vec2 v_texcoord;uniform sampler2D u_sceneMap;uniform vec2 u_resolution;uniform int group;void main(){ vec4 mapColor = texture2D(u_sceneMap, v_texcoord); float d = 0.0; vec4 color = vec4(0.0); if(group == 0){ if(mapColor.r > 0.0){ d = smoothstep(0.6, 0.7, mapColor.r); color += vec4(0.86, 0.20, 0.18, 1.0) * d; } if(mapColor.g > 0.0){ d = smoothstep(0.6, 0.7, mapColor.g); color += vec4(0.80, 0.29, 0.09, 1.0) * d; } if(mapColor.b > 0.0){ d = smoothstep(0.6, 0.7, mapColor.b); color += vec4(0.71, 0.54, 0.00, 1.0) * d; } } if(group == 1){ if(mapColor.r > 0.0){ d = smoothstep(0.6, 0.7, mapColor.r); color += vec4(0.52, 0.60, 0.00, 1.0) * d; } if(mapColor.g > 0.0){ d = smoothstep(0.6, 0.7, mapColor.g); color += vec4(0.16, 0.63, 0.60, 1.0) * d; } if(mapColor.b > 0.0){ d = smoothstep(0.6, 0.7, mapColor.b); color += vec4(0.15, 0.55, 0.82, 1.0) * d; } } if(group == 2){ if(mapColor.r > 0.0){ d = smoothstep(0.6, 0.7, mapColor.r); color += vec4(0.42, 0.44, 0.77, 1.0) * d; } if(mapColor.g > 0.0){ d = smoothstep(0.6, 0.7, mapColor.g); color += vec4(0.83, 0.21, 0.51, 1.0) * d; } if(mapColor.b > 0.0){ d = smoothstep(0.6, 0.7, mapColor.b); color += vec4(1.0, 1.0, 1.0, 1.0) * d; } } gl_FragColor = color;}这里应用了分屡次绘制成3个纹理图像，解决后合并成最初的渲染图像，场景着色器绘制了3次，这须要在每次绘制保留上次的绘制后果；而默认的WebGL绘制流程，会在每次绘制时清空图像，这须要批改这个默认流程：
// 设置WebGL每次绘制时不清空图像var gl = canvas.getContext('webgl', { preserveDrawingBuffer: true});class Renderer { ... update() { gl.clear(gl.COLOR_BUFFER_BIT)// 每次绘制时手动清空图像 this.drawPoint()// 绘制泡泡地位、大小 this.drawScene()// 减少阶跃滤镜 }}通过以上解决，整个游戏已根本实现，在这以上能够再批改泡泡的款式、增加分数展现等的局部。
残缺我的项目源码能够拜访: https://github.com/wenxiongid/bubble
欢送关注凹凸实验室博客：aotu.io
或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。