初始化闪光场景相关

This commit is contained in:
caizhitao 2020-01-13 14:32:24 +08:00
parent 9160ad38b7
commit c95329e7ab
10 changed files with 6721 additions and 0 deletions

View File

@ -0,0 +1,192 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// 闪光(光速扫过)
// 原理(和点光的很类似):
// 1. 画光束
// 2. 圆心中间高亮(透明度=1.0),边缘不亮(透明度=0.0
// 3. 在原图像上方叠加光束
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
# 光束颜色
lightColor: {
value: [1.0, 1.0, 0.0, 1.0],
inspector: {
type: color,
tooltip: "光束颜色"
}
}
# 光束中心点坐标
lightCenterPoint: {
value: [0.2, 0.2],
inspector: {
tooltip: "光束中心点坐标"
}
}
# 光束倾斜角度
lightAngle: {
valu: 45.0,
inspctor: {
tooltip: "光束倾斜角度",
range: [0.0, 1.0],
}
}
# 光束宽度
lightWidth: {
value: 0.4,
inspector: {
tooltip: "光束宽度"
}
}
# 启用光束渐变
enablGradient: {
value: 0,
inspecator: {
tooltip: "是否启用光束渐变。0不启用非0启用"
}
}
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
#if ENABLE_DIFFUSION
uniform Light {
// 光束颜色
vec4 lightColor;
// 光束中心点坐标
vec2 lightCenterPoint;
// 光束倾斜角度
float lightAngle;
// 光束宽度
float lightWidth;
// 启用光束渐变
float enablGradient;
// 裁剪掉透明区域上的点光
// ps编辑器还不支持 bool 类型的样子,因此没在 CCEffect 中定义
bool cropAlpha;
// 是否启用迷雾效果
// ps编辑器还不支持 bool 类型的样子,因此没在 CCEffect 中定义
bool enableFog;
}
// /**
// * 添加光束颜色
// */
// vec4 addLightColor(vec4 textureColor, vec2 lightCenterPoint, float radius, vec4 lightColor) {
// // 计算当前 uv 到 光束 的距离
// float dis = distance(v_uv0, lightCenterPoint);
// float a = 1.0 ;
// // 裁剪掉透明区域上的点光
// if (cropAlpha) {
// a *= step(0.01, textureColor.a);
// }
// // 裁剪掉扩散范围外的uv迷雾效果
// if (!enableFog) {
// a *= step(dis, radius);
// }
// // 加入从中心往外渐变的效果
// 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 = lightColor * a;
// // 混合颜色:在原始图像颜色上叠加扩散颜色
// return textureColor * textureColor.a + diffusionColor;
// }
#endif
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(texture, v_uv0);
#if CC_USE_ALPHA_ATLAS_TEXTURE
o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
#endif
#endif
o *= v_color;
ALPHA_TEST(o);
gl_FragColor = o;
#if ENABLE_DIFFUSION
// gl_FragColor = addLightColor(gl_FragColor, lightCenterPoint, radius, lightColor);
#endif
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.23",
"uuid": "e9682cd1-a19c-4fcb-ad8c-cf1783b805e6",
"compiledShaders": [
{
"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"
},
"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"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,14 @@
{
"__type__": "cc.Material",
"_name": "",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "e9682cd1-a19c-4fcb-ad8c-cf1783b805e6"
},
"_defines": {
"USE_TEXTURE": true,
"ENABLE_DIFFUSION": true
},
"_props": {}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.2",
"uuid": "43a22f18-72fc-4399-b5ae-8305705861f4",
"dataAsSubAsset": null,
"subMetas": {}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,7 @@
{
"ver": "1.2.5",
"uuid": "54bdad42-93aa-4869-a465-c0eac37bf0d2",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@ -0,0 +1,83 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class FlashLightCtrlComponent extends cc.Component {
private _flashLightUBO: FlashLightUBO = new FlashLightUBO();
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("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("on_property_change", this._onPropertyChange, 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坐标系并归一化
// OpenGl 坐标系原点在左上角
this._flashLightUBO.certerPoint = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
this._updateMaterial();
}
private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
this._flashLightUBO.centerColor = localDiffusionUniform.centerColor;
this._flashLightUBO.radius = localDiffusionUniform.radius;
this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
this._updateMaterial();
}
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("cropAlpha", this._flashLightUBO.cropAlpha);
material.setProperty("enableFog", this._flashLightUBO.enableFog);
renderComponent.setMaterial(0, material);
});
}
}
export class FlashLightUBO {
/**
*
*/
centerColor: cc.Color = cc.Color.YELLOW;
/**
* ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2 = cc.v2(0.5, 0.5);
/**
* [0.0, 1.0]
*/
radius: number = 0.5;
/**
*
*/
cropAlpha: boolean = true;
/**
*
*/
enableFog: boolean = false;
}

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "3edca38f-0f12-489f-847a-0d89d9e55c6c",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

View File

@ -0,0 +1,94 @@
import FlashLightCtrlComponent, { FlashLightUBO } from "./FlashLightCtrlComponent";
const { ccclass, property } = cc._decorator;
@ccclass
export default class FlashLightEffectScene extends cc.Component {
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 _cropAlphaToggle: cc.Toggle = null;
private _enableFogToggle: cc.Toggle = null;
private _examplesParentNode: cc.Node = null;
onLoad() {
cc.dynamicAtlasManager.enabled = false;
this._redSlider = cc.find("Canvas/Content/Controller/ColorRedSlider/Slider").getComponent(cc.Slider);
this._redSliderLabel = cc.find("Canvas/Content/Controller/ColorRedSlider/ValueLabel").getComponent(cc.Label);
this._greenSlider = cc.find("Canvas/Content/Controller/ColorGreenSlider/Slider").getComponent(cc.Slider);
this._greenSliderLabel = cc.find("Canvas/Content/Controller/ColorGreenSlider/ValueLabel").getComponent(cc.Label);
this._blueSlider = cc.find("Canvas/Content/Controller/ColorBlueSlider/Slider").getComponent(cc.Slider);
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._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle);
// 代码添加控制脚本
this._examplesParentNode = cc.find("Canvas/Content/Examples");
this._examplesParentNode.children.forEach(childNode => {
childNode.addComponent(FlashLightCtrlComponent);
});
}
onEnable() {
this._redSlider.node.on("slide", this._onPropertyChanged, this);
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._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this);
}
onDisable() {
this._redSlider.node.off("slide", this._onPropertyChanged, this);
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._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this);
}
start() {
this._onPropertyChanged();
}
private _onPropertyChanged() {
// 更新进度条值 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._examplesParentNode.children.forEach(childNode => {
childNode.emit("on_property_change", <FlashLightUBO>{
centerColor: 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,
cropAlpha: this._cropAlphaToggle.isChecked,
enableFog: this._enableFogToggle.isChecked
});
});
}
}

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "6d3aff77-2683-4417-8960-2a5fd5d0757c",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}