diff --git a/CHANGELOG.md b/CHANGELOG.md index 105aec7..24090e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # ChangeLog +## 0.5.0 (2020-01-13) + +- 加入扫光特效 + ## 0.4.0 (2020-01-12) - 加入点光特效 diff --git a/README.md b/README.md index 0e3a710..a469969 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Cocos Creator Shader Effect Demo -[![](https://img.shields.io/badge/Release-0.3.0-green.svg)](CHANGELOG.md) +[![](https://img.shields.io/badge/Release-0.5.0-green.svg)](CHANGELOG.md) [![](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE) [![](https://img.shields.io/badge/Support-Cocos%20Creator%20v2.2.1-orange.svg)](http://www.cocos.com/creator) @@ -26,6 +26,9 @@ ## 三、特效预览 +### 扫光（实现原理，可能在编写中，催更可到底部扫码，支持急件~🤣）(2020.01.13更新） + +![](static/effects/2d-sprite-flash-light.gif) ### 点光（实现原理，可能在编写中，催更可到底部扫码，支持急件~🤣）(2020.01.12更新） @@ -63,7 +66,6 @@ ## 四、TODO * [ ] 图像模糊 -* [ ] 闪光 * [ ] 波浪 * [ ] 雨滴 * [ ] ... diff --git a/assets/effects/sprite-point-light.effect b/assets/effects/sprite-point-light.effect index f66fed9..d3a90a6 100644 --- a/assets/effects/sprite-point-light.effect +++ b/assets/effects/sprite-point-light.effect @@ -116,7 +116,7 @@ CCProgram fs %{ /** * 添加某个扩散点后混合后的纹理颜色 */ - vec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) { + vec4 addLightColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) { // 计算当前 uv 到扩散起点的距离 float dis = distance(v_uv0, centerPoint); @@ -135,10 +135,6 @@ CCProgram fs %{ // 加入从中心往外渐变的效果 a *= 1.0 - (dis / radius); - // 加点料，让中心点更加亮 - // a = -1.0 * (a - 1.0) * (a - 1.0) + 1.0; - // a = -1.0 * (a - 1.0) * (a - 1.0) * (a - 1.0) * (a - 1.0) + 1.0; - // 计算出扩散范围内，不同 uv 对应的实际扩散颜色值 vec4 diffusionColor = centerColor * a; @@ -164,7 +160,7 @@ CCProgram fs %{ gl_FragColor = o; #if ENABLE_DIFFUSION - gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor); + gl_FragColor = addLightColor(gl_FragColor, centerPoint, radius, centerColor); #endif } }% diff --git a/assets/effects/sprite-point-light.effect.meta b/assets/effects/sprite-point-light.effect.meta index 43ee7b3..8319c0c 100644 --- a/assets/effects/sprite-point-light.effect.meta +++ b/assets/effects/sprite-point-light.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;\nuniform bool cropAlpha;\nuniform bool enableFog;\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 if (!enableFog) {\n a *= step(dis, radius);\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" + "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;\nuniform bool enableFog;\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addLightColor(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 if (!enableFog) {\n a *= step(dis, radius);\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 = addLightColor(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 bool cropAlpha;\n\n bool enableFog;\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 if (!enableFog) {\n a *= step(dis, radius);\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" + "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 bool enableFog;\n}\n\n/**\n * 添加某个扩散点后混合后的纹理颜色\n */\nvec4 addLightColor(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 if (!enableFog) {\n a *= step(dis, radius);\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 = addLightColor(gl_FragColor, centerPoint, radius, centerColor);\n #endif\n}\n" } } ], diff --git a/assets/scripts/PointLightCtrlComponent.ts b/assets/scripts/PointLightCtrlComponent.ts index 0d91405..80a2e85 100644 --- a/assets/scripts/PointLightCtrlComponent.ts +++ b/assets/scripts/PointLightCtrlComponent.ts @@ -2,7 +2,7 @@ const { ccclass, property } = cc._decorator; @ccclass export default class PointLightCtrlComponent extends cc.Component { - private _localDiffusionUniform: PointLightUniform = new PointLightUniform(); + private _pointLightUBO: PointLightUBO = new PointLightUBO(); onEnable() { this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchStart, this); @@ -26,7 +26,7 @@ export default class PointLightCtrlComponent extends cc.Component { // 将触摸点转换为OPENGL坐标系并归一化 // OpenGl 坐标系原点在左上角 - this._localDiffusionUniform.certerPoint = cc.v2( + this._pointLightUBO.centerPoint = cc.v2( this.node.anchorX + touchPointInNodeSpace.x / this.node.width, 1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height) ); @@ -34,28 +34,28 @@ export default class PointLightCtrlComponent extends cc.Component { this._updateMaterial(); } - private _onPropertyChange(localDiffusionUniform: PointLightUniform) { - this._localDiffusionUniform.centerColor = localDiffusionUniform.centerColor; - this._localDiffusionUniform.radius = localDiffusionUniform.radius; - this._localDiffusionUniform.cropAlpha = localDiffusionUniform.cropAlpha; - this._localDiffusionUniform.enableFog = localDiffusionUniform.enableFog; + private _onPropertyChange(pointLightUBO: PointLightUBO) { + this._pointLightUBO.centerColor = pointLightUBO.centerColor; + this._pointLightUBO.radius = pointLightUBO.radius; + this._pointLightUBO.cropAlpha = pointLightUBO.cropAlpha; + this._pointLightUBO.enableFog = pointLightUBO.enableFog; this._updateMaterial(); } private _updateMaterial() { this.getComponents(cc.RenderComponent).forEach(renderComponent => { let material: cc.Material = renderComponent.getMaterial(0); - material.setProperty("centerColor", this._localDiffusionUniform.centerColor); - material.setProperty("centerPoint", this._localDiffusionUniform.certerPoint); - material.setProperty("radius", this._localDiffusionUniform.radius); - material.setProperty("cropAlpha", this._localDiffusionUniform.cropAlpha); - material.setProperty("enableFog", this._localDiffusionUniform.enableFog); + material.setProperty("centerColor", this._pointLightUBO.centerColor); + material.setProperty("centerPoint", this._pointLightUBO.centerPoint); + material.setProperty("radius", this._pointLightUBO.radius); + material.setProperty("cropAlpha", this._pointLightUBO.cropAlpha); + material.setProperty("enableFog", this._pointLightUBO.enableFog); renderComponent.setMaterial(0, material); }); } } -export class PointLightUniform { +export class PointLightUBO { /** * 中心点颜色 */ @@ -64,7 +64,7 @@ export class PointLightUniform { /** * 中心点坐标 ([0.0, 1.0], [0.0, 1.0]) */ - certerPoint: cc.Vec2 = cc.v2(0.5, 0.5); + centerPoint: cc.Vec2 = cc.v2(0.5, 0.5); /** * 扩散半径 [0.0, 1.0] diff --git a/assets/scripts/PointLightEffectScene.ts b/assets/scripts/PointLightEffectScene.ts index 8ccb497..5b8bd03 100644 --- a/assets/scripts/PointLightEffectScene.ts +++ b/assets/scripts/PointLightEffectScene.ts @@ -1,4 +1,4 @@ -import PointLightCtrlComponent, { PointLightUniform } from "./PointLightCtrlComponent"; +import PointLightCtrlComponent, { PointLightUBO } from "./PointLightCtrlComponent"; const { ccclass, property } = cc._decorator; @@ -78,7 +78,7 @@ export default class PointLightEffectScene extends cc.Component { // 通知子节点更新材质 this._examplesParentNode.children.forEach(childNode => { - childNode.emit("on_property_change", { + childNode.emit("on_property_change", { centerColor: cc.color( Math.round(255 * this._redSlider.progress), Math.round(255 * this._greenSlider.progress), diff --git a/static/effects/2d-sprite-flash-light.gif b/static/effects/2d-sprite-flash-light.gif new file mode 100644 index 0000000..0cc1709 Binary files /dev/null and b/static/effects/2d-sprite-flash-light.gif differ