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-11 18:58:30 +08:00
parent 6ac69a841a
commit 7e197c0892
5 changed files with 3207 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// 老照片特效
// 点光/点扩散
// 原理：
// r = 0.393 * r + 0.769 * g + 0.189 * b;
// g = 0.349 * r + 0.686 * g + 0.168 * b;
// b = 0.272 * r + 0.534 * g + 0.131 * b;
// 1. 画圆
// 2. 圆心高亮（透明度=1.0），圆边缘不亮（透明度=0.0）
// 3. 在原图像上方叠加圆
CCEffect %{
techniques:
@ -21,7 +21,7 @@ CCEffect %{
# 扩散颜色
centerColor: {
value: [1.0, 1.0, 0.0, 1.0],
value: [1.0, 0.0, 0.0, 1.0],
inspector: {
type: color,
tooltip: "发光颜色"
@ -98,6 +98,10 @@ CCProgram fs %{
// 扩散颜色
vec4 centerColor;
// // 因为现在cc不支持 vec2 数组，所以只能用 vec4 数组
// // 而一个 vec4 就包含两个 vec2 ，共计 4 个属性，所以如果数组是4，就表示有8个点了
// vec4 points[4];
// 扩散起点坐标
vec2 centerPoint;
@ -153,10 +157,6 @@ CCProgram fs %{
#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 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"
"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"
},
"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\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\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"
}
}
],

3187
assets/scenes/LocalDiffusionEffectScene.fire
View File

File diff suppressed because it is too large Load Diff

37
assets/scripts/LocalDiffusionCtrl.ts
View File

@ -2,20 +2,20 @@ const { ccclass, property } = cc._decorator;
@ccclass
export default class LocalDiffusionCtrl extends cc.Component {
private color: cc.Color = cc.Color.RED;
private _centerPointPos: cc.Vec2 = cc.v2(0.5, 0.5);
private _centerColor: cc.Color = cc.Color.RED;
private _radius: number = 0.2;
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);
this.node.on("on_property_change", this._onPropertyChange, 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);
this.node.off("on_property_change", this._onPropertyChange, this);
}
private _onTouchStart(event: cc.Event.EventTouch) {
@ -27,24 +27,29 @@ export default class LocalDiffusionCtrl extends cc.Component {
let touchPointInNodeSpace = this.node.convertToNodeSpaceAR(touchPointInWorldSpace);
// 将触摸点转换为OPENGL坐标系并归一化
let normalizePos = cc.v2(
// OpenGl 坐标系原点在左上角
this._centerPointPos = 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
centerColor: this._centerColor,
certerPoint: this._centerPointPos,
radius: this._radius
});
}
private _onTouchEnd(event: cc.Event.EventTouch) {
this._onTouchCancel(event);
private _onPropertyChange(color: cc.Color, radius: number) {
this._centerColor = color;
this._radius = radius;
this._updateMaterial({
centerColor: this._centerColor,
certerPoint: this._centerPointPos,
radius: this._radius
});
}
private _onTouchCancel(event: cc.Event.EventTouch) {}
private _updateMaterial(param: {
/**
* 中心点颜色
@ -63,11 +68,7 @@ export default class LocalDiffusionCtrl extends cc.Component {
}) {
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("centerColor", param.centerColor);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);

111
assets/scripts/LocalDiffusionEffectScene.ts
View File

@ -1,27 +1,65 @@
import LocalDiffusionCtrl from "./LocalDiffusionCtrl";
const { ccclass, property } = cc._decorator;
@ccclass
export default class LocalDiffusionEffectScene extends cc.Component {
private _oldLevelSlider: cc.Slider = null;
private _oldLevelSliderLabel: cc.Label = null;
private _redSlider: cc.Slider = null;
private _redSliderLabel: cc.Label = null;
private _greenSlider: cc.Slider = null;
private _greenSliderLabel: cc.Label = null;
private _blueSlider: cc.Slider = null;
private _blueSliderLabel: cc.Label = null;
private _alphaSlider: cc.Slider = null;
private _alphaSliderLabel: cc.Label = null;
private _radiuSlider: cc.Slider = null;
private _radiuSliderLabel: cc.Label = null;
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);
this._redSlider = cc.find("Canvas/Content/Sliders/ColorRedSlider/Slider").getComponent(cc.Slider);
this._redSliderLabel = cc.find("Canvas/Content/Sliders/ColorRedSlider/ValueLabel").getComponent(cc.Label);
this._greenSlider = cc.find("Canvas/Content/Sliders/ColorGreenSlider/Slider").getComponent(cc.Slider);
this._greenSliderLabel = cc.find("Canvas/Content/Sliders/ColorGreenSlider/ValueLabel").getComponent(cc.Label);
this._blueSlider = cc.find("Canvas/Content/Sliders/ColorBlueSlider/Slider").getComponent(cc.Slider);
this._blueSliderLabel = cc.find("Canvas/Content/Sliders/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
this._alphaSlider = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/Slider").getComponent(cc.Slider);
this._alphaSliderLabel = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
this._radiuSlider = cc.find("Canvas/Content/Sliders/RadiuSlider/Slider").getComponent(cc.Slider);
this._radiuSliderLabel = cc.find("Canvas/Content/Sliders/RadiuSlider/ValueLabel").getComponent(cc.Label);
// 代码添加控制脚本
this._examplesParentNode = cc.find("Canvas/Content/Examples");
this._examplesParentNode.children.forEach(childNode => {
childNode.addComponent(LocalDiffusionCtrl);
});
}
onEnable() {
this._oldLevelSlider.node.on("slide", this._onSliderChanged, this);
this._redSlider.node.on("slide", this._onSliderChanged, this);
this._greenSlider.node.on("slide", this._onSliderChanged, this);
this._blueSlider.node.on("slide", this._onSliderChanged, this);
this._alphaSlider.node.on("slide", this._onSliderChanged, this);
this._radiuSlider.node.on("slide", this._onSliderChanged, this);
}
onDisable() {
this._oldLevelSlider.node.off("slide", this._onSliderChanged, this);
this._redSlider.node.off("slide", this._onSliderChanged, this);
this._greenSlider.node.off("slide", this._onSliderChanged, this);
this._blueSlider.node.off("slide", this._onSliderChanged, this);
this._alphaSlider.node.off("slide", this._onSliderChanged, this);
this._radiuSlider.node.off("slide", this._onSliderChanged, this);
}
start() {
@ -29,54 +67,25 @@ export default class LocalDiffusionEffectScene extends cc.Component {
}
private _onSliderChanged() {
this._oldLevelSliderLabel.string = `${this._oldLevelSlider.progress.toFixed(2)}`;
// 更新进度条值 Label 文本
this._redSliderLabel.string = `${this._redSlider.progress.toFixed(2)} | ${Math.round(255 * this._redSlider.progress)}`;
this._greenSliderLabel.string = `${this._greenSlider.progress.toFixed(2)} | ${Math.round(255 * this._greenSlider.progress)}`;
this._blueSliderLabel.string = `${this._blueSlider.progress.toFixed(2)} | ${Math.round(255 * this._blueSlider.progress)}`;
this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
this._radiuSliderLabel.string = `${this._radiuSlider.progress.toFixed(2)}`;
// // 更新材质
// this._updateRenderComponentMaterial({
// oldLevel: this._oldLevelSlider.progress
// });
}
/**
* 更新渲染组件的材质
*
* 1. 获取材质
* 2. 给材质的 unitform 变量赋值
* 3. 重新将材质赋值回去
*/
private _updateRenderComponentMaterial(param: {
/**
* 中心点颜色
*/
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("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
)
childNode.emit(
"on_property_change",
cc.color(
Math.round(255 * this._redSlider.progress),
Math.round(255 * this._greenSlider.progress),
Math.round(255 * this._blueSlider.progress),
Math.round(255 * this._alphaSlider.progress)
),
this._radiuSlider.progress
);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);
});
});
}
}