diff --git a/assets/effects/sprite-gaussian-blur.effect b/assets/effects/sprite-gaussian-blur.effect index de02ce4..c7ab82b 100644 --- a/assets/effects/sprite-gaussian-blur.effect +++ b/assets/effects/sprite-gaussian-blur.effect @@ -14,14 +14,18 @@ CCEffect %{ properties: texture: { value: white } alphaThreshold: { value: 0.5 } - # # 灰化程度 - # grayLevel: { - # value: 1.0, + # # 标准方差值 + # stDev: { + # value: 0.84089642, # inspector: { - # tooltip: "灰化程度", - # range: [0.0, 1.0] + # tooltip: "标准方差值" # } # } + + # # 纹理尺寸 + # textureSize: { + # value: [] + # } }% @@ -78,16 +82,20 @@ CCProgram fs %{ #define e 2.718281828459045 // 定义标准方差值 - #define stdDev 0.84089642 - // #define stdDev 1.5 + #define stDev 0.84089642 + // #define stDev 10.0 // 定义π #define pi 3.141592653589793 - // // 接收外部变量 - // uniform GaussianBlur { - // } - + // 接收外部变量 + uniform GaussianBlur { + // // 纹理尺寸（宽 x 高）（px） + // vec2 size; + + // // 标准方差值 + // float stDev; + } /** * 获取权重(对应二维高斯函数公式) @@ -96,7 +104,7 @@ CCProgram fs %{ * @param y */ float getWeight(float x, float y) { - return (1.0 / (2.0 * pi * pow(stdDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stdDev, 2.0))); + return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0))); } /** @@ -124,19 +132,26 @@ CCProgram fs %{ gl_FragColor = o; #if ENABLE_GAUSSIAN_BLUR - const float size = ceil(stdDev * 6.0); - float divider = 0.01; + + // 先计算所有权重的和 + const float size = ceil(stDev * 6.0); + const float halfSize = floor(size / 2.0); float totalWeight = 0.0; - for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) { - for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) { + for(float x = -halfSize; x<= halfSize; x++) { + for (float y = -halfSize; y<= halfSize; y++) { totalWeight += getWeight(x, y); } } + // 加权平均值 vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0); - for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) { - for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) { + float divider = 0.01; + for(float x = -halfSize; x<= halfSize; x++) { + for (float y = -halfSize; y<= halfSize; y++) { + // 求出对应坐标的真正权重（对应权重矩阵） float weight = getAverageWeight(x, y, totalWeight); + + // 求出对应坐标像素颜色值的加权值 finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight; } } diff --git a/assets/effects/sprite-gaussian-blur.effect.meta b/assets/effects/sprite-gaussian-blur.effect.meta index a5f529f..293b65b 100644 --- a/assets/effects/sprite-gaussian-blur.effect.meta +++ b/assets/effects/sprite-gaussian-blur.effect.meta @@ -5,11 +5,11 @@ { "glsl1": { "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", - "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x \n * @param y\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n const float size = ceil(0.84089642 * 6.0);\n float divider = 0.01; \n float totalWeight = 0.0; \n for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n totalWeight += getWeight(x, y);\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n float weight = getAverageWeight(x, y, totalWeight);\n finalColor += texture2D(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" + "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x \n * @param y\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n\n const float size = ceil(0.84089642 * 6.0);\n const float halfSize = floor(size / 2.0);\n float totalWeight = 0.0; \n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n totalWeight += getWeight(x, y);\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n float divider = 0.01; \n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n\n float weight = getAverageWeight(x, y, totalWeight);\n\n finalColor += texture2D(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" }, "glsl3": { "vert": "\nprecision highp float;\nuniform CCGlobal {\n vec4 cc_time;\n\n vec4 cc_screenSize;\n\n vec4 cc_screenScale;\n\n vec4 cc_nativeSize;\n\n mat4 cc_matView;\n mat4 cc_matViewInv;\n mat4 cc_matProj;\n mat4 cc_matProjInv;\n mat4 cc_matViewProj;\n mat4 cc_matViewProjInv;\n vec4 cc_cameraPos;\n\n vec4 cc_exposure;\n\n vec4 cc_mainLitDir;\n\n vec4 cc_mainLitColor;\n\n vec4 cc_ambientSky;\n vec4 cc_ambientGround;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", - "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x \n * @param y\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n const float size = ceil(0.84089642 * 6.0);\n float divider = 0.01; \n float totalWeight = 0.0; \n for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n totalWeight += getWeight(x, y);\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n float weight = getAverageWeight(x, y, totalWeight);\n finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" + "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\nuniform GaussianBlur {\n\n}\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x \n * @param y\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n\n const float size = ceil(0.84089642 * 6.0);\n const float halfSize = floor(size / 2.0);\n float totalWeight = 0.0; \n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n totalWeight += getWeight(x, y);\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n float divider = 0.01; \n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n\n float weight = getAverageWeight(x, y, totalWeight);\n\n finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" } } ], diff --git a/assets/scenes/GaussianBlurEffectScene.fire b/assets/scenes/GaussianBlurEffectScene.fire index eb98c1e..905dfa3 100755 --- a/assets/scenes/GaussianBlurEffectScene.fire +++ b/assets/scenes/GaussianBlurEffectScene.fire @@ -78,10 +78,10 @@ "_active": true, "_components": [ { - "__id__": 45 + "__id__": 47 }, { - "__id__": 46 + "__id__": 48 } ], "_prefab": null, @@ -171,7 +171,7 @@ "array": [ 0, 0, - 393.1755333181352, + 351.60631393648214, 0, 0, 0, @@ -251,7 +251,7 @@ "_active": true, "_components": [ { - "__id__": 44 + "__id__": 46 } ], "_prefab": null, @@ -1341,15 +1341,18 @@ }, { "__id__": 40 + }, + { + "__id__": 42 } ], "_active": true, "_components": [ { - "__id__": 42 + "__id__": 44 }, { - "__id__": 43 + "__id__": 45 } ], "_prefab": null, @@ -1364,7 +1367,7 @@ "_contentSize": { "__type__": "cc.Size", "width": 384, - "height": 583.73 + "height": 805.73 }, "_anchorPoint": { "__type__": "cc.Vec2", @@ -1496,7 +1499,7 @@ }, { "__type__": "cc.Node", - "_name": "cocos_logo", + "_name": "gaussian_blur", "_objFlags": 0, "_parent": { "__id__": 29 @@ -1517,6 +1520,100 @@ "b": 255, "a": 255 }, + "_contentSize": { + "__type__": "cc.Size", + "width": 316, + "height": 210 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + -177, + 0, + 0, + 0, + 0, + 1, + 1, + 1, + 1 + ] + }, + "_eulerAngles": { + "__type__": "cc.Vec3", + "x": 0, + "y": 0, + "z": 0 + }, + "_skewX": 0, + "_skewY": 0, + "_is3DNode": false, + "_groupIndex": 0, + "groupIndex": 0, + "_id": "0c1gWopWlLwLl+GiSUizBJ" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 32 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "dd3d8f78-9b79-4ca7-9bf7-7a09f7b34108" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "91f28953-0d5f-4379-9ae6-f3f6afb3241c" + }, + "_type": 0, + "_sizeMode": 1, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "eckV5v4lpDULdq2uKByFTd" + }, + { + "__type__": "cc.Node", + "_name": "cocos_logo", + "_objFlags": 0, + "_parent": { + "__id__": 29 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 35 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, "_contentSize": { "__type__": "cc.Size", "width": 195, @@ -1532,7 +1629,7 @@ "ctor": "Float64Array", "array": [ 0, - -207, + -429, 0, 0, 0, @@ -1561,7 +1658,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 32 + "__id__": 34 }, "_enabled": true, "_materials": [ @@ -1599,7 +1696,7 @@ "_active": true, "_components": [ { - "__id__": 35 + "__id__": 37 } ], "_prefab": null, @@ -1626,7 +1723,7 @@ "ctor": "Float64Array", "array": [ 0, - -384, + -606, 0, 0, 0, @@ -1655,7 +1752,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 34 + "__id__": 36 }, "_enabled": true, "_materials": [ @@ -1693,7 +1790,7 @@ "_active": true, "_components": [ { - "__id__": 37 + "__id__": 39 } ], "_prefab": null, @@ -1720,7 +1817,7 @@ "ctor": "Float64Array", "array": [ 0, - -451, + -673, 0, 0, 0, @@ -1749,7 +1846,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 36 + "__id__": 38 }, "_enabled": true, "_materials": [ @@ -1787,7 +1884,7 @@ "_active": true, "_components": [ { - "__id__": 39 + "__id__": 41 } ], "_prefab": null, @@ -1814,7 +1911,7 @@ "ctor": "Float64Array", "array": [ 0, - -513.2, + -735.2, 0, 0, 0, @@ -1843,7 +1940,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 38 + "__id__": 40 }, "_enabled": true, "_materials": [ @@ -1879,7 +1976,7 @@ "_active": true, "_components": [ { - "__id__": 41 + "__id__": 43 } ], "_prefab": null, @@ -1906,7 +2003,7 @@ "ctor": "Float64Array", "array": [ 0, - -567.065, + -789.065, 0, 0, 0, @@ -1935,7 +2032,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 40 + "__id__": 42 }, "_enabled": true, "_materials": [ @@ -2000,7 +2097,7 @@ "_layoutSize": { "__type__": "cc.Size", "width": 384, - "height": 583.73 + "height": 805.73 }, "_resize": 1, "_N$layoutType": 2, diff --git a/assets/scripts/GaussianBlurEffectScene.ts b/assets/scripts/GaussianBlurEffectScene.ts index c707a70..7e5de4a 100644 --- a/assets/scripts/GaussianBlurEffectScene.ts +++ b/assets/scripts/GaussianBlurEffectScene.ts @@ -8,6 +8,8 @@ export default class GaussianBlurEffectScene extends cc.Component { private _examplesParentNode: cc.Node = null; onLoad() { + cc.dynamicAtlasManager.enabled = false; + this._grayLevelSlider = cc.find("Canvas/Content/Controller/GrayLevelSlider/Slider").getComponent(cc.Slider); this._grayLevelSliderLabel = cc.find("Canvas/Content/Controller/GrayLevelSlider/ValueLabel").getComponent(cc.Label); diff --git a/assets/textures/gaussian_blur.png b/assets/textures/gaussian_blur.png new file mode 100644 index 0000000..14ebed1 Binary files /dev/null and b/assets/textures/gaussian_blur.png differ diff --git a/assets/textures/gaussian_blur.png.meta b/assets/textures/gaussian_blur.png.meta new file mode 100644 index 0000000..269bc87 --- /dev/null +++ b/assets/textures/gaussian_blur.png.meta @@ -0,0 +1,34 @@ +{ + "ver": "2.3.3", + "uuid": "c879710d-0419-46be-bf96-92ee1ca52324", + "type": "sprite", + "wrapMode": "clamp", + "filterMode": "bilinear", + "premultiplyAlpha": false, + "genMipmaps": false, + "packable": true, + "platformSettings": {}, + "subMetas": { + "gaussian_blur": { + "ver": "1.0.4", + "uuid": "91f28953-0d5f-4379-9ae6-f3f6afb3241c", + "rawTextureUuid": "c879710d-0419-46be-bf96-92ee1ca52324", + "trimType": "auto", + "trimThreshold": 1, + "rotated": false, + "offsetX": 0, + "offsetY": 0, + "trimX": 0, + "trimY": 0, + "width": 317, + "height": 178, + "rawWidth": 317, + "rawHeight": 178, + "borderTop": 0, + "borderBottom": 0, + "borderLeft": 0, + "borderRight": 0, + "subMetas": {} + } + } +} \ No newline at end of file