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

初步支持单点扩散

Browse Source
This commit is contained in:
caizhitao 2020-01-10 23:05:44 +08:00
parent f39e39e248
commit 6ac69a841a
7 changed files with 217 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
assets/effects/sprite-local-diffusion.effect
View File

@ -18,12 +18,29 @@ CCEffect %{
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
# 老化程度
oldLevel: {
value: 1.0,
# 扩散颜色
centerColor: {
value: [1.0, 1.0, 0.0, 1.0],
inspector: {
type: color,
tooltip: "发光颜色"
}
}
# 扩散起点坐标
centerPoint: {
value: [0.5, 0.5],
inspector: {
tooltip: "老化程度",
range: [0.0, 1.0]
tooltip: "扩散起点坐标"
}
}
# 扩散半径
radius: {
value: 0.2,
inspector: {
tooltip: "扩散半径"
}
}
}%
@ -76,24 +93,45 @@ CCProgram fs %{
uniform sampler2D texture;
#endif
#if USE_OLD_PHOTO
uniform OldPhoto {
// 老化程度
float oldLevel;
#if ENABLE_DIFFUSION
uniform Diffusion {
// 扩散颜色
vec4 centerColor;
// 扩散起点坐标
vec2 centerPoint;
// 扩展半径
float radius;
}
/**
* 获取老化颜色
*
* @param color 原始颜色
*
* @return 老化后的颜色
* 添加某个扩散点后混合后的纹理颜色
*/
vec4 getOldPhotoColor(vec4 color) {
float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b;
float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b;
float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;
return vec4(r, g, b, color.a);
vec4 addDiffusionColor(vec4 textureColor, vec2 centerPoint, float radius, vec4 centerColor) {
// 计算当前 uv 到扩散起点的距离
float dis = distance(v_uv0, centerPoint);
// 第一步裁剪
// 找出扩散范围，扩散范围为1.0透明度，其他范围为0.0透明度
float a = step(dis, radius);
// // 第二步裁剪
// // 本来透明的uv不要
// a *= step(0.01, textureColor.a);
// 加入从中心往外渐变的效果
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;
// 混合颜色：在原始图像颜色上叠加扩散颜色
return textureColor * textureColor.a + diffusionColor;
}
#endif
@ -111,12 +149,14 @@ CCProgram fs %{
ALPHA_TEST(o);
#if USE_OLD_PHOTO
vec4 srcColor = o;
vec4 oldColor = getOldPhotoColor(srcColor);
o = srcColor + (oldColor - srcColor) * oldLevel;
#endif
gl_FragColor = o;
#if ENABLE_DIFFUSION
gl_FragColor = addDiffusionColor(gl_FragColor, centerPoint, radius, centerColor);
// gl_FragColor = addDiffusionColor(gl_FragColor, vec2(0.7, 0.), 0.2, vec4(1.0, 1.0, 0.0, 1.0));
// gl_FragColor = addDiffusionColor(gl_FragColor, vec2(0.8, 0.), 0.2, vec4(1.0, 1.0, 0.0, 1.0));
// gl_FragColor = addDiffusionColor(gl_FragColor, vec2(0.9, 0.), 0.2, vec4(1.0, 1.0, 0.0, 1.0));
// gl_FragColor = addDiffusionColor(gl_FragColor, vec2(0.2, 0.), 0.2, vec4(1.0, 1.0, 0.0, 1.0));
#endif
}
}%

4
assets/effects/sprite-local-diffusion.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 USE_OLD_PHOTO\nuniform float oldLevel;\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\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 #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\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\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 USE_OLD_PHOTO\nuniform OldPhoto {\n\n float oldLevel;\n}\n\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\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 #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\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\n #endif\n}\n"
}
}
],

6
assets/materials/sprite-local-diffusion.mtl
View File

@ -8,7 +8,9 @@
},
"_defines": {
"USE_TEXTURE": true,
"USE_OLD_PHOTO": true
"ENABLE_DIFFUSION": true
},
"_props": {}
"_props": {
"radius": 0.2
}
}

49
assets/scenes/LocalDiffusionEffectScene.fire
View File

@ -78,10 +78,10 @@
"_active": true,
"_components": [
{
"__id__": 45
"__id__": 46
},
{
"__id__": 46
"__id__": 47
}
],
"_prefab": null,
@ -171,7 +171,7 @@
"array": [
0,
0,
418.2902700278839,
351.60631393648214,
0,
0,
0,
@ -251,7 +251,7 @@
"_active": true,
"_components": [
{
"__id__": 44
"__id__": 45
}
],
"_prefab": null,
@ -1331,25 +1331,25 @@
"__id__": 32
},
{
"__id__": 34
"__id__": 35
},
{
"__id__": 36
"__id__": 37
},
{
"__id__": 38
"__id__": 39
},
{
"__id__": 40
"__id__": 41
}
],
"_active": true,
"_components": [
{
"__id__": 42
"__id__": 43
},
{
"__id__": 43
"__id__": 44
}
],
"_prefab": null,
@ -1506,6 +1506,9 @@
"_components": [
{
"__id__": 33
},
{
"__id__": 34
}
],
"_prefab": null,
@ -1588,6 +1591,16 @@
"_atlas": null,
"_id": "74+WCqN01NIbcSpr5gcxmE"
},
{
"__type__": "ababaxBpzZMv60DJIli3Qbn",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 32
},
"_enabled": true,
"_id": "deEKANKq9HW4KcsK/CN+56"
},
{
"__type__": "cc.Node",
"_name": "ball_1",
@ -1599,7 +1612,7 @@
"_active": true,
"_components": [
{
"__id__": 35
"__id__": 36
}
],
"_prefab": null,
@ -1655,7 +1668,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 34
"__id__": 35
},
"_enabled": true,
"_materials": [
@ -1693,7 +1706,7 @@
"_active": true,
"_components": [
{
"__id__": 37
"__id__": 38
}
],
"_prefab": null,
@ -1749,7 +1762,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 36
"__id__": 37
},
"_enabled": true,
"_materials": [
@ -1787,7 +1800,7 @@
"_active": true,
"_components": [
{
"__id__": 39
"__id__": 40
}
],
"_prefab": null,
@ -1843,7 +1856,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 38
"__id__": 39
},
"_enabled": true,
"_materials": [
@ -1879,7 +1892,7 @@
"_active": true,
"_components": [
{
"__id__": 41
"__id__": 42
}
],
"_prefab": null,
@ -1935,7 +1948,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 40
"__id__": 41
},
"_enabled": true,
"_materials": [

76
assets/scripts/LocalDiffusionCtrl.ts Normal file
View File

@ -0,0 +1,76 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class LocalDiffusionCtrl extends cc.Component {
private color: cc.Color = cc.Color.RED;
onEnable() {
this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
}
onDisable() {
this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
}
private _onTouchStart(event: cc.Event.EventTouch) {
this._onTouchMove(event);
}
private _onTouchMove(event: cc.Event.EventTouch) {
let touchPointInWorldSpace = event.getLocation();
let touchPointInNodeSpace = this.node.convertToNodeSpaceAR(touchPointInWorldSpace);
// 将触摸点转换为OPENGL坐标系并归一化
let normalizePos = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
this._updateMaterial({
centerColor: this.color,
certerPoint: normalizePos,
radius: 0.6
});
}
private _onTouchEnd(event: cc.Event.EventTouch) {
this._onTouchCancel(event);
}
private _onTouchCancel(event: cc.Event.EventTouch) {}
private _updateMaterial(param: {
/**
* 中心点颜色
*/
centerColor: cc.Color;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2;
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number;
}) {
this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", cc.v4(1.0, 1.0, 0.0, 1.0));
material.setProperty(
"centerColor",
cc.v4(param.centerColor.getR() / 255, param.centerColor.getG() / 255, param.centerColor.getB() / 255, param.centerColor.getA() / 255)
);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);
});
}
}

9
assets/scripts/LocalDiffusionCtrl.ts.meta Normal file
View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "ababac41-a736-4cbf-ad03-248962dd06e7",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

37
assets/scripts/LocalDiffusionEffectScene.ts
View File

@ -8,6 +8,8 @@ export default class LocalDiffusionEffectScene extends cc.Component {
private _examplesParentNode: cc.Node = null;
onLoad() {
cc.dynamicAtlasManager.enabled = false;
this._oldLevelSlider = cc.find("Canvas/Content/Sliders/OldLevelSlider/Slider").getComponent(cc.Slider);
this._oldLevelSliderLabel = cc.find("Canvas/Content/Sliders/OldLevelSlider/ValueLabel").getComponent(cc.Label);
@ -29,10 +31,10 @@ export default class LocalDiffusionEffectScene extends cc.Component {
private _onSliderChanged() {
this._oldLevelSliderLabel.string = `${this._oldLevelSlider.progress.toFixed(2)}`;
// 更新材质
this._updateRenderComponentMaterial({
oldLevel: this._oldLevelSlider.progress
});
// // 更新材质
// this._updateRenderComponentMaterial({
// oldLevel: this._oldLevelSlider.progress
// });
}
/**
@ -44,14 +46,35 @@ export default class LocalDiffusionEffectScene extends cc.Component {
*/
private _updateRenderComponentMaterial(param: {
/**
* 老化程度 [0.0, 1.0] ，1.0 表示完全老化
* 中心点颜色
*/
oldLevel: number;
centerColor: cc.Color;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2;
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number;
}) {
this._examplesParentNode.children.forEach(childNode => {
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("oldLevel", param.oldLevel);
// material.setProperty("centerColor", cc.v4(1.0, 1.0, 0.0, 1.0));
material.setProperty(
"centerColor",
cc.v4(
param.centerColor.getR() / 255,
param.centerColor.getG() / 255,
param.centerColor.getB() / 255,
param.centerColor.getA() / 255
)
);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);
});
});