WebGL 手撸3d贺卡+小草飘动滤镜

前言

这两天接到一个项目，是有关全屏视频的，整个项目中分到我这儿最主要的部分就是结束页要求3d贺卡展现，正巧和前几天NingBo童鞋分享的同样，干脆点儿，此次搞个webGL版的。哈哈~css

实现过程

20190426-如今阶段就是只作了个基础版，曲线动画啥的都是小事儿。web

20190427-如今加上了easebackout曲线方法，用的是d3-ease感受挺好用的,还有小花的飘动的逻辑，稍后会讲解。。太饿了~吃饭去。哈哈（已更新，纯文字，不懂得随时提问）chrome

20190429-设计大改，已经不是这个样子了，我把这个提出来当demo了，汗~~。不过还好，道理都同样npm

手指拖拽旋转逻辑这个项目用不到，因此没有添加
复制代码

ps:有没有以为chrome里devtool不是这个界面啊~哈哈哈，最近在弄一个可视化的工具
复制代码

言归正传，我们接着往下进行:canvas

webGL初始化（常规操做）

获取 WebGLRenderingContext

const gl = canvas.getContext('webgl');
复制代码

编译shader并把编译好的shader附加到建立好的program中

//顶点着色器
    const vertShader = gl.createShader(gl.VERTEX_SHADER); 
    gl.shaderSource(vertShader,vertSource);//vertSource:着色器源码
    gl.compileShader(vertShader);
    //片元着色器
    const fragShader = gl.createShader(gl.FRAGMENT_SHADER); 
    gl.shaderSource(fragShader,fragSource);//fragSource:着色器源码
    gl.compileShader(fragShader);
    
    //program相关
    const program = gl.createProgram();
    gl.attachShader(program,vertShader); //附加顶点着色器
    gl.attachShader(program,fragShader); //附加片元着色器
    gl.linkProgram(program);
复制代码

3.由于贺卡是3d的因此要打开深度测试bash

gl.enable(gl.DEPTH_TEST);
复制代码

4.由于元素不是模型而是一个个矩形，只是材质有的是透明的，在元素叠加时会把当前像素覆盖到缓冲中，好比颜色值(0,0,0,0)会覆盖已有颜色(1,0,0,1),致使这个像素不是你想要的红色而是透明色。解决办吧是开启混合模式。markdown

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.enable(gl.BLEND);
复制代码

固然你若是确保每一个元素都是jpg的话 能够不用开启这个功能。
blendFunc 是定义混合方式，第一个参数是定义源像素采起怎样的处理，第二个参数是目标像素（颜色缓冲区）采起怎样的处理。
上面写的函数的意思 最终像素= 源像素颜色*源透明度+缓冲区颜色*（1-源透明度）
复制代码

基本上初始化工做就完成了，下面来看下怎样添加元素。数据结构

添加贺卡元素

先来附上shader源码ide

//vertSource
uniform mat4 uCameraMatrix;
uniform mat4 uTransformMatrix;
attribute vec3 aPosition;
attribute vec2 aUv;
varying vec2 vUv;
void main(){
    const float scale = 1.0/1.6;
    //这个矩阵不用管 我是懒得写lookAt了 和lookAt的功能是同样的
    const mat4 viewAngle = mat4(
        1,0,0,0,
        0,cos(-.1),-sin(-.1),0,
        0,sin(-.1),cos(-.1),0,
        0,-50,-1000,1
    );
    vec3 cPosition = (aPosition)*vec3(scale,scale,-1);
    gl_Position = uCameraMatrix*viewAngle*(uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0));
    vUv = aUv;//uv传给片元着色器的，供采样定位用
} 
复制代码

//片元着色器
precision highp float;
uniform sampler2D uImage;
varying vec2 vUv;
void main(){
    vec4 color = texture2D(uImage,vUv);
    if(color.a == 0.0){
        discard;//这个是若是采样的颜色是透明的则丢弃该颜色，和不加有一点儿区别，看下方图（须要关闭BLEND）
    }
    gl_FragColor = color;
}
复制代码

上述顶点着色器主要说下

gl_Position = uCameraMatrix*viewAngle*(uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0));
复制代码

uCameraMatrix:透视矩阵

viewAngle:至关于lookAt，我也想直接在js中把这两个矩阵整合了，可是看gl-mat4的lookAt方法用不对，也没深究，后来放弃了，直接写进去了，再就是我这里面的Z轴取反了，由于gl-mat4里的透视矩阵给我反过来了，我用不惯。。😓，而后正回来了。

uTransformMatrix:变换矩阵，用于变换当前元素用的，心细的童鞋看了应该会问我为何不直接写成

uTransformMatrix*vec4(cPosition,1.0)而是写成

uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0)呢？个人作法是用同一个矩阵使每一个元素按照自身的底部进行旋转，若是z轴不是0的话旋转就不是底部了，因此要先变换，在进行Z轴位移，就是我想要的每一个元素以自身的底儿来旋转。

说完shader接下来就是drawArrays了。

整个3d中我分红了两类元素，一类是不变的，也就是地面，一类是跟着展开旋转的，也就是非地面的部分。

地面是相对于其余部分来讲只有 uTransformMatrix是个单位矩阵，其余的是随时间变换而变换，因此我选择了把他们统一作成了同样的结构，添加了一个rotateFlag作区分。每一个数据结构以下：

interface attribData{
    buffer:WebGLBuffer; 
    data:Float32Array; //记录的顶点和UV
    texture?:WebGLTexture; //自身所需的素材
    rotateFlag:boolean; //旋转开关
}
复制代码

首先要写入元素数据

createStandEle(file,[x,y,z]){
        //file:图片名称
        //this.option.assets[file]:图片元素
        const scale = Math.sqrt((600+z)/600); //这个下面会重点说下
        const imgWidth = (<HTMLImageElement>this.option.assets[file]).naturalWidth*scale;
        const imgHeight = (<HTMLImageElement>this.option.assets[file]).naturalHeight*scale;
        const name = file.match(/card\_([^\.]+)/)[1];
        const data = {
            buffer:this.gl.createBuffer(),
            data:new Float32Array([ 
                //顶点数据                            UV数据
                x-imgWidth/2,y,z,                      0,1,
                x+imgWidth/2,y,z,                      1,1,
                x-imgWidth/2,y+imgHeight,z,            0,0,
                x+imgWidth/2,y+imgHeight,z,            1,0
            ]),
            texture:this.gl.createTexture(),
            rotateFlag:true,
        };
        //this.cardData:是个人全部元素的集合
        this.cardData[name] = data; 
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER,data.buffer);
        //给ARRAY_BUFFER写入数据
        this.gl.bufferData(this.gl.ARRAY_BUFFER, data.data, this.gl.STATIC_DRAW);
        this.gl.activeTexture(this.gl.TEXTURE0);
        this.gl.bindTexture(this.gl.TEXTURE_2D,data.texture);
        let format = this.gl.RGB; //jpg不必用alpha
        if(texture.search(/\.png$/)>=0){
            format = this.gl.RGBA;
        }
        //给gl.TEXTURE_2D设置纹理
        this.gl.texImage2D(this.gl.TEXTURE_2D,0,format,format,this.gl.UNSIGNED_BYTE,this.option.assets[texture]);
        //下面是缩放采样和包装方式
        this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR);
        this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR);
        this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE);
        this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE);
    }
复制代码

基本逻辑就是建立缓冲->绑定缓冲—>给缓冲赋值
复制代码

代码中的scale有必要说一下，透视矩阵中是符合近大远小的特征，可是设计稿件是平面的，没有远近的概念，加上远近以后，psd的前面的元素根据近大远小的原则是不作处理的话，近处的会大的很离谱，这时有同窗会说，我直接缩小图片就好啦，那么问题又来了，缩小图片后近大远小的原则，实际上是近处的元素处于放大的效果，小图片放大会虚你们都知道的吧，因此采起直接缩小图片的作法是错的，惟一的作法是修改元素大小，来填充图片，这样就不会出现虚的现象了。

执行渲染

render(timeStamp,offsetTime){
        if(this.rotateX<Math.PI/2){
            this.rotateX+=0.01*offsetTime;
        }else{
            this.rotateX = Math.PI/2;
        }
        Object.keys(this.cardData).forEach(i=>{
            //遍历并渲染全部元素
            this.renderBuffer(this.cardData[i]);
        });
        super.render(timeStamp,offsetTime);
    }
    renderBuffer(data:attribData){
        this.gl.clear(this.gl.COLOR_BUFFER_BIT|this.gl.DEPTH_BUFFER_BIT);
        this.gl.useProgram(this.cardProgram);
        if(data.rotateFlag){
            const rotate = this.rotateX-Math.PI/2;
            this.gl.uniformMatrix4fv(this.cardParam.uTransformMatrix,false,new Float32Array([
                1,0,0,0,
                0,Math.cos(rotate),-Math.sin(rotate),0,
                0,Math.sin(rotate),Math.cos(rotate),0,
                0,0,0,1,
            ]));
        }else{
            //若是不是旋转元素则赋值给uTransformMatrix 一个单位矩阵。
            this.gl.uniformMatrix4fv(this.cardParam.uTransformMatrix ,false,this.identityMatrix);
        }
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER,data.buffer);
        this.gl.vertexAttribPointer(<GLint>this.cardParam.aPosition,3,this.gl.FLOAT,false,4*5,0);
        this.gl.vertexAttribPointer(<GLint>this.cardParam.aUv,2,this.gl.FLOAT,false,4*5,4*3);
        this.gl.activeTexture(this.gl.TEXTURE0);
        this.gl.bindTexture(this.gl.TEXTURE_2D,data.texture);
        this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,4);
    }
复制代码

基本逻辑就绑定缓冲&绑定纹理—>告诉显卡从当前绑定的缓冲区中读取顶点数据->drawArrays

花飘动动效

这个效果最主要的操做都在片元着色器中，原理就是获取uv插值 vUV，并对其进行偏移运算，而后读取计算后uv位置的纹理采样。很简单吧~ 附上更新好的片元着色器代码；

//片元着色器
precision highp float;
uniform sampler2D uImage;
uniform int uType;//0:非小草 1:小草 这些都是在js中设置的
uniform float uTime;//当前时间戳
varying vec2 vUv;
void main(){
    vec4 color = vec4(0);
    if(uType == 1){
        //小草部分
        float offset = distance(vUv,vec2(0.5,1.0));
        offset = pow(offset,2.)/8.0*sin(uTime);
        mat2 rotate = mat2(
            cos(offset),-sin(offset),
            sin(offset),cos(offset)
        );
        vec2 cUv = vec2(0.5,1.0)+rotate*(vUv-vec2(0.5,1.0));
        if(cUv.x<0.||cUv.y<0.||cUv.x>1.||cUv.y>1.) discard;
        color = texture2D(uImage,cUv);
    }else{
        color = texture2D(uImage,vUv);
    }
    if(color.a == 0.0){
        discard;
    }
    gl_FragColor = color;
}
复制代码

上述小草部分就是对当前uv作偏移处理。

由于小草底部是扎在地上不动的，并且飘动不是线性变化的，越远离地面飘动幅度越大，因此不能在顶点着色器里操做斜切啥的运算（相似于css transform的skew操做）。

我这里选择的是当前uv到底部中心（小草根部）的距离取二次方，距离底部中心越远幅度也越明显。

float offset = distance(vUv,vec2(0.5,1.0));
offset = pow(offset,2.)/8.0;// /8.0是直接用的话幅度太大 而UV值在0-1之间，作一个缩小处理
复制代码

再乘以和时间相关的sin值，当sin为0时，由于相乘的关系，因此也就是最后的计算结果和传入的vUv同样，也就是说和贴图元素同样，当sin为1和-1是就是偏移最大，也就是扭曲后的图片。

offset = offset*sin(uTime);
复制代码

而后把这个值看成旋转矩阵的角度，最终生成新的uv坐标；

mat2 rotate = mat2(//旋转矩阵
    cos(offset),-sin(offset),
    sin(offset),cos(offset)
);
vec2 cUv = vec2(0.5,1.0)+rotate*(vUv-vec2(0.5,1.0));//相对于底部中心作旋转处理
复制代码

剩下的部分就是在js中每一帧传入时间戳还有uType值便可。剩下的就是交给webGL渲染管线处理。

这部分其实应该叫作滤镜了。像水动效啊、火焰动效啊，还有pixiJs中的filter基本上都是同样的流程，什么抖音效果，rgb颜色分离都是在这儿处理。

这部分纯文字也不知道能不能讲懂。。后续应该没啥要加的了。剩下的就是非webGL部分了。过两天这个项目作好后webGL部分会在结尾处展现哈，想看效果先看完前面的视频。。。汗。。。

有啥不明白的留言~~~欢迎提问~哈哈哈