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-13 17:42:53 +08:00
parent c95329e7ab
commit acf72e0e4f
6 changed files with 1585 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
assets/effects/sprite-flash-light.effect
View File

@ -37,7 +37,7 @@ CCEffect %{
}
# 光束倾斜角度
lightAngle: {
valu: 45.0,
value: 36.0,
inspctor: {
tooltip: "光束倾斜角度",
range: [0.0, 1.0],
@ -46,19 +46,35 @@ CCEffect %{
# 光束宽度
lightWidth: {
value: 0.4,
value: 0.2,
inspector: {
tooltip: "光束宽度"
}
}
# 启用光束渐变
enablGradient: {
value: 0,
enableGradient: {
value: 1.0,
inspecator: {
tooltip: "是否启用光束渐变。0：不启用，非0：启用"
}
}
# 裁剪掉透明区域上的光
cropAlpha: {
value: 1.0,
inspecator: {
tooltip: "是否裁剪透明区域上的光。0：不启用，非0：启用"
}
}
# 是否启用迷雾效果
enableFog: {
value: 0.0,
inspecator: {
tooltip: "是否启用迷雾效果。0：不启用，非0：启用"
}
}
}%
@ -124,49 +140,70 @@ CCProgram fs %{
float lightWidth;
// 启用光束渐变
float enablGradient;
// ps：编辑器还不支持 bool 类型的样子，因此用float来定义
float enableGradient;
// 裁剪掉透明区域上的点光
// ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义
bool cropAlpha;
// 裁剪掉透明区域上的光
// ps：编辑器还不支持 bool 类型的样子，因此用float来定义
float cropAlpha;
// 是否启用迷雾效果
// ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义
bool enableFog;
// ps：编辑器还不支持 bool 类型的样子，因此用float来定义
float enableFog;
}
// /**
// * 添加光束颜色
// */
// vec4 addLightColor(vec4 textureColor, vec2 lightCenterPoint, float radius, vec4 lightColor) {
// // 计算当前 uv 到 光束 的距离
// float dis = distance(v_uv0, lightCenterPoint);
/**
* 添加光束颜色
*/
vec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {
// 计算当前 uv 到 光束 的距离
float angleInRadians = radians(lightAngle);
// float a = 1.0 ;
// 角度0与非0不同处理
float dis = 0.0;
if (mod(lightAngle, 180.0) != 0.0) {
// 计算光束中心线下方与X轴交点的X坐标
// 1.0 - lightCenterPoint.y 是将转换为OpenGL坐标系，下文的 1.0 - y 类似
float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));
// // 裁剪掉透明区域上的点光
// if (cropAlpha) {
// a *= step(0.01, textureColor.a);
// }
// 以当前点画一条平行于X轴的线，假设此线和光束中心线相交的点为D点
// 那么
// D.y = uv0.y
// D.x = lightOffsetX + D.y / tan(angle)
float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);
// // 裁剪掉扩散范围外的uv（迷雾效果）
// if (!enableFog) {
// a *= step(dis, radius);
// }
// D 到当前 uv0 的距离就是
// dis = |uv0.x - D.x|
float offsetDis = abs(v_uv0.x - dx);
// // 加入从中心往外渐变的效果
// a *= 1.0 - (dis / radius);
// 当前点到光束中心线的的垂直距离就好算了
dis = sin(angleInRadians) * offsetDis;
} else {
dis = abs(v_uv0.y - lightCenterPoint.y);
}
// // 加点料，让中心点更加亮
// // 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;
float a = 1.0 ;
// 裁剪掉透明区域上的点光
if (bool(cropAlpha)) {
a *= step(0.01, textureColor.a);
}
// // 计算出扩散范围内，不同 uv 对应的实际扩散颜色值
// vec4 diffusionColor = lightColor * a;
// 裁剪掉光束范围外的uv（迷雾效果）
if (!bool(enableFog)) {
a *= step(dis, lightWidth * 0.5);
}
// // 混合颜色：在原始图像颜色上叠加扩散颜色
// return textureColor * textureColor.a + diffusionColor;
// }
// 加入从中心往外渐变的效果
if (bool(enableGradient)) {
a *= 1.0 - dis / (lightWidth * 0.5);
}
// 计算出扩散范围内，不同 uv 对应的实际扩散颜色值
vec4 finalLightColor = lightColor * a;
// 混合颜色：在原始图像颜色上叠加扩散颜色
return textureColor * textureColor.a + finalLightColor;
}
#endif
void main () {
@ -186,7 +223,7 @@ CCProgram fs %{
gl_FragColor = o;
#if ENABLE_DIFFUSION
// gl_FragColor = addLightColor(gl_FragColor, lightCenterPoint, radius, lightColor);
gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);
#endif
}
}%

4
assets/effects/sprite-flash-light.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\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\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 lightColor;\nuniform vec2 lightCenterPoint;\nuniform float lightAngle;\nuniform float lightWidth;\nuniform float enableGradient;\nuniform float cropAlpha;\nuniform float enableFog;\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n float angleInRadians = radians(lightAngle);\n\n float dis = 0.0;\n if (mod(lightAngle, 180.0) != 0.0) {\n\n float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n float offsetDis = abs(v_uv0.x - dx);\n\n dis = sin(angleInRadians) * offsetDis;\n } else {\n dis = abs(v_uv0.y - lightCenterPoint.y);\n }\n \n float a = 1.0 ;\n\n if (bool(cropAlpha)) {\n a *= step(0.01, textureColor.a);\n }\n\n if (!bool(enableFog)) {\n a *= step(dis, lightWidth * 0.5);\n }\n\n if (bool(enableGradient)) {\n a *= 1.0 - dis / (lightWidth * 0.5);\n }\n\n vec4 finalLightColor = lightColor * a;\n\n return textureColor * textureColor.a + finalLightColor;\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, lightColor, lightCenterPoint, lightAngle, lightWidth);\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 Light {\n\n vec4 lightColor;\n\n vec2 lightCenterPoint;\n\n float lightAngle;\n\n float lightWidth;\n\n float enablGradient;\n\n bool cropAlpha;\n\n bool enableFog;\n}\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\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 Light {\n\n vec4 lightColor;\n\n vec2 lightCenterPoint;\n\n float lightAngle;\n\n float lightWidth;\n\n float enableGradient;\n\n float cropAlpha;\n\n float enableFog;\n}\n\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n float angleInRadians = radians(lightAngle);\n\n float dis = 0.0;\n if (mod(lightAngle, 180.0) != 0.0) {\n\n float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n float offsetDis = abs(v_uv0.x - dx);\n\n dis = sin(angleInRadians) * offsetDis;\n } else {\n dis = abs(v_uv0.y - lightCenterPoint.y);\n }\n \n float a = 1.0 ;\n\n if (bool(cropAlpha)) {\n a *= step(0.01, textureColor.a);\n }\n\n if (!bool(enableFog)) {\n a *= step(dis, lightWidth * 0.5);\n }\n\n if (bool(enableGradient)) {\n a *= 1.0 - dis / (lightWidth * 0.5);\n }\n\n vec4 finalLightColor = lightColor * a;\n\n return textureColor * textureColor.a + finalLightColor;\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, lightColor, lightCenterPoint, lightAngle, lightWidth);\n #endif\n}\n"
}
}
],

12
assets/materials/sprite-flash-light.mtl
View File

@ -10,5 +10,15 @@
"USE_TEXTURE": true,
"ENABLE_DIFFUSION": true
},
"_props": {}
"_props": {
"lightColor": {
"__type__": "cc.Color",
"r": 255,
"g": 245,
"b": 0,
"a": 255
},
"lightAngle": 36,
"lightWidth": 0.2
}
}

1548
assets/scenes/FlashLightEffectScene.fire
View File

File diff suppressed because it is too large Load Diff

34
assets/scripts/FlashLightCtrlComponent.ts
View File

@ -26,7 +26,7 @@ export default class FlashLightCtrlComponent extends cc.Component {
// 将触摸点转换为OPENGL坐标系并归一化
// OpenGl 坐标系原点在左上角
this._flashLightUBO.certerPoint = cc.v2(
this._flashLightUBO.lightCenterPoint = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
@ -35,8 +35,10 @@ export default class FlashLightCtrlComponent extends cc.Component {
}
private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
this._flashLightUBO.centerColor = localDiffusionUniform.centerColor;
this._flashLightUBO.radius = localDiffusionUniform.radius;
this._flashLightUBO.lightColor = localDiffusionUniform.lightColor;
this._flashLightUBO.lightAngle = localDiffusionUniform.lightAngle;
this._flashLightUBO.lightWidth = localDiffusionUniform.lightWidth;
this._flashLightUBO.enableGradient = localDiffusionUniform.enableGradient;
this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
this._updateMaterial();
@ -45,9 +47,11 @@ export default class FlashLightCtrlComponent extends cc.Component {
private _updateMaterial() {
this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", this._flashLightUBO.centerColor);
material.setProperty("centerPoint", this._flashLightUBO.certerPoint);
material.setProperty("radius", this._flashLightUBO.radius);
material.setProperty("lightColor", this._flashLightUBO.lightColor);
material.setProperty("lightCenterPoint", this._flashLightUBO.lightCenterPoint);
material.setProperty("lightAngle", this._flashLightUBO.lightAngle);
material.setProperty("lightWidth", this._flashLightUBO.lightWidth);
material.setProperty("enableGradient", this._flashLightUBO.enableGradient);
material.setProperty("cropAlpha", this._flashLightUBO.cropAlpha);
material.setProperty("enableFog", this._flashLightUBO.enableFog);
renderComponent.setMaterial(0, material);
@ -59,17 +63,27 @@ export class FlashLightUBO {
/**
* 中心点颜色
*/
centerColor: cc.Color = cc.Color.YELLOW;
lightColor: cc.Color = cc.Color.YELLOW;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2 = cc.v2(0.5, 0.5);
lightCenterPoint: cc.Vec2 = cc.v2(0.5, 0.5);
/**
* 扩散半径 [0.0, 1.0]
* 光束角度 [0.0, 180.0]
*/
radius: number = 0.5;
lightAngle: number = 45;
/**
* 光束宽度 [0.0, 1.0]
*/
lightWidth: number = 0.5;
/**
* 是否启用光束渐变
*/
enableGradient: boolean = true;
/**
* 是否裁剪掉透明区域上的点光

35
assets/scripts/FlashLightEffectScene.ts
View File

@ -12,9 +12,12 @@ export default class FlashLightEffectScene extends cc.Component {
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 _lightWidthSlider: cc.Slider = null;
private _lightWidthSliderLabel: cc.Label = null;
private _lightAngleSlider: cc.Slider = null;
private _lightAngleSliderLabel: cc.Label = null;
private _enableGradientToggle: cc.Toggle = null;
private _cropAlphaToggle: cc.Toggle = null;
private _enableFogToggle: cc.Toggle = null;
@ -31,9 +34,12 @@ export default class FlashLightEffectScene extends cc.Component {
this._blueSliderLabel = cc.find("Canvas/Content/Controller/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
this._alphaSlider = cc.find("Canvas/Content/Controller/ColorAlphaSlider/Slider").getComponent(cc.Slider);
this._alphaSliderLabel = cc.find("Canvas/Content/Controller/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
this._radiuSlider = cc.find("Canvas/Content/Controller/RadiuSlider/Slider").getComponent(cc.Slider);
this._radiuSliderLabel = cc.find("Canvas/Content/Controller/RadiuSlider/ValueLabel").getComponent(cc.Label);
this._lightWidthSlider = cc.find("Canvas/Content/Controller/LightWidthSlider/Slider").getComponent(cc.Slider);
this._lightWidthSliderLabel = cc.find("Canvas/Content/Controller/LightWidthSlider/ValueLabel").getComponent(cc.Label);
this._lightAngleSlider = cc.find("Canvas/Content/Controller/LightAngleSlider/Slider").getComponent(cc.Slider);
this._lightAngleSliderLabel = cc.find("Canvas/Content/Controller/LightAngleSlider/ValueLabel").getComponent(cc.Label);
this._enableGradientToggle = cc.find("Canvas/Content/Controller/EnableGradientToggle/Toggle").getComponent(cc.Toggle);
this._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle);
@ -49,7 +55,10 @@ export default class FlashLightEffectScene extends cc.Component {
this._greenSlider.node.on("slide", this._onPropertyChanged, this);
this._blueSlider.node.on("slide", this._onPropertyChanged, this);
this._alphaSlider.node.on("slide", this._onPropertyChanged, this);
this._radiuSlider.node.on("slide", this._onPropertyChanged, this);
this._lightWidthSlider.node.on("slide", this._onPropertyChanged, this);
this._lightAngleSlider.node.on("slide", this._onPropertyChanged, this);
this._enableGradientToggle.node.on("toggle", this._onPropertyChanged, this);
this._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this);
}
@ -59,7 +68,10 @@ export default class FlashLightEffectScene extends cc.Component {
this._greenSlider.node.off("slide", this._onPropertyChanged, this);
this._blueSlider.node.off("slide", this._onPropertyChanged, this);
this._alphaSlider.node.off("slide", this._onPropertyChanged, this);
this._radiuSlider.node.off("slide", this._onPropertyChanged, this);
this._lightWidthSlider.node.off("slide", this._onPropertyChanged, this);
this._lightAngleSlider.node.off("slide", this._onPropertyChanged, this);
this._enableGradientToggle.node.off("toggle", this._onPropertyChanged, this);
this._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this);
}
@ -74,18 +86,23 @@ export default class FlashLightEffectScene extends cc.Component {
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._lightWidthSliderLabel.string = `${this._lightWidthSlider.progress.toFixed(2)}`;
let angle = 180 * this._lightAngleSlider.progress;
this._lightAngleSliderLabel.string = `${this._lightAngleSlider.progress.toFixed(2)} | ${angle.toFixed(2)}`;
// 通知子节点更新材质
this._examplesParentNode.children.forEach(childNode => {
childNode.emit("on_property_change", <FlashLightUBO>{
centerColor: cc.color(
lightColor: 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)
),
radius: this._radiuSlider.progress,
lightAngle: angle,
lightWidth: this._lightWidthSlider.progress,
enableGradient: this._enableGradientToggle.isChecked,
cropAlpha: this._cropAlphaToggle.isChecked,
enableFog: this._enableFogToggle.isChecked
});