返回

OpenGLES实现毛思维效果

Android

**\

OpenGLES概况

先从OpenGLES的API元素中熟悉一下：

1. 纹理对象

  • 首先，纹理对象用来读取和渲染图片。
  • 格式，纹理储存像素的格式，取决于你图片的格式。

2. 纹理参数

  • 这些参数，定义了需要哪些纹理效果，例如：
    • 包裹：控制纹理是填充还是重复。
    • 过滤：定义如何选择像素被读取和放大或缩小。

3. 渲染纹理

  • 渲染纹理允许我们使用FBO（帧对象）创建一个新的帧。
  • 这些纹理可以被用来制作诸如高斯效果（平滑图形的边缘）和深度信息（像全屏环境贴图那样）的视觉效果。

4. 顶点和顶点着色器

  • 顶点是一个简单数据结构，用于定义一个给定的图像中的所有定点。
  • 每一个顶点可以关联许多属性，像位置，颜色，法向量。
  • 通过著色器，这些属性被传入自定义图形程序并转换成顶点颜色。

高斯滤镜的原理及实现

  1. 1. 1D正态分布
    • 高斯滤镜基于正态分布。
    • 正态分布的函数如下：
      N(\sigma) = \frac{1}{\sigma\sqrt{2\pi}}e^{\frac{x^2}{\sigma^2}}
  2. 2. 高斯加权窗口
    • 在每一个维度上，正态分布是无限的，然而我们只使用它的一个范围。
    • 最好的方式是定义一个窗口。
    • 窗口决定顶点的位置，决定需要在什么时候计算高斯值。
  3. 3. 高斯滤镜的实现
    • 这里需要很多数学计算。
    • 为了实现这个效果，我们需要创建一个新的纹理，它用着色器给出的高斯卷积做为输入。
    • 卷积是通过一个顶点着色器计算的，该着色器执行像素后操作。
    • 滤镜最后计算一个特定的材质：
      • 在第一个Pass中，绘制的为源纹理。
      • 在第二个Pass中，源纹理被高斯纹理。
      • 这时，与高斯纹理混叠的原纹理会生成高斯滤镜的效果。

实现效果的步骤

  1. 1. 确定需要添加毛思维效果的图片
  2. 2. 使用GLSL创建着色器：
    • 设定纹理参数：
      • 在OpenGLES里面，可能需要： 
        glActiveTexture(GL_OES_texture_env);
        来做，用以设置纹理的环绕方式。
      • 过滤器参数，规定了如何选择用于读取图片的像素和放大或缩小。
      • 在OpenGLES中可能需要: 
        glTexParameteri(GL_OES_texture_env,GL_OES_texture_env_mode,GL_REPLACE);
        来实现。
  3. 3. 设置位置和纹理：
    • 在顶点着色器中，设定纹理坐标（用一个通用的矩形来表现）
    • 为了方便编程，使用FBO（帧对象）和一个渲染纹理来创建中间的图片。
  4. 4. 建立我们的着色器程序：
    • 使用一个着色器程序来设定最终的设置，这个着色器程序结合了顶点着色器和片断着色器。
    • 为了确保图片用上了我们创建的着色器，我们需要用如下代码：
    // 绑定着色器程序
glUseProgram(program);

// 允许我们的顶点数据
glEnableVertexAttribArray(position_data_handle);

// 准备纹理
glActiveTexture(GL_OES_texture_env);
glBindTexture(GL_OES_texture_env,texture_id);
glUniform1i(sampler_handle,0);
  5. 5. 发送uniform数据
    • uniform是着色器中一些特定的值，它将传递给着色器程序。
    • 为了设定着色器程序，使用如下代码：
    // 发送uniform数据
glUniformMatrix4pv(mvp_handle,1,false,mv_matrix);
glUniform1i(sample_handle,texture_id);
  6. 6. 渲染图片 
    glDrawArrays(GL_TRIANGLE_STRIP,0,4);

这个使用OpenGLES实现高斯滤镜的例子很简单。
只需使用您自己的图片，一个配置好的OpenGLES程序，
就可以以非常酷的效果展示您的图片了。

结语

高斯滤镜是一个对游戏设计者、媒体工作者、和科学家们非常有用的效果。它可以用来柔化照片中的高光，降低噪声，还有更多用途。通过这篇文章和几个实例代码，我希望大家可以掌握如何使用OpenGLES实现高斯滤镜和毛思维效果。