From ba90b2170c3d669ae88c32d211c52333c242f344 Mon Sep 17 00:00:00 2001 From: caizhitao Date: Sun, 12 Jan 2020 00:35:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/effects/sprite-local-diffusion.effect | 30 +- .../sprite-local-diffusion.effect.meta | 4 +- assets/materials/sprite-local-diffusion.mtl | 2 +- assets/scenes/LocalDiffusionEffectScene.fire | 674 ++++++++++++++++-- assets/scripts/LocalDiffusionCtrl.ts | 71 +- assets/scripts/LocalDiffusionEffectScene.ts | 62 +- 6 files changed, 718 insertions(+), 125 deletions(-) diff --git a/assets/effects/sprite-local-diffusion.effect b/assets/effects/sprite-local-diffusion.effect index 4edb2b3..3227a0d 100644 --- a/assets/effects/sprite-local-diffusion.effect +++ b/assets/effects/sprite-local-diffusion.effect @@ -3,7 +3,7 @@ // 原理： // 1. 画圆 // 2. 圆心高亮（透明度=1.0），圆边缘不亮（透明度=0.0） -// 3. 在原图像上方叠加圆 +// 4. 在原图像上方叠加圆 CCEffect %{ techniques: @@ -21,7 +21,7 @@ CCEffect %{ # 扩散颜色 centerColor: { - value: [1.0, 0.0, 0.0, 1.0], + value: [1.0, 1.0, 0.0, 1.0], inspector: { type: color, tooltip: "发光颜色" @@ -30,7 +30,7 @@ CCEffect %{ # 扩散起点坐标 centerPoint: { - value: [0.5, 0.5], + value: [0.2, 0.2], inspector: { tooltip: "扩散起点坐标" } @@ -38,7 +38,7 @@ CCEffect %{ # 扩散半径 radius: { - value: 0.2, + value: 0.4, inspector: { tooltip: "扩散半径" } @@ -98,15 +98,15 @@ CCProgram fs %{ // 扩散颜色 vec4 centerColor; - // // 因为现在cc不支持 vec2 数组，所以只能用 vec4 数组 - // // 而一个 vec4 就包含两个 vec2 ，共计 4 个属性，所以如果数组是4，就表示有8个点了 - // vec4 points[4]; - // 扩散起点坐标 vec2 centerPoint; // 扩展半径 float radius; + + // 裁剪掉透明区域上的点光 + // ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义 cropAlpha + bool cropAlpha; } /** @@ -116,13 +116,15 @@ CCProgram fs %{ // 计算当前 uv 到扩散起点的距离 float dis = distance(v_uv0, centerPoint); - // 第一步裁剪 - // 找出扩散范围，扩散范围为1.0透明度，其他范围为0.0透明度 - float a = step(dis, radius); + float a = 1.0 ; - // // 第二步裁剪 - // // 本来透明的uv不要 - // a *= step(0.01, textureColor.a); + // 裁剪掉透明区域上的点光 + if (cropAlpha) { + a *= step(0.01, textureColor.a); + } + + // 裁剪掉扩散范围外的uv + // a *= step(dis, radius); // 加入从中心往外渐变的效果 a *= 1.0 - (dis / radius); diff --git a/assets/effects/sprite-local-diffusion.effect.meta b/assets/effects/sprite-local-diffusion.effect.meta index a06c7ea..8a4663c 100644 --- a/assets/effects/sprite-local-diffusion.effect.meta +++ b/assets/effects/sprite-local-diffusion.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_DIFFUSION\nuniform vec4 centerColor;\nuniform vec2 centerPoint;\nuniform float radius;\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {\n\n float dis = distance(v_uv0, centerPoint);\n\n float a = step(dis, radius);\n\n a *= 1.0 - (dis / radius);\n\n vec4 diffusionColor = centerColor * a;\n\n return textureColor * textureColor.a + diffusionColor;\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 \n #if ENABLE_DIFFUSION\n gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor);\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_DIFFUSION\nuniform vec4 centerColor;\nuniform vec2 centerPoint;\nuniform float radius;\nuniform bool cropAlpha;\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {\n\n float dis = distance(v_uv0, centerPoint);\n\n float a = 1.0 ;\n\n if (cropAlpha) {\n a *= step(0.01, textureColor.a);\n }\n\n a *= 1.0 - (dis / radius);\n\n vec4 diffusionColor = centerColor * a;\n\n return textureColor * textureColor.a + diffusionColor;\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 \n #if ENABLE_DIFFUSION\n gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor);\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_DIFFUSION\nuniform Diffusion {\n\n vec4 centerColor;\n\n vec2 centerPoint;\n\n float radius;\n}\n\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {\n\n float dis = distance(v_uv0, centerPoint);\n\n float a = step(dis, radius);\n\n a *= 1.0 - (dis / radius);\n\n vec4 diffusionColor = centerColor * a;\n\n return textureColor * textureColor.a + diffusionColor;\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 \n #if ENABLE_DIFFUSION\n gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor);\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_DIFFUSION\nuniform Diffusion {\n\n vec4 centerColor;\n\n vec2 centerPoint;\n\n float radius;\n\n bool cropAlpha;\n}\n\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {\n\n float dis = distance(v_uv0, centerPoint);\n\n float a = 1.0 ;\n\n if (cropAlpha) {\n a *= step(0.01, textureColor.a);\n }\n\n a *= 1.0 - (dis / radius);\n\n vec4 diffusionColor = centerColor * a;\n\n return textureColor * textureColor.a + diffusionColor;\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 \n #if ENABLE_DIFFUSION\n gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor);\n #endif\n}\n" } } ], diff --git a/assets/materials/sprite-local-diffusion.mtl b/assets/materials/sprite-local-diffusion.mtl index 159c022..2d15cda 100644 --- a/assets/materials/sprite-local-diffusion.mtl +++ b/assets/materials/sprite-local-diffusion.mtl @@ -11,6 +11,6 @@ "ENABLE_DIFFUSION": true }, "_props": { - "radius": 0.2 + "radius": 0.4 } } \ No newline at end of file diff --git a/assets/scenes/LocalDiffusionEffectScene.fire b/assets/scenes/LocalDiffusionEffectScene.fire index 2208a6d..aa7b2b6 100755 --- a/assets/scenes/LocalDiffusionEffectScene.fire +++ b/assets/scenes/LocalDiffusionEffectScene.fire @@ -78,10 +78,10 @@ "_active": true, "_components": [ { - "__id__": 113 + "__id__": 125 }, { - "__id__": 114 + "__id__": 126 } ], "_prefab": null, @@ -171,7 +171,7 @@ "array": [ 0, 0, - 393.5138244914885, + 492.7684547533456, 0, 0, 0, @@ -245,13 +245,13 @@ "__id__": 9 }, { - "__id__": 97 + "__id__": 109 } ], "_active": true, "_components": [ { - "__id__": 112 + "__id__": 124 } ], "_prefab": null, @@ -428,7 +428,7 @@ }, { "__type__": "cc.Node", - "_name": "Sliders", + "_name": "Controller", "_objFlags": 0, "_parent": { "__id__": 5 @@ -448,15 +448,18 @@ }, { "__id__": 78 + }, + { + "__id__": 95 } ], "_active": true, "_components": [ { - "__id__": 95 + "__id__": 107 }, { - "__id__": 96 + "__id__": 108 } ], "_prefab": null, @@ -471,7 +474,7 @@ "_contentSize": { "__type__": "cc.Size", "width": 576, - "height": 444 + "height": 540 }, "_anchorPoint": { "__type__": "cc.Vec2", @@ -1698,7 +1701,7 @@ "__type__": "TypedArray", "ctor": "Float64Array", "array": [ - 0, + 230.40000000000006, 0, 0, 0, @@ -1877,7 +1880,7 @@ "_N$handle": { "__id__": 37 }, - "_N$progress": 0, + "_N$progress": 1, "_id": "35YKg9gStEhLErp2N/639Q" }, { @@ -1986,8 +1989,8 @@ } ], "_useOriginalSize": false, - "_string": "0.10 | 26", - "_N$string": "0.10 | 26", + "_string": "1.00 | 255", + "_N$string": "1.00 | 255", "_fontSize": 40, "_lineHeight": 40, "_enableWrapText": true, @@ -3981,7 +3984,7 @@ "__type__": "TypedArray", "ctor": "Float64Array", "array": [ - 23.039999999999992, + 92.16000000000005, 0, 0, 0, @@ -4160,7 +4163,7 @@ "_N$handle": { "__id__": 88 }, - "_N$progress": 0.1, + "_N$progress": 0.4, "_id": "c2uNTLxCdF2oHJ+IS0EBLe" }, { @@ -4312,6 +4315,589 @@ "_originalHeight": 0, "_id": "785zd8XfJMALOKEKNQ7O0m" }, + { + "__type__": "cc.Node", + "_name": "CropAlphaToggle", + "_objFlags": 0, + "_parent": { + "__id__": 9 + }, + "_children": [ + { + "__id__": 96 + }, + { + "__id__": 99 + } + ], + "_active": true, + "_components": [ + { + "__id__": 106 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 576, + "height": 60 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + -510, + 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": "0bSVqNIRdKirxNt6luVamv" + }, + { + "__type__": "cc.Node", + "_name": "DescLabel", + "_objFlags": 0, + "_parent": { + "__id__": 95 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 97 + }, + { + "__id__": 98 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 432, + "height": 40 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 1, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 144, + 0, + 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": "2a4P++lclCLYLPc4P9YhfR" + }, + { + "__type__": "cc.Label", + "_name": "SliderDescLabel