From 6402c68fbcb975a99fc6d7981e0af5651d6172c5 Mon Sep 17 00:00:00 2001 From: caizhitao Date: Mon, 13 Jan 2020 22:40:10 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=82=B9=E5=85=89=E7=9A=84?= =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/effects/sprite-point-light.effect | 8 ++---- assets/effects/sprite-point-light.effect.meta | 4 +-- assets/scripts/PointLightCtrlComponent.ts | 28 +++++++++---------- assets/scripts/PointLightEffectScene.ts | 4 +-- 4 files changed, 20 insertions(+), 24 deletions(-) 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),