}

之前对这个技术只是浅尝辄止，这次花了一周时间深入研究，收获很多，整理成文分享出来。

prism-atom-one-dark"

xmlns="http://www.w3.org/2000/svg">

d="M5,0

style="-webkit-tap-highlight-color:

rgba(0,

src="https://i-blog.csdnimg.cn/direct/5d6748ccacf94cde8d7d2e3d92db5987.png">

id="GPUImageColorBurnBlendFilter__1">GPUImageColorBurnBlendFilter

代码全解析

本文将全面解析

GPUImageColorBurnBlendFilter.java

代码，逐行添加注释并分段讲解代码含义、核心原理，同时给出实际使用示例。

Android

Burn）混合滤镜，用于将两张图片/纹理按“颜色加深”模式融合，底层基于

OpenGL

http://www.apache.org/licenses/LICENSE-2.0

Apache

punctuation">.cyberagent

class="token

punctuation">.android

class="token

punctuation">.gpuimage

class="token

punctuation">.filter

class="token

GPUImageTwoInputFilter（双输入纹理滤镜基类）

封装了双纹理输入的基础渲染逻辑（如纹理绑定、着色器编译等）

class-name">GPUImageColorBurnBlendFilter

class-name">GPUImageTwoInputFilter

定义颜色加深混合的片段着色器常量（核心滤镜逻辑）

COLOR_BURN_BLEND_FRAGMENT_SHADER

varying：从顶点着色器传递的插值变量；highp：高精度浮点（适配移动端

textureCoordinate2：第二个输入纹理的坐标

uniform：着色器执行期间不变的全局常量；sampler2D：2D

纹理采样器（绑定输入纹理）

inputImageTexture：第一个输入纹理（底层纹理）的采样器

inputImageTexture2：第二个输入纹理（顶层纹理）的采样器

mediump：中精度浮点（平衡性能与精度）；textureColor：底层纹理当前像素颜色

gl_FragColor：片段着色器输出变量，代表当前像素最终颜色

class-name">GPUImageColorBurnBlendFilter

class="token

punctuation">(COLOR_BURN_BLEND_FRAGMENT_SHADER

class="token

punctuation">}

id="1__115__93">1.

协议：允许商业使用、修改、分发，但需保留版权声明，且软件“按原样”分发，无任何担保。

包声明（第

jp.co.cyberagent.android.gpuimage.filter;

GPUImage

GPUImageTwoInputFilter

• 继承关系：GPUImageTwoInputFilter

  是双输入纹理滤镜的基类，封装了“绑定两个纹理、传递纹理坐标、编译着色器”等重复逻辑，子类只需实现自定义的混合算法；

• 命名规范：GPUImage

  GPUImage

  BlendFilter（混合滤镜），语义清晰。

id="4__2035__107">4.

实现滤镜的核心，该常量定义了“颜色加深”的像素计算规则，逐行解析：

最佳实践：

经过多个项目的验证，我总结了几个关键点：1)

做好异常处理

这些看似简单，但能避免很多生产环境问题。

代码片段	核心作用
varying highp textureCoordinate	接收顶点着色器传递的第一个纹理坐标（插值后适配每个像素），highp 保证坐标精度；
uniform sampler2D inputImageTexture	绑定第一个输入纹理（底层图片），是读取纹理颜色的“入口”；
texture2D(inputImageTexture, textureCoordinate)	从底层纹理中根据坐标读取像素颜色，返回 vec4 0.0-1.0）；
gl_FragColor whiteColor textureColor2	颜色加深核心公式： (1.0 导致除零”的异常。

构造函数（第

class-name">GPUImageColorBurnBlendFilter

class="token

punctuation">(COLOR_BURN_BLEND_FRAGMENT_SHADER

class="token

punctuation">}

• 无参构造函数便于外部创建实例；
• 调用父类构造函数传入自定义片段着色器，父类会自动完成：编译着色器、链接着色器程序、初始化纹理绑定环境，子类无需重复实现底层

  OpenGL

  id="_124">片段着色器代码深度解析

这段代码是

OpenGL

GPUImageColorBurnBlendFilter

function">texture2D

class="token

punctuation">(inputImageTexture

class="token

function">texture2D

class="token

punctuation">(inputImageTexture2

class="token

punctuation">(whiteColor

punctuation">}

id="1_12_150">1.

textureCoordinate2;

• varying：OpenGL

  关键字，代表插值变量——该变量的值由顶点着色器（Vertex

  Shader）传递，并在像素间自动插值（比如图片拉伸/缩放时，坐标会平滑过渡）。

• highp：精度限定符，代表高精度浮点型（high

  GPU

  中用于纹理坐标可避免精度丢失（坐标偏移、模糊）。

• vec2：二维向量类型，存储纹理坐标（范围

  0.0~1.0，(0,0)

  对应右下角）。

• textureCoordinate：底层纹理（被混合的基础图片）的坐标；textureCoordinate2：顶层纹理（用于混合的叠加图片）的坐标。

id="2_34_160">2.

inputImageTexture2;

• uniform：OpenGL

  关键字，代表全局常量——着色器执行期间值不变，由

  Java

  框架）传入（绑定具体的纹理ID）。

• sampler2D：2D

  纹理采样器类型，是读取纹理像素颜色的“接口”，可以理解为“纹理的句柄”。

• inputImageTexture：绑定底层纹理；inputImageTexture2：绑定顶层混合纹理。

id="3_58_169">3.

main()：片段着色器的入口函数，每个像素都会执行一次，是像素颜色计算的核心入口。

mediump：精度限定符，代表中精度浮点型（medium

GPU

的性能与精度（颜色计算无需超高精度）。

vec4：四维向量类型，存储像素的

RGBA

vec4(1.0,0.0,0.0,1.0)

是纯红色）。

texture2D(sampler2D

sampler,

• gl_FragColor：OpenGL

  内置输出变量，代表当前像素的最终颜色，赋值后会直接渲染到屏幕/纹理。

• 公式原理（颜色加深算法）：
  

  1.0

  顶层R值

  • 若顶层纹理像素为白色（1.0）：1.0

    (1.0

    颜色更暗，实现“加深”效果；

  • 若顶层纹理像素为黑色（0.0）：公式会出现除零，GPUImage

    框架底层会自动处理（比如限制最小值），避免渲染异常。

id="_195">颜色加深效果的视觉特征

颜色加深混合的核心是让底层颜色变得更暗，模拟“用颜料加深底色”的效果：

• 顶层纹理越暗（通道值越小），底层颜色加深越明显；
• 顶层纹理为白色时，底层颜色完全不变；
• 顶层纹理为黑色时，底层颜色会被加深为纯黑。

补充注意事项

1. 精度选择：纹理坐标用

   highp（避免坐标偏移），颜色计算用

   GPU

   的最佳实践；

2. 除零保护：若顶层纹理某通道值为

   0.0，公式会触发除零，实际开发中可增加边界判断（如

   textureColor2

   0.001)），避免颜色异常；

3. 通道同步：公式会同时作用于

   RGBA

   textureColor.a);。

id="_208">该滤镜的实际使用方法

前置条件：集成

'jp.co.cyberagent.android:gpuimage:2.1.0'

}

res/layout/activity_main.xml

中添加

GPUImageView（GPUImage

encoding="utf-8"?>

class="token

punctuation"><LinearLayout

namespace">xmlns:android

class="token

punctuation">"http://schemas.android.com/apk/res/android

class="token

punctuation">"

class="token

namespace">android:layout_width

class="token

punctuation">"match_parent

class="token

punctuation">"

class="token

namespace">android:layout_height

class="token

punctuation">"match_parent

class="token

punctuation">"

class="token

punctuation">>

class="token

punctuation"><jp.co.cyberagent.android.gpuimage.GPUImageView

class="token

namespace">android:id

class="token

punctuation">"@+id/gpuImageView

class="token

punctuation">"

class="token

namespace">android:layout_width

class="token

punctuation">"match_parent

class="token

punctuation">"

class="token

namespace">android:layout_height

class="token

punctuation">"match_parent

class="token

punctuation">/>

punctuation"></LinearLayout

class="token

punctuation">>

punctuation">.graphics

class="token

punctuation">.

class="token

punctuation">.graphics

class="token

punctuation">.

class="token

class-name">BitmapFactory

class="token

punctuation">.

class="token

punctuation">.appcompat

class="token

punctuation">.

class="token

class-name">AppCompatActivity

class="token

punctuation">.cyberagent

class="token

punctuation">.android

class="token

punctuation">.gpuimage

class="token

punctuation">.

class="token

class-name">GPUImage

class="token

punctuation">.cyberagent

class="token

punctuation">.android

class="token

punctuation">.gpuimage

class="token

punctuation">.

class="token

class-name">GPUImageView

class="token

punctuation">.cyberagent

class="token

punctuation">.android

class="token

punctuation">.gpuimage

class="token

punctuation">.filter

class="token

punctuation">.

class="token

class-name">GPUImageColorBurnBlendFilter

class="token

class-name">MainActivity

class-name">AppCompatActivity

class-name">GPUImageView

mGPUImageView

punctuation">(savedInstanceState

class="token

function">setContentView

class="token

punctuation">.layout

class="token

punctuation">.activity_main

class="token

function">findViewById

class="token

punctuation">.gpuImageView

class="token

class-name">GPUImage

class="token

function">setGLSurfaceView

class="token

punctuation">(mGPUImageView

class="token

class-name">BitmapFactory

class="token

function">decodeResource

class="token

function">getResources

class="token

punctuation">.drawable

class="token

punctuation">.base_img

class="token

class-name">BitmapFactory

class="token

function">decodeResource

class="token

function">getResources

class="token

punctuation">.drawable

class="token

punctuation">.blend_img

class="token

class-name">GPUImageColorBurnBlendFilter

colorBurnFilter

class-name">GPUImageColorBurnBlendFilter

class="token

function">setFilter

class="token

punctuation">(colorBurnFilter

class="token

function">setSecondImage

class="token

punctuation">(blendBitmap

class="token

punctuation">(baseBitmap

class="token

function">onDestroy

class="token

function">onDestroy

class="token

function">deleteImage

class="token

punctuation">}

4.

使用注意事项

• 纹理尺寸：两张图片尺寸建议一致，若不一致，GPUImage

  会自动缩放纹理坐标，但可能导致混合效果偏差；

• 性能优化：着色器中优先使用

  highp

  0.001);），避免除零错误；

• 资源回收：使用完

  Bitmap

  recycle()，GPUImage

  实例在页面销毁时调用

  id="_290">总结

GPUImageColorBurnBlendFilter

GPUImage

其代码结构简洁，复用了基类的双纹理渲染逻辑，仅需实现自定义的混合公式；实际使用时只需集成框架、传入两张纹理即可快速实现颜色加深效果，适用于图片编辑、视频处理等移动端视觉场景。

src="https://i-blog.csdnimg.cn/direct/005fdd3e9abb474a9ed4aa745b54697e.png">