godot游戏引擎是有2d光照的，用起来感觉还是很强大的，不知道他是怎么搞的，有时间看看他们怎么实现的。
之前一直以为cocos社区里面没有2d光照的实现，偶然看到2d实现的具体逻辑，现在整理如下，
一：实现原理
这里实现的2d光源是类似聚光灯的效果，是有一个衰减过程的，具体怎么个衰减法，还得用到我们学的数学知识就是线性衰减 y = -x + b,就是用它来模拟光照的衰减效果的，在光照半径范围内衰减的时候是一个值（根据距离进行衰减，该值的意义是对光照效果的贡献值），大于光照半径范围 光照贡献值急速的变为0.
1：需要哪些参数
模拟光照的参数，需要一个光源照射的半径范围r，光源锥形的角度r1，光源的强度indensity，光源的颜色 color,光源世界坐标，用来计算物体距离光源大小，以此来计算光照效果。
properties:
alphaThreshold: { value: 0.5 }
light_normal: { value: white }
light_worldpos: { value: [255, 255, 255, 255], editor: { type: vec4 } }
light_ambientColor: { value: [127, 127, 127, 127], editor: { type: color } }
light_lightColor: { value: [255, 255, 255, 255], editor: { type: color } }
light_radius: { value: 10.0 }
light_halfRadius: { value: 0.5 }
light_brightness: { value: 1.0 }uniform Constant {
// 环境光模拟白天和黑夜
vec4 light_ambientColor;
// 光源颜色
vec4 light_lightColor;
// 光源世界坐标
vec4 light_worldpos;
// 光源半径
float light_radius;
// 光源角度半径 决定了光源锥形区域的宽度
float light_halfRadius;
// 光源的亮度
float light_brightness;
float light_unused;
};光源的世界坐标可以通过外部脚本传入，定义一个节点挂在Light脚本来控制光源的世界坐标：
import { _decorator, Component, Node, Sprite, math, UITransform, Label, Vec2, Vec3, Vec4, Camera, view, Material, Texture2D, renderer, color, Color } from 'cc';
import { EDITOR } from 'cc/env';
const { ccclass, property, executeInEditMode } = _decorator;
@ccclass('Light')
@executeInEditMode
export class Light extends Component {
@property([Node])
bodys_normal: Node[] = [];
@property([Node])
bodys: Node[] = [];
@property(Material)
eff: Material = null!;
@property(Material)
eff_normal: Material = null!;
onLoad() {
}
start() {
this.updateLight();
}
update() {
this.updateLight();
}
getwpos(node2d: Node) {
return node2d.worldPosition;
}
updateBody(target, lightPos) {
// 更新uniform
let spr = target.getComponent(Sprite);
// 灯光位置
spr.getSharedMaterial(0).setProperty('light_worldpos', new Vec4(lightPos.x, lightPos.y, lightPos.z, 1));
}
updateLight() {
// 光源位置
let lightPos = this.getwpos(this.node)
for (var idx in this.bodys_normal) {
let node = this.bodys_normal[idx];
if (null == node) return;
this.updateBody(node, lightPos);
}
for (var idx in this.bodys) {
let node = this.bodys[idx];
if (null == node) return;
this.updateBody(node, lightPos);
}
}
}
2：具体的一些细节
想要让光源产生效果，需要单独的给每个图片加上一个单独的材质，这样才能控制颜色的输出，这里使用时最新版本(3.8.x)的shader的结构：
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: light-vs:vert
frag: light-fs:frag
depthStencilState:
depthTest: false
depthWrite: false
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendDstAlpha: one_minus_src_alpha
rasterizerState:
cullMode: none
properties:
alphaThreshold: { value: 0.5 }
light_normal: { value: white }
light_worldpos: { value: [255, 255, 255, 255], editor: { type: vec4 } }
light_ambientColor: { value: [127, 127, 127, 127], editor: { type: color } }
light_lightColor: { value: [255, 255, 255, 255], editor: { type: color } }
light_radius: { value: 10.0 }
light_halfRadius: { value: 0.5 }
light_brightness: { value: 1.0 }
}%
CCProgram light-vs %{
precision highp float;
#include <builtin/uniforms/cc-global>
#if USE_LOCAL
#include <builtin/uniforms/cc-local>
#endif
#if SAMPLE_FROM_RT
#include <common/common-define>
#endif
in vec3 a_position;
in vec2 a_texCoord;
in vec4 a_color;
out vec4 color;
out vec2 uv0;
out vec4 object_position;
vec4 vert () {
vec4 pos = vec4(a_position, 1);
// 不适用mvp矩阵计算成世界坐标，因为如果屏幕是横屏的时候，转成世界坐标后，x轴会出现拉伸。
// 这里使用的是UI的坐标系，参考light.ts获取世界坐标的代码。
object_position = pos;
#if USE_LOCAL
pos = cc_matWorld * pos;
#endif
#if USE_PIXEL_ALIGNMENT
pos = cc_matView * pos;
pos.xyz = floor(pos.xyz);
pos = cc_matProj * pos;
#else
pos = cc_matViewProj * pos;
#endif
uv0 = a_texCoord;
#if SAMPLE_FROM_RT
CC_HANDLE_RT_SAMPLE_FLIP(uv0);
#endif
color = a_color;
return pos;
}
}%
CCProgram light-fs %{
precision highp float;
#include <builtin/internal/embedded-alpha>
#include <builtin/internal/alpha-test>
in vec4 color;
in vec4 object_position;
#if USE_TEXTURE
in vec2 uv0;
#pragma builtin(local)
layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;
#endif
// 是否使用2d法线
#if USE_2D_NORMAL
uniform sampler2D light_normal;
#endif
#if USE_2D_LIGHT
uniform Constant {
// 环境光模拟白天和黑夜
vec4 light_ambientColor;
// 光源颜色
vec4 light_lightColor;
// 光源世界坐标
vec4 light_worldpos;
// 光源半径
float light_radius;
// 光源角度半径 决定了光源锥形区域的宽度
float light_halfRadius;
// 光源的亮度
float light_brightness;
float light_unused;
};
/**
* 亮度计算, 按照距离远近衰减, 采取内外光圈叠加方式, 按照世界坐标计算 (0.0 ~ 1.0)
* @param dist 距离 (0.0 ~ 1.0)
* @param cutoff_r 外光圈半径 (> 0.0) 光源的截止半径 超过这个半径区域不再受到关照的影响
* @param half_r 内光圈半径, 使用cutoffRadius的半径占比 (0.0 ~ 1.0) 光源的角度半径，决定了光源锥形区域的宽度
*/
float light_bright(float dist, float cutoff_r, float half_r) {
// 截距
float intercept = cutoff_r * half_r;
// dx_1 = 1 / (2 * intercept) => y = 1 / 2x; 双曲线 近处
float dx_1 = 0.5 / intercept;
// dx_2曲线和dx_1曲线对称，对称中心是（cutoff_r / 2,1 / cutoff_r） 远处
float dx_2 = 0.5 / (cutoff_r - intercept);
float offset = 0.5 + intercept * dx_2;
// 近处 慢慢衰减
float falloffTermNear = clamp((1.0 - dist * dx_1), 0.0, 1.0);
// 远处 远离光源的时候迅速减小到0
float falloffTermFar = clamp((offset - dist * dx_2), 0.0, 1.0);
// 当dist > intercept 的时候 => 1 dist < intercept => 0
float falloffSelect = step(intercept, dist);
// 计算光源对某一个点的照明贡献 距离衰减因子 dist < intercept => fallofftTermNear 近距离因子 dist > intercept => 远距离因子
float falloffTerm = (1.0 - falloffSelect) * falloffTermNear + falloffSelect * falloffTermFar;
return falloffTerm;
}
/**
* 计算灯光的颜色值
* @param dist 物体距离光源的距离, 世界单位 (> 0.0)
* @param radius 光源半径，世界单位 (> 0.0)
*/
vec3 light_diffuse (float dist, float radius) {
// 计算像素点所在光圈位置的亮度
float falloffTerm = light_bright(dist, radius, light_halfRadius);
// falloffTerm 为亮度值, light_lightColor 为灯光颜色
return falloffTerm * vec3(light_lightColor);
}
/**
* 计算光照颜色
* @param object_position 物体坐标, 世界坐标
* @param object_vertex_normal 顶点的法线向量, 归一化
*/
vec3 light_color(vec3 col) {
// 计算光线方向, 这个方式不能直接用，打个比方纹理是正方形的，而世界坐标可能是长方形的(GL的坐标固定在-1.0到1.0之间, 而屏幕不一定是正方形)
vec4 object_direction = object_position - light_worldpos;
// 计算物体与灯光的距离
float object_dist = length(vec3(object_direction));
// 开启这个可以测试
// object_dist = length(uv0 - 0.5);
// 计算物体与灯光的的距离, 占用直径的百分比
float object_dist_normal = object_dist / (light_radius * 2.0);
// 获取灯光漫反射颜色
vec3 diffuse = light_diffuse(object_dist_normal, light_radius);
#if USE_2D_NORMAL
// 获取法向量
vec3 normal = texture(light_normal, uv0).rgb;
normal = normal * 2.0 - 1.0;
// 计算光照反射系数，向量点积
float normalDot = max(0.0, dot(normal, -normalize(vec3(object_direction.x, object_direction.y, -60))));
// 反射光 * 法向量衰减 + 环境光
return col * (diffuse * light_brightness * normalDot + vec3(light_ambientColor));
#else
// 反射光 * 法向量衰减 + 环境光 (没有法线的情况下需要 0.5 衰减)
return col * (diffuse * light_brightness + vec3(light_ambientColor));
#endif
}
/**
* 计算光照颜色
* @param object_position 物体坐标, 世界坐标
* @param object_vertex_normal 顶点的法线向量, 归一化
*/
vec4 light_dist() {
}
#endif
vec4 frag () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
#if IS_GRAY
float gray = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
o.r = o.g = o.b = gray;
#endif
#endif
o *= color;
ALPHA_TEST(o);
#if USE_2D_LIGHT
return vec4(light_color(vec3(o)), o.a);
#else
return o;
#endif
}
}%
主要的核心方法：light_bright，这个方法是用来计算光照贡献值的。
其中intercept = cutoff_r * half_r 是设定了一个阙值，当dist < intercept的时候用什么样的衰减方式，当dist > intercept的时候用什么样的衰减方式,
那么 float dx_1 = 0.5 / intercept 该怎么理解呢，这个得结合falloffTermNear，falloffTermFar来理解，就好比v = s / t，总的衰减总数是1，前半部分（dist < intercept）占了0.5，那么后半部分就是1 - 0.5，我还是画一张图来理解吧,每衰减 1需要消耗的值就是 dx_1，这个dx_1可以理解为衰减的速率，也就是下面代码中出现的斜率，也就是衰减速度。那么dx_1讲清楚了，自然而然dx_2你也是理解的
这里还有一个点就是offset什么意思，offset指的就是当dist = intercept的时候怎么保证两个衰减过程衔接的非常自然呢，咱们可以列一个公式看看
1 - dist * dx_1 = offset - dist * dx_2,很容易我们解方程就能够知道 offset = 0.5 + intercept * dx_2;
最后根据dist来计算对光照的影响程度就可以了，
/**
* 亮度计算, 按照距离远近衰减, 采取内外光圈叠加方式, 按照世界坐标计算 (0.0 ~ 1.0)
* @param dist 距离 (0.0 ~ 1.0)
* @param cutoff_r 外光圈半径 (> 0.0) 光源的截止半径 超过这个半径区域不再受到关照的影响
* @param half_r 内光圈半径, 使用cutoffRadius的半径占比 (0.0 ~ 1.0) 光源的角度半径，决定了光源锥形区域的宽度
*/
float light_bright(float dist, float cutoff_r, float half_r) {
// 截距
float intercept = cutoff_r * half_r;
// dx_1 = 1 / (2 * intercept) => y = 1 / 2x; 双曲线 近处
float dx_1 = 0.5 / intercept;
// dx_2曲线和dx_1曲线对称，对称中心是（cutoff_r / 2,1 / cutoff_r） 远处
float dx_2 = 0.5 / (cutoff_r - intercept);
// 用在两种衰减过程中的阙值出的矫正保证颜色渐变的连贯 计算过程是 1 - dist * dx_1 = offset - dist * dx_2 可以反算出来 offset = 0.5 + intercept * dx_2
float offset = 0.5 + intercept * dx_2;
// 近处 慢慢衰减 线性衰减
float falloffTermNear = clamp((1.0 - dist * dx_1), 0.0, 1.0);
// 远处 远离光源的时候迅速减小到0
float falloffTermFar = clamp((offset - dist * dx_2), 0.0, 1.0);
// 当dist > intercept 的时候 => 1 dist < intercept => 0
float falloffSelect = step(intercept, dist);
// 计算光源对某一个点的照明贡献 距离衰减因子 dist < intercept => fallofftTermNear 近距离因子 dist > intercept => 远距离因子
float falloffTerm = (1.0 - falloffSelect) * falloffTermNear + falloffSelect * falloffTermFar;
return falloffTerm;
}讲解到这里希望你能够理解光源产生的过程。
下面贴下原文的链接：
cocos creator 2D关照
我只是把不容易理解的部分给讲一下，希望对你有帮助。
