要實(shí)現(xiàn)一個(gè)什么樣的效果

來(lái)自剪影app畫(huà)布模糊的效果：

IMG20201215_094116.png

思路：怎么做

先畫(huà)背景再畫(huà)原始視頻幀。
高斯模糊背景怎么畫(huà)？

本方案參考基于exoplayer播放器的高斯模糊視頻濾鏡，用這個(gè)方案實(shí)現(xiàn)了視頻流的背景鋪滿播放（用在信息流播放視頻，還沒(méi)有做視頻編輯的幕布）。
glsl 如下，三個(gè)參數(shù)我調(diào)了好久，另外注意“vTextureCoord”等名稱要和頂點(diǎn)shader中一致

  private final static float radius = 5.0f;//偏移量
    private final static int blurX = 5, blurY = 5;//X方向, Y方向
    private final static double trans = 0.005d;//透明度
    private String GAUSSIAN_BLUR_SHADER = "#extension GL_OES_EGL_image_external : require\n" +
            "precision mediump float;\n" +
            "varying vec2 vTextureCoord;\n" +
            "uniform samplerExternalOES sTexture;\n" +
            "const float resolution = 1024.0;\n" +
            "const float radius = "+radius+";\n" +
            "vec2 dir = vec2(1.0,1.0);\n" +
            "void main() {\n" +
            "   highp vec4 centralColor = vec4(0.0);\n" +
            "   float blur = radius/resolution;\n" +
            "   float hstep = dir.x;\n" +
            "   float vstep = dir.y;\n" +
            "   int x = "+blurX+";int y = "+blurY+";\n" +
            "   for(int i = x; i > 0; i--){\n" +
            "       for(int j = y; j > 0; j--){\n" +
            "           centralColor += texture2D(sTexture, vec2(vTextureCoord.x + float(i)*blur*hstep, vTextureCoord.y +float(j)*blur*vstep))*"+trans+";" +
            "           centralColor += texture2D(sTexture, vec2(vTextureCoord.x - float(i)*blur*hstep, vTextureCoord.y +float(j)*blur*vstep))*"+trans+";" +
            "           centralColor += texture2D(sTexture, vec2(vTextureCoord.x - float(i)*blur*hstep, vTextureCoord.y -float(j)*blur*vstep))*"+trans+";" +
            "           centralColor += texture2D(sTexture, vec2(vTextureCoord.x + float(i)*blur*hstep, vTextureCoord.y -float(j)*blur*vstep))*"+trans+";" +
            "       }\n" +
            "   }\n" +
            "   gl_FragColor = vec4(centralColor);\n" +
            "}";  

實(shí)踐：做產(chǎn)品需求中遇到的問(wèn)題

將上述方案移植到視頻編輯模塊實(shí)現(xiàn)后，發(fā)現(xiàn)其模糊程度不可調(diào)參，....因?yàn)楫a(chǎn)品要求用戶可以設(shè)置4檔模糊程度。也不是不可調(diào)，調(diào)了不對(duì)勁啊...
radius ？發(fā)現(xiàn)調(diào)大了之后有重影，越調(diào)大，重影越多...
blurX 、blurY？越調(diào)怎么鋸齒越嚴(yán)重呢,競(jìng)品不是這樣啊...
仔細(xì)看上述算法，這幾個(gè)參數(shù)無(wú)論怎么調(diào)，它只用了4個(gè)像素去做平滑啊，難怪效果不對(duì)...代碼不能亂抄，所謂的高斯模糊到底是怎么一回事呢

用大白話來(lái)解釋高斯模糊，就是采集當(dāng)前像素一定范圍內(nèi)的顏色，將采集到的顏色按比例進(jìn)行合成（越靠近當(dāng)前像素的顏色比例越高，也就是正態(tài)分布的體現(xiàn)），得到一個(gè)比較均勻的顏色。
將圖像中的每個(gè)像素都按照上面的流程進(jìn)行處理，最后就可以得到更為平滑（模糊）的圖像。
采集的范圍越大，得到的圖像就會(huì)越模糊。

方案1 https://www.shadertoy.com/view/XdfGDH （這個(gè)網(wǎng)站是個(gè)神奇的工具，就是打開(kāi)太慢了）
可行，現(xiàn)在就是這樣做的

    public  static String getFragmentShader(int width,int height,boolean isOES) {
        float hStep = 1.0f / width;
        float vStep = 1.0f / height;
        String header=isOES?"#extension GL_OES_EGL_image_external : require\n":"";
        String sTextureDeclare=isOES?"uniform samplerExternalOES sTexture;\n": "uniform lowp sampler2D sTexture;\n";
        return header +
                "precision mediump float;\n" +
                "varying vec2 vTextureCoord;\n" +
                //聲明可變參數(shù) radius
                sTextureDeclare +
                "uniform int radius;\n" +
                "float normpdf(in float x, in float sigma) {\n" +
                "    return 0.39894 * exp(-0.5 * x * x / (sigma * sigma)) / sigma;\n" +
                "}\n" +
                "void main() {\n" +
                "    vec3 c = texture2D(sTexture, vTextureCoord).rgb;\n" +
                //與中心像素的距離半徑，即核的大小
                "    int kSize = (radius - 1) / 2;\n" +
                //15為核最大的半徑值
                "    float kernel[15];\n" +
                "    vec3 final_colour = vec3(0.0);\n" +
                //取方差為7，按高斯函數(shù)計(jì)算核中各個(gè)像素的權(quán)值
                "    float sigma = 7.0;\n" +
                "    float Z = 0.0;\n" +
                "    for (int j = 0; j <= kSize; ++j) {\n" +
                "        kernel[kSize + j] = kernel[kSize - j] = normpdf(float(j), sigma);\n" +
                "    }\n" +

                //計(jì)算高斯核卷積
                "    for (int j = 0; j < radius; ++j) {\n" +
                "        Z += kernel[j];\n" +
                "    }\n" +
                "    for (int i = -kSize; i <= kSize; ++i) {\n" +
                "        for (int j = -kSize; j <= kSize; ++j) {\n" +
                "            final_colour += kernel[kSize + j] * kernel[kSize + i] * texture2D(sTexture, (vTextureCoord.xy + vec2(float(i)*" + hStep + ", float(j)*" + vStep + "))).rgb;\n" +
                "        }\n" +
                "    }\n" +

                "    gl_FragColor = vec4(final_colour / (Z * Z), 1.0);\n" +
                "}";
    }

方案2：https://github.com/Jam3/glsl-fast-gaussian-blur

方案3：https://www.shadertoy.com/view/Xltfzj

拓展：純色幕布的實(shí)現(xiàn)

    private static String getFragmentShader(boolean isOES){

        String header=isOES?"#extension GL_OES_EGL_image_external : require\n":"";
        return   header +
                "precision mediump float;\n" +
                "uniform float redF;\n" +
                "uniform float greenF;\n" +
                "uniform float blueF;\n" +
                "uniform float alphaF;\n" +
                "vec2 dir = vec2(1.0,1.0);\n" +
                "void main() {\n" +
                "   gl_FragColor = vec4(redF,greenF,blueF,alphaF);\n" +
                "}";
    }