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

Merge branch 'dev'

Browse Source
This commit is contained in:
caizhitao 2020-01-13 23:44:24 +08:00
commit af8aa46786
3 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -19,6 +19,8 @@
* [Cocos Creator Shader Effect 系列 - 4 - 老照片特效](https://www.jianshu.com/p/711a54ff2fa0) * [Cocos Creator Shader Effect 系列 - 4 - 老照片特效](https://www.jianshu.com/p/711a54ff2fa0)
* [Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效](https://www.jianshu.com/p/40e72ab76afd) * [Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效](https://www.jianshu.com/p/40e72ab76afd)
* [Cocos Creator Shader Effect 系列 - 6 - 内发光特效](https://www.jianshu.com/p/326b73f86ecc) * [Cocos Creator Shader Effect 系列 - 6 - 内发光特效](https://www.jianshu.com/p/326b73f86ecc)
* [Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效](https://www.jianshu.com/p/8ff03b34b0bd)
* 编写中... * 编写中...
@ -26,11 +28,11 @@
## 三、特效预览 ## 三、特效预览
### 扫光（实现原理，可能在编写中，催更可到底部扫码，支持急件~🤣）(2020.01.13更新） ### 扫光（实现原理同点光一样，可参考[点光实现原理文章](https://www.jianshu.com/p/711a54ff2fa0)）(2020.01.13更新）
![](static/effects/2d-sprite-flash-light.gif) ![](static/effects/2d-sprite-flash-light.gif)
### 点光（实现原理，可能在编写中，催更可到底部扫码，支持急件~🤣）(2020.01.12更新） ### 点光（[实现原理](https://www.jianshu.com/p/8ff03b34b0bd)）(2020.01.12更新）
![](static/effects/2d-sprite-point-light.gif) ![](static/effects/2d-sprite-point-light.gif)

12
assets/effects/sprite-point-light.effect
View File

@ -117,7 +117,7 @@ CCProgram fs %{
* 添加某个扩散点后混合后的纹理颜色 * 添加某个扩散点后混合后的纹理颜色
*/ */
vec4 addLightColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) { vec4 addLightColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {
// 计算当前 uv 到扩散起点的距离 // 计算当前 uv 到圆心起点的距离
float dis = distance(v_uv0, centerPoint); float dis = distance(v_uv0, centerPoint);
float a = 1.0 ; float a = 1.0 ;
@ -127,7 +127,7 @@ CCProgram fs %{
a *= step(0.01, textureColor.a); a *= step(0.01, textureColor.a);
} }
// 裁剪掉扩散范围外的uv（迷雾效果） // 裁剪掉圆范围外的uv（迷雾效果）
if (!enableFog) { if (!enableFog) {
a *= step(dis, radius); a *= step(dis, radius);
} }
@ -135,11 +135,11 @@ CCProgram fs %{
// 加入从中心往外渐变的效果 // 加入从中心往外渐变的效果
a *= 1.0 - (dis / radius); a *= 1.0 - (dis / radius);
// 计算出扩散范围内，不同 uv 对应的实际扩散颜色值 // 计算出圆范围内，不同 uv 对应的实际颜色值
vec4 diffusionColor = centerColor * a; vec4 lightColor = centerColor * a;
// 混合颜色：在原始图像颜色上叠加扩散颜色 // 混合颜色：在原始图像颜色上叠加圆颜色
return textureColor * textureColor.a + diffusionColor; return textureColor * textureColor.a + lightColor;
} }
#endif #endif

4
assets/effects/sprite-point-light.effect.meta
View File

@ -5,11 +5,11 @@
{ {
"glsl1": { "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", "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 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" "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 lightColor = centerColor * a;\n\n return textureColor * textureColor.a + lightColor;\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": { "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", "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 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" "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 lightColor = centerColor * a;\n\n return textureColor * textureColor.a + lightColor;\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"
} }
} }
], ],