怎么实现弹出层后高斯模糊下面的内容

Creator 2.x
#1

怎么实现当一个弹出层弹出来以后，被遮挡的内容高斯模糊！

#2

两种方式 1 先预先截图处理 然后用的时候显示出来 2 要用的时候截图 再处理 这个可以参考一下http://blog.csdn.net/nono_o/article/details/45891757

#3

先把当前Framebuffer做一个高斯模糊全屏处理，然后再正常绘制你的弹出层。

#4

如果被遮挡的内容有spine，此处会显示黑框~

#5

cocoscreator怎么搞？

#6

没有，就是单纯的弹出一个界面，然后被遮挡的界面高斯模糊（模糊、虚化都行）。

#7

陈独秀同志，坐下，慢慢说！仔细点！最好有demo

#8

我的意思就是被遮挡的那个界面如果有spine相关的，会出现这个黑框的情况。
参考这个在此输入链接描述

#9

最后搞了没

#10

最后放弃了

#11

public static captureScreenshot(textureTag: string, callBack?: Function): void {

    cc.director.once(cc.Director.EVENT_AFTER_DRAW, () => {

        let canvas = document.getElementById('GameCanvas') as HTMLCanvasElement;

        let str = canvas.toDataURL();

        let img = new Image();

        img.onload = () => {

            let texture = new cc.Texture2D();

            texture.initWithElement(img);

        };

        img.src = str;;

        img.remove();

        callBack && callBack();

    })

}

texture就是你要的背景图
CCEffect %{
techniques:

  • passes:
    • vert: vs
      frag: fs
      blendState:
      targets:
      • blend: true
        rasterizerState:
        cullMode: none
        properties:
        size: { value: [500.0, 500.0], editor: { tooltip: ‘节点尺寸’ } }
        }%

CCProgram vs %{
precision highp float;

#include

in vec3 a_position;
in vec2 a_uv0;
in vec4 a_color;

out vec2 v_uv0;
out vec4 v_color;

void main () {
gl_Position = cc_matViewProj * vec4(a_position, 1);
v_uv0 = a_uv0;
v_color = a_color;
}
}%

CCProgram fs %{
precision highp float;

in vec2 v_uv0;
in vec4 v_color;

uniform sampler2D texture;

uniform Properties {
vec2 size;
};

// 模糊半径
// for 循环的次数必须为常量
const float RADIUS = 8.0;

// 获取模糊颜色
vec4 getBlurColor (vec2 pos) {
vec4 color = vec4(0); // 初始颜色
float sum = 0.0; // 总权重
// 卷积过程
for (float r = -RADIUS; r <= RADIUS; r++) { // 水平方向
for (float c = -RADIUS; c <= RADIUS; c++) { // 垂直方向
vec2 target = pos + vec2(r / size.x, c / size.y); // 目标像素位置
float weight = (RADIUS - abs®) * (RADIUS - abs©); // 计算权重
color += texture2D(texture, target) * weight; // 累加颜色
sum += weight; // 累加权重
}
}
color /= sum; // 求出平均值
return color;
}

void main () {
vec4 color = getBlurColor(v_uv0); // 获取模糊后的颜色
color.a = v_color.a; // 还原透明度
gl_FragColor = color;
}
}%
这个是高级模糊的shader做成一个材质放到背景图的图片材质节点上即可

2赞
#12

优秀 :smiling_face_with_three_hearts:

#13

MARK.

#14

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。