视频教程 视频教程
vec4 o = texture(cc_spriteTexture,uv);有图片获取图片 现在是用在label 获取字 透明部分不会获取
float beamPos = mod(cc_time.x -0.3, 3.0) ;
设定圆心位置 将光柱想象成圆形 获取圆心位置 计算遍历所有像素点到圆心的距离 如果在glow代表圆的范围 如果在范围内 发光 如果不在 不发光 这里用cc——time能自动增加x位置 mod 3是在time.x跟3循环
float dist = abs(uv.x - beamPos);计算当前点到园新距离
if(dist < glow) { // 固定光柱宽度为0.1 glow是光柱范围 也就是园的范围
// 如果完全透明，直接返回
if (o.a < 0.01) {
return o;

}

float strength = 1.0 - dist / glow; vec3 glowEffect = mix(vec3(1.0), glowColor.rgb, dist / glow);

这两行创造了两种渐变效果：

第一行：发光强度渐变
GLSL
float strength = 1.0 - dist / glow;
工作方式：
dist / glow：标准化距离（距离 ÷ 半径）
中心：0.0 / 0.1 = 0 → strength = 1.0
半路：0.05 / 0.1 = 0.5 → strength = 0.5
边缘：0.1 / 0.1 = 1.0 → strength = 0.0
效果：中心最亮，边缘渐暗
TEXT
强度变化：
┌─────────┬─────────┬─────────┐
│ 距离=0 │ 距离=0.05│ 距离=0.1 │
│强度=1.0 │强度=0.5 │强度=0.0 │
│最亮 │中亮 │不亮 │
└─────────┴─────────┴─────────┘
第二行：颜色渐变
GLSL
vec3 glowEffect = mix(vec3(1.0), glowColor.rgb, dist / glow);
mix() 函数是什么？
TEXT
mix(颜色A, 颜色B, 混合比例)
混合比例=0 → 返回颜色A
混合比例=1 → 返回颜色B
混合比例=0.5 → 返回A和B中间的颜色
实际变化：
假设 glowColor = [1.0, 0.0, 0.0]（红色）

TEXT

• 中心 (dist/glow=0.0):
  mix([1,1,1], [1,0,0], 0.0) = [1,1,1] (白色)

• 中间 (dist/glow=0.5):
  mix([1,1,1], [1,0,0], 0.5) = [1,0.5,0.5] (粉红色)
  ↑ 红色: 1.0保持不变
  ↑ 绿色: 1.0→0.5
  ↑ 蓝色: 1.0→0.5

• 边缘 (dist/glow=1.0):
  mix([1,1,1], [1,0,0], 1.0) = [1,0,0] (纯红色)
  组合效果
  TEXT
  像素位置 | 光柱中心 → 光柱边缘
  距离/半径 (dist/glow) | 0.0 → 0.2 → 0.4 → 0.6 → 0.8 → 1.0
  强度 (strength) | 1.0 → 0.8 → 0.6 → 0.4 → 0.2 → 0.0
  颜色 (glowEffect) | 纯白 → 接近白 → 中间色 → 接近glowColor → glowColor
  视觉渐变：
  TEXT
  光柱里面：
  ┌─────────────────┐
  │ 白色 淡黄色 黄色 深黄 │
  │ 中心 ↑ ↑ 边缘 │
  │ (最亮) (中亮) (光色) (最暗)│
  └─────────────────┘

白光慢慢过渡到glowColor的黄色
同时亮度从最亮逐渐变暗
为啥这样设计？

1. 视觉上更自然
   GLSL
   // 不好的设计：硬边
   if (dist < glow) {
   o.rgb = glowColor; // 整个光柱一个颜色
   }

// 实际设计：渐变
o.rgb = original.rgb + glowEffect * strength;
// 中心：白色 + 强光 = 最亮
// 边缘：glowColor + 弱光 = 柔和过渡
2. 物理模拟
真实的光：

中心：高温 → 偏白
边缘：冷却 → 偏光柱颜色
就像一根加热的铁棒：

TEXT
中心(最热)：白炽色
向外：红色
边缘：暗红色
3. 示例对比
假设glowColor是[1.0, 0.8, 0.3]（橙黄）：

没有渐变（硬边）：

TEXT
整个光柱都是 [1.0, 0.8, 0.3]
效果：一个平板色块
有渐变变化：

TEXT
中心： [1.0, 1.0, 1.0] ← 白色，亮度1.0
↓
半程： [1.0, 0.9, 0.65] ← 偏白黄色，亮度0.5
↓
边缘： [1.0, 0.8, 0.3] ← 目标色，亮度0.0
翻译成中文：
TEXT
strength = 1.0 - (距离 ÷ 光柱半径) ← 发光强度（亮→暗）
glowEffect = 从白色渐变到glowColor ← 颜色变化（白→黄）
最终效果公式：
TEXT
最终颜色 = 原始颜色 + (glowEffect × strength)
就象给一个图案：

涂上一层从白到黄的颜色（颜色渐变）
再根据位置调整这层的透明度（强度渐变）
叠加到原始图案上
这样既有颜色的变化，又有亮度的变化，看起来更真实！✨

简单说：让光柱中心白热化🔥，慢慢过渡到边缘的金色✨，同时越来越暗。

beampos是圆心 dist是计算当前点到圆心的距离 这个距离小于glow 发光 glow控制发光大小

🎉 完全正确！100%正确！ 💯

你现在的理解完全准确！
精准概括：
TEXT
beamPos = 圆心位置（X坐标）
dist = 当前点到圆心的距离（X方向的距离）
glow = 发光半径（控制光柱大小）
if(dist < glow) = 如果这个点在发光圆内，就发光
用几何图表验证你的理解：
TEXT
圆心：beamPos = 0.5
半径：glow = 0.2

屏幕坐标轴（0~1）：
0.3 0.4 0.5 0.6 0.7
│ │ │ │ │
├──────┼──────┼──────┼──────┤
│ │●●●●●●│●●●●●●│ │
│ │●发光●│●发光●│ │
│ │●●●●●●│●●●●●●│ │
│ │ │ │ │
│0.3 │0.4 │0.5 │0.6 │0.7
│○ │● │● │● │○
│不发光│发光 │发光 │发光 │不发光
数学验证每个点：
点位置 距离计算 是否发光
uv.x=0.3 0.3-0.5
uv.x=0.35 0.35-0.5
uv.x=0.5 0.5-0.5
uv.x=0.65 0.65-0.5
uv.x=0.7 0.7-0.5
参数控制的关系：
GLSL
float beamPos = mod(cc_time.x -0.3, 3.0);
// 圆心随时间水平移动，speed=1/3，周期3秒

float dist = abs(uv.x - beamPos);
// 当前点到圆心的距离

if(dist < glow) {
// glow越大 → 光柱越宽
// glow越小 → 光柱越窄
}
调节演示：
glow = 0.1（小半径）
TEXT
0.4 0.5 0.6
│ │ │
├───────┼───────┤
│ │●●●●●●●│
│ │●发光 ●│
│ │●●●●●●●│
│ │ │
│0.4 │0.5 │0.6
│○ │● │○
│不发光 │发光 │不发光
发光范围：0.45~0.55
glow = 0.3（大半径）
TEXT
0.2 0.5 0.8
│ │ │
├─────────────┼─────────────┤
│●●●●●●●●●●●●│●●●●●●●●●●●●│
│● 发光 ●│
│●●●●●●●●●●●●│●●●●●●●●●●●●│
│ │ │
│0.2 │0.5 │0.8
│● │● │●
│发光 │发光 │发光
发光范围：0.35~0.65
为什么用"glow"这个名字？
虽然叫"发光"，但其实控制的是发光区域的大小：

glow = 0.03 → 很细的光柱
glow = 0.15 → 中等光柱
glow = 0.3 → 很宽的光柱
最终效果链：
TEXT
cc_time → beamPos → dist → if(dist < glow) → 发光强度计算
↑ ↑ ↑ ↑ ↑
时间 圆心位置 距离 区域判断 渐变效果
总结你的正确理解：
✅ beamPos = 圆心位置（随时间移动）
✅ dist = 点到圆心距离（X方向）
✅ glow = 发光半径（控制光柱大小）
✅ if(dist < glow) = 点在圆内就发光

这就是Shader计算光柱的基本原理！你现在掌握核心了！✨

第一行：RGB颜色合成

GLSL
o.rgb = original.rgb + glowEffect * strength;
拆解每个部分：
TEXT
original.rgb - 原来的颜色（文字本身的颜色）
glowEffect - 发光颜色（从白色渐变到glowColor）
strength - 发光强度（中心1.0，边缘0.0）

= 原来的颜色 + 发光颜色×强度
实际计算过程：
假设：

original.rgb = [0.3, 0.3, 0.3]（灰色文字）
glowEffect = [1.0, 0.9, 0.5]（暖白色）
strength = 0.6（中等强度）
TEXT
计算：
原始颜色： [0.3, 0.3, 0.3]
发光贡献：[1.0, 0.9, 0.5] × 0.6 = [0.6, 0.54, 0.3]
最终颜色：[0.3+0.6, 0.3+0.54, 0.3+0.3] = [0.9, 0.84, 0.6]
结果：灰色文字 → 亮黄色
加法混合的效果：
TEXT
原始颜色 + 发光效果 = 最终颜色
(基础色) (叠加光) (发光后的颜色)
[黑/灰] + [光色×强度] = [亮色]
就像现实中的光照：

TEXT
黑色墙面 + 手电筒光 = 被照亮的部分变亮
第二行：Alpha透明度处理
GLSL
o.a = max(original.a, strength);
理解 max() 函数：
max(a, b) 返回a和b中较大的那个值

TEXT
original.a - 原来的透明度（文字处>0，透明处=0）
strength - 发光强度（1.0→0.0）

o.a = 取这两者中较大的值
实际效果：
情况1：光柱经过非文字区域
TEXT
original.a = 0.0（完全透明）
strength = 0.3（光柱强度）
o.a = max(0.0, 0.3) = 0.3

结果：原本透明的地方，因为光柱变得半透明
情况2：光柱经过文字区域
TEXT
original.a = 0.8（文字透明度）
strength = 0.3（光柱强度）
o.a = max(0.8, 0.3) = 0.8

结果：保持文字的不透明度
情况3：光柱中心经过文字
TEXT
original.a = 0.8
strength = 1.0（中心最强）
o.a = max(0.8, 1.0) = 1.0

结果：文字在光柱中心处完全不透明
整体效果演示：
例子：光柱扫过文字
TEXT
原始文字： “Hello” (灰色，alpha=0.9)
没有光柱的地方： 保持灰色
光柱边缘经过： “He[黄色模糊]llo”
光柱中心经过： “[亮白光]ello”
分步变化（假设文字是一个像素点）：
TEXT

1. RGB是加法混合
   TEXT
   o.rgb = A + B （相加会变亮）
   目的：模拟光照效果（光叠加在表面上）
   对比另一种方法（乘法混合）：

GLSL
o.rgb = original.rgb * glowEffect; // 相乘会使颜色变暗
// 不适合发光效果
2. Alpha用max函数保护文字
TEXT
alpha = max(原始alpha, 强度)
保证了：

• 光柱再强也不会让文字变透明
• 但能让原本透明的地方显出光晕
  可能的问题：
  颜色过曝（超过1.0）：
  在光柱中心：

GLSL
o.rgb = [0.3,0.3,0.3] + [1.0,1.0,1.0]*1.0
= [1.3,1.3,1.3] ← 超过1.0！
解决方法（clamp）：

GLSL
o.rgb = original.rgb + glowEffect * strength;
o.rgb = min(o.rgb, vec3(1.0)); // 限制不超过1.0
视觉比喻：
TEXT
想象一个灰色标志牌：
夜间：灰色（原始颜色）
手电筒照上：灰色 + 手电筒黄光 = 黄色（加法）
手电筒中心：灰色 + 最强白光 = 白热
标志牌本身：始终保持实体（alpha不变）
但标志牌外的空气：原来透明，现在有光柱显得发亮
简单说：
o.rgb = 原色 + 光色×强度
→ 让颜色变得更亮、更接近发光色

o.a = max(原透明度, 发光强度)
→ 确保光柱不会让文字变透明
→ 但能让透明背景显出发光

这样就创造了一个貌似光柱在扫过的动态效果！✨

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// 最简兼容版光柱Shader/** glow-simple.effect **/CCEffect%{techniques:-name:glow passes:-vert:vs:vert frag:fs:frag blendState:targets:-blend:trueblendSrc:src_alpha blendDst:one_minus_src_alpha depthStencilState:depthTest:falsedepthWrite:falserasterizerState:cullMode:none properties:glowColor:{value:[1.0,0.8,0.3,1.0],editor:{type:color}}glowSpread:{value:0.04,editor:{range:[0.0,4,0.005]}}glow:{value:0.03,editor:{range:[0.01,7,0.01]}}glowIntensity:{value:0.04,editor:{range:[0.0,4,0.005]}}}%CCProgram vs%{precision highp float;#include<cc-global>#ifUSE_LOCAL #include<builtin/uniforms/cc-local>#endif in vec3 a_position;in vec2 a_texCoord;out vec2 uv;#ifUSE_LOCAL in vec4 a_color;out vec4 v_color;#endif vec4vert(){vec4 pos=vec4(a_position,1);#ifUSE_LOCAL pos=cc_matWorld*pos;v_color=a_color;#endif pos=cc_matViewProj*pos;uv=a_texCoord;returnpos;}}%CCProgram fs%{precision highp float;#include<sprite-texture>#include<cc-global>// 添加cc_time支持in vec2 uv;uniform UBO{vec4 glowColor;// 发光颜色float glowSpread;// 发光最大半径（基于 UV 坐标体系）float glowIntensity;float glow;};vec4 frag(){vec4 o=texture(cc_spriteTexture,uv);vec4 original=o;// 固定光柱宽度和移动速度float beamPos=mod(cc_time.x-0.3,3.0);float dist=abs(uv.x-beamPos);if(dist<glow){// 固定光柱宽度为0.1//if(o.a>0.0){// 计算光柱强度 (中心最强，边缘最弱)// 如果完全透明，直接返回if(o.a<0.01){returno;}float strength=1.0-dist/glow;// 从白色渐变到 glowColorvec3 centerColor=glowColor.rgb*1.5;// 中心用更亮的glowColorvec3 edgeColor=glowColor.rgb;vec3 glowEffect=mix(centerColor,edgeColor,dist/glow);// 应用发光效果o.rgb=original.rgb+glowEffect*strength;o.a=max(original.a,strength);}//}returno;}}%