第 12 章混合模式（18 种）

概念：什么是混合模式

混合模式决定了新绘制的像素（Source）如何与帧缓冲中已有的像素（Destination）进行合成。XGE 支持 18 种混合模式，涵盖经典 Porter-Duff 合成和 CSS Compositing 规范中的高级混合。

混合模式是全局状态——设置后影响后续所有绘制调用，直到再次更改。

API 速查

函数	说明
`void xgeBlendSet(int iBlend)`	设置全局混合模式（XGE_BLEND_* 常量）
`int xgeBlendGet(void)`	获取当前混合模式

18 种混合模式一览

常量	值	效果
`XGE_BLEND_NONE`	0	不混合，Source 直接覆盖
`XGE_BLEND_ALPHA`	1	标准 Alpha 混合（默认）
`XGE_BLEND_ADD`	2	加法混合，发光/粒子效果
`XGE_BLEND_MULTIPLY`	3	正片叠底，变暗
`XGE_BLEND_SCREEN`	4	滤色，变亮
`XGE_BLEND_CUSTOM`	5	自定义（配合 Shader 使用）
`XGE_BLEND_DARKEN`	6	取两者较暗值
`XGE_BLEND_LIGHTEN`	7	取两者较亮值
`XGE_BLEND_OVERLAY`	8	叠加，增强对比
`XGE_BLEND_COLOR_DODGE`	9	颜色减淡，高光
`XGE_BLEND_COLOR_BURN`	10	颜色加深，阴影
`XGE_BLEND_HARD_LIGHT`	11	强光
`XGE_BLEND_SOFT_LIGHT`	12	柔光
`XGE_BLEND_DIFFERENCE`	13	差值，反色效果
`XGE_BLEND_EXCLUSION`	14	排除，类似差值但更柔和
`XGE_BLEND_HUE`	15	保留 Source 色相
`XGE_BLEND_SATURATION`	16	保留 Source 饱和度
`XGE_BLEND_COLOR`	17	保留 Source 色相+饱和度
`XGE_BLEND_LUMINOSITY`	18	保留 Source 亮度

编译本章示例

gcc -O2 -I. -o ch12.exe ch12_main.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch12.exe

示例 1：加法混合实现发光

static int onFrame(void* pUser) {
    xgeClear(0x081114FF);

    // 绘制底层圆形（正常 Alpha 混合）
    xgeBlendSet(XGE_BLEND_ALPHA);
    xgeShapeCircleFill(400, 300, 100, 0x4FD8C2FF);

    // 切换为加法混合 → 重叠区域更亮
    xgeBlendSet(XGE_BLEND_ADD);
    xgeShapeCircleFill(350, 300, 80, 0xFF6B5E80);
    xgeShapeCircleFill(450, 300, 80, 0xFFB45480);

    // 恢复默认
    xgeBlendSet(XGE_BLEND_ALPHA);
    return XGE_OK;
}

示例 2：正片叠底实现阴影

// 先绘制彩色背景矩形
xgeShapeRectFill(100, 100, 600, 400, 0x6DB3F2FF);

// 用 Multiply 叠加半透明灰色 → 产生阴影区域
xgeBlendSet(XGE_BLEND_MULTIPLY);
xgeShapeRectFill(200, 200, 300, 200, 0x808080FF);

xgeBlendSet(XGE_BLEND_ALPHA);  // 恢复

示例 3：查询当前混合模式

int current = xgeBlendGet();
if (current != XGE_BLEND_ALPHA) {
    xgeLogWrite(XGE_LOG_WARN, "Blend mode is %d, expected ALPHA", current);
    xgeBlendSet(XGE_BLEND_ALPHA);
}

完整代码

将以下代码保存为 ch12_main.c，编译后运行即可看到加法混合的发光效果：

#include "xge.h"

static int onFrame(void* pUser) {
    (void)pUser;
    xgeClear(0x081114FF);

    // 底层圆形（标准 Alpha 混合）
    xgeBlendSet(XGE_BLEND_ALPHA);
    xgeShapeCircleFill(400, 300, 100, 0x4FD8C2FF);

    // 加法混合 → 重叠区域更亮
    xgeBlendSet(XGE_BLEND_ADD);
    xgeShapeCircleFill(350, 300, 80, 0xFF6B5E80);
    xgeShapeCircleFill(450, 300, 80, 0xFFB45480);

    // 恢复默认混合模式
    xgeBlendSet(XGE_BLEND_ALPHA);
    return XGE_OK;
}

int main(void) {
    xge_desc_t d = {0};
    d.iWidth  = 800;
    d.iHeight = 600;
    d.sTitle  = "ch12 - Blend Modes";
    d.iFlags  = XGE_INIT_VSYNC;
    xgeInit(&d);
    xgeRun(onFrame, NULL);
    xgeUnit();
    return 0;
}

代码讲解

xgeBlendSet(XGE_BLEND_ALPHA) 恢复标准透明混合，确保后续绘制不受特效影响。
XGE_BLEND_ADD 将 Source 与 Destination 的 RGB 相加，重叠区域亮度叠加，模拟发光/光晕。
颜色末尾 80（Alpha=128）使圆形半透明，加法效果更柔和。
混合模式是全局状态，特效绘制后务必恢复 XGE_BLEND_ALPHA。

要点与陷阱

默认值是 XGE_BLEND_ALPHA (1)——引擎初始化后自动使用标准 Alpha 混合。
全局状态：混合模式影响所有后续绘制（Shape、ShapeEx、SpriteBatch 等），记得在特效绘制后恢复。
XGE_BLEND_NONE vs ALPHA：NONE 完全忽略 Alpha 通道，Source 直接覆盖；ALPHA 按 Alpha 插值。
加法混合注意溢出：ADD 模式中 RGB 相加可能超过 255，GPU 会自动 clamp。
CUSTOM 模式：需要配合自定义 Shader（第 102 章）使用，否则行为未定义。
HSL 系列（15-18）：基于 HSL 色彩空间混合，对纯色背景效果可能不明显。

进阶练习

绘制两个重叠的彩色圆，依次切换全部 18 种混合模式，截图对比效果。
用 ADD 混合 + 低 Alpha 实现一个"光晕拖尾"粒子效果。
实现一个混合模式选择器：按数字键 0-9 切换模式，屏幕角落显示当前模式名称。

← 第 11 章第 13 章：深度测试 →