Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善demo

Browse Source
This commit is contained in:
caizhitao 2020-01-20 23:14:39 +08:00
parent 1c5012ab65
commit 75d4d024bf
6 changed files with 191 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
assets/effects/sprite-gaussian-blur.effect
View File

@ -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;
}
}

4
assets/effects/sprite-gaussian-blur.effect.meta
View File

@ -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"
}
}
],

143
assets/scenes/GaussianBlurEffectScene.fire
View File

@ -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,

2
assets/scripts/GaussianBlurEffectScene.ts
View File

@ -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);

BIN
assets/textures/gaussian_blur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

34
assets/textures/gaussian_blur.png.meta Normal file
View File

@ -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": {}
}
}
}