html做网站例子网站后台网址后缀

一、效果概述

在游戏UI和特效制作中，高斯模糊是一种常见的效果，用于创建景深、聚焦或朦胧的美术效果。本文将解析一个基于Cocos Creator的高斯模糊着色器实现。

二、核心代码结构

这个效果主要由三部分组成：

1. CCEffect - 效果定义和参数配置
2. 顶点着色器(sprite-vs) - 标准2D精灵顶点处理
3. 片段着色器(sprite-fs) - 高斯模糊核心算法

三、CCEffect配置解析

techniques:- passes:- vert: sprite-vs:vert       // 指定顶点着色器frag: sprite-fs:frag       // 指定片段着色器depthStencilState:depthTest: false         // 禁用深度测试depthWrite: false        // 禁用深度写入blendState:targets:- blend: true            // 启用混合blendSrc: src_alpha    // 源因子: src_alphablendDst: one_minus_src_alpha // 目标因子: 1-src_alpharasterizerState:cullMode: none           // 禁用面剔除properties:mainTexture: { value: grey }       // 输入纹理textureSize: { value: [1920,1080] }// 纹理尺寸blurRadius: { value: 10.0, range: [0.0, 10.0] } // 模糊半径(可调)

四、顶点着色器分析

顶点着色器主要完成标准2D精灵的顶点变换：

vec4 vert() {vec4 pos = vec4(a_position, 1);// 世界变换(可选)#if USE_LOCALpos = cc_matWorld * pos;#endif// 视图投影变换#if USE_PIXEL_ALIGNMENTpos = cc_matView * pos;pos.xyz = floor(pos.xyz); // 像素对齐pos = cc_matProj * pos;#elsepos = cc_matViewProj * pos;#endif// 传递变量到片段着色器uv0 = a_texCoord;color = a_color;return pos;
}

五、高斯模糊算法实现

片段着色器中实现了完整的二维高斯模糊：

1. 高斯权重计算

float getWeight(float x, float y, float rho) {return exp(-(x*x + y*y)/(2.0*rho*rho));
}

2. 模糊主函数

vec4 gaussBlur(vec2 uv) {vec4 finalColor = vec4(0.0);float rho = blurRadius / 3.0; // 标准差vec2 texelSize = 1.0 / textureSize; // 单个像素大小// 第一遍：计算总权重float totalWeight = 0.0;for(int x = -MAX_RADIUS; x <= MAX_RADIUS; x++) {for(int y = -MAX_RADIUS; y <= MAX_RADIUS; y++) {if (abs(float(x)) <= blurRadius && abs(float(y)) <= blurRadius) {totalWeight += getWeight(float(x), float(y), rho);}}}// 第二遍：应用模糊for(int x = -MAX_RADIUS; x <= MAX_RADIUS; x++) {for(int y = -MAX_RADIUS; y <= MAX_RADIUS; y++) {if (abs(float(x)) <= blurRadius && abs(float(y)) <= blurRadius) {float weight = getWeight(float(x), float(y), rho) / totalWeight;vec2 offset = vec2(float(x), float(y)) * texelSize;finalColor += texture(mainTexture, uv + offset) * weight;}}}return finalColor;
}

3. 片段着色器入口

vec4 frag() {vec4 col = gaussBlur(uv0);return col * color;
}

六、性能优化建议

1. 分离模糊：将二维模糊拆分为水平和垂直两次一维模糊，可大幅减少采样次数
2. 降采样：先缩小纹理尺寸进行模糊，再放大回原尺寸
3. 限制半径：如代码中做的，设置最大模糊半径(10像素)
4. 使用预计算权重：提前计算好权重表，减少实时计算

七、应用场景

1. UI背景模糊效果
2. 游戏暂停时的背景处理
3. 角色技能特效
4. 景深模拟

八、总结

这个实现提供了可配置的高斯模糊效果，通过调整blurRadius参数可以控制模糊程度。虽然当前实现使用了标准的二维高斯模糊，但在实际项目中可以根据性能需求进行优化。

完整代码已在文章开头给出，读者可以直接在Cocos Creator项目中尝试使用或进一步修改优化。