LearnOpenGL - Android OpenGL ES 3.0 基础特效实现

news2024/9/20 10:38:18

系列文章目录

  • LearnOpenGL 笔记 - 入门 01 OpenGL
  • LearnOpenGL 笔记 - 入门 02 创建窗口
  • LearnOpenGL 笔记 - 入门 03 你好，窗口
  • LearnOpenGL 笔记 - 入门 04 你好，三角形
  • OpenGL - 如何理解 VAO 与 VBO 之间的关系
  • LearnOpenGL - Android OpenGL ES 3.0 绘制三角形
  • LearnOpenGL - Android OpenGL ES 3.0 绘制纹理
  • LearnOpenGL - Android OpenGL ES 3.0 YUV 渲染
  • LearnOpenGL - Android OpenGL ES 3.0 使用 FBO 进行离屏渲染

一、前言

本章我们学习下如何来写一个基础特效，本文所有代码你可以在 BasicEffect.kt 找到

二、GLSL 内置函数

通过 shader 来实现特效，GLSL 是我们使用的语言。了解 GLSL 内置函数对于清楚了解可以调用哪些函数和“子弹”有很大帮助。这方面的知识已经有很多资源可供参考，可以查阅以下文章：

  • GLSL-内置函数
  • OpenGL & Metal Shader 编程：GLSL 重要的内置函数

三、编写基础特效

2.1 片元着手器处理

在 OpenGL 中，我们可以通过片元着色器（Fragment Shader）对输入图像进行特效处理，并生成经过处理后的输出图像。一般来说，实现这种简单特效的主要逻辑都在片元着色器中，而顶点着色器是相对固定的。片元着色器处理的基本单元是片元，或者可以简单地认为是一个像素。

为了更好地理解这一点，我们可以回顾一下在 CPU 上进行图像处理的伪代码：

for(int i = 0; i < width; ++i) {
    for (int j = 0; j < height; ++j) {
        auto in = image(i, j);  // 从图像中获取像素
        auto out = process(in); // 对像素进行处理
        image(i, j) = out;      // 将处理后的像素写回到图像中
    }
}

在 OpenGL 中进行类似处理时，我们使用 texture 函数从纹理坐标中获取图片的片元，即像素，这相当于伪代码中的变量 in。然后，我们将处理后的结果输出到 fragColor，这相当于伪代码中的 out。

下面是一个简单的片元着色器示例：

#version 330 core

uniform sampler2D texture0; // 输入纹理
in vec2 v_texcoord;          // 传递的纹理坐标
out vec4 fragColor;          // 输出片元颜色

void main() {
    vec4 in = texture(texture0, v_texcoord); // 获取输入片元（像素）
    fragColor = process(in);                 // 对片元进行处理并输出
}

// 简单的例子处理函数，可以根据需求修改
vec4 process(vec4 color) {
    // 示例处理：简单的反色效果
    return vec4(1.0 - color.rgb, color.a);
}

在这个片元着色器中：

  • uniform sampler2D texture0：定义了一个输入纹理。
  • in vec2 v_texcoord：接收从顶点着色器传递过来的纹理坐标。
  • out vec4 fragColor：定义输出的片元颜色。

函数 texture(texture0, v_texcoord) 从输入的纹理中获取指定纹理坐标处的颜色值，相当于 CPU 伪代码中的 image(i, j)。然后，我们可以在 process 函数中对这个颜色值进行各种处理，最终将处理结果赋值给 fragColor，相当于 image(i, j) = out。

通过这种方式，我们可以非常灵活地定义各种图像处理效果，例如颜色转换、模糊、锐化等。只需修改 process 函数的实现即可。

2.2 最佳实践

推荐使用 KodeLife 来快速验证你想要的效果，然后再迁移到 OpenGL ES 上，例如下面这个片元着色器：

#version 330 core
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    int numBlockX = 50;
    int numBlockY = 50;
    float stepX = 1.0 / numBlockX;
    float stepY = 1.0 / numBlockY;
    float indexBlockX = floor(v_texcoord.x / stepX);
    float indexBlockY = floor(v_texcoord.y / stepY);
    
    vec2 currentBlockLeftBottom = vec2(indexBlockX*stepX, indexBlockY*stepY);
    
    fragColor = texture(texture0, currentBlockLeftBottom);
}

在这里插入图片描述
效果正确后，移植到 OpenGL ES 3.0 上只需要做很小的改动：

#version 300 es
precision mediump float;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float numBlockX = 150.0;
    float numBlockY = 150.0;
    float stepX = 1.0 / numBlockX;
    float stepY = 1.0 / numBlockY;
    float indexBlockX = floor(v_texcoord.x / stepX);
    float indexBlockY = floor(v_texcoord.y / stepY);
    
    vec2 currentBlockLeftBottom = vec2(indexBlockX*stepX, indexBlockY*stepY);
    
    fragColor = texture(texture0, currentBlockLeftBottom);
}

2.3 基础特效

在 BasicEffect.kt 一共有 8 个基础特效，参考了 PPT 中一些动画特效，接下来一一进行说明

2.3.1 动态网格

在这里插入图片描述

#version 300 es
precision mediump float;
uniform vec2 resolution;
uniform float offset;
uniform sampler2D texture0;
in vec4 v_position;
in vec2 v_texcoord;
out vec4 fragColor;
void main()
{
    vec2 imgTextCoord = v_texcoord * resolution;
    float sideLength = resolution.y / 6.0;
    float maxOffset = 0.15 * sideLength;
    float x = mod(imgTextCoord.x, floor(sideLength));
    float y = mod(imgTextCoord.y, floor(sideLength));
    
    float offsetLength = offset * maxOffset;
    if(offsetLength <= x && x <= sideLength-offsetLength
    && offsetLength <= y && y <= sideLength-offsetLength)
    {
        fragColor = texture(texture0, v_texcoord);
    }else{
        fragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
}

这个 OpenGL ES 3.0 Shader 程序用来实现一种效果，它将图像划分为若干个小正方形网格，并在每个小正方形中留下一个可以通过 offset 参数控制的可见区域。超出这个区域的边缘将会被填充为白色。下面对 Shader 程序逐行解释。

  • vec2 imgTextCoord = v_texcoord * resolution;：将纹理坐标转换为图像的像素坐标。

  • float sideLength = resolution.y / 6.0;：计算出每个小正方形的边长，6.0 表示将图像在垂直方向（y 方向）分成 6 等份。

  • float maxOffset = 0.15 * sideLength;：计算出最大偏移量，为小正方形边长的 15%。

  • float x = mod(imgTextCoord.x, floor(sideLength));：计算当前像素在所在小正方形中的相对 x 坐标。

  • float y = mod(imgTextCoord.y, floor(sideLength));：计算当前像素在所在小正方形中的相对 y 坐标。

  • float offsetLength = offset * maxOffset;：将 offset 参数转换为具体的偏移量。

  • if (offsetLength <= x && x <= sideLength - offsetLength && offsetLength <= y && y <= sideLength - offsetLength)：

    • 如果当前像素在每个小正方形的可见区域内，则从 texture0 中采样纹理颜色作为输出。
    • 否则，输出白色 (vec4(1.0, 1.0, 1.0, 1.0)).

这个 Shader 效果的核心思想是通过二维坐标系上的模运算来定位每个像素在小正方形中的位置，并根据 offset 定义的可见区域，决定是否显示纹理颜色。

总结来说，这个 Shader 实现了一种可以调整的小正方形镂空效果，通过一个 offset 参数控制每个小正方形中的可见区域大小，不在可见区域的部分填充为白色。

2.3.2 缩放的圆

在这里插入图片描述

#version 300 es
precision mediump float;
uniform vec2 resolution;
uniform float offset;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float minR = 0.2;
    float maxR = 1.0;
    float r = (minR - maxR)*offset + maxR;
    vec2 circlePoint = vec2(0.5, 0.5);
    
    vec2 circlePointRes = circlePoint * resolution;
    vec2 texcoordRes = v_texcoord * resolution;
    float rRes = r * resolution.x * 0.5;
    float dis = distance(circlePointRes, texcoordRes);
    if(dis < rRes){
        fragColor = texture(texture0, v_texcoord); 
    }else
    {
        fragColor = vec4(1,1,1,1);
    }
}

这个片段着色器的主函数实现了一个效果，它根据一个可调的 offset 参数在图像上绘制一个可调节大小的圆形区域。圆形区域内显示图像，圆形区域外显示白色。下面对主函数的逻辑进行逐行解释：

  1. 定义最小和最大半径：

    float minR = 0.2;
float maxR = 1.0;
float r = (minR - maxR) * offset + maxR;
    • 定义了一个最小半径 minR 和最大半径 maxR（都相对于纹理坐标系）。
    • 利用线性插值公式 (minR - maxR) * offset + maxR 计算当前圆形的半径 r。offset 是一个从 0 到 1 的值，大多数情况下由外部应用设定，控制着从最小半径到最大半径的变化。

  2. 定义圆心点：

    vec2 circlePoint = vec2(0.5, 0.5);
    • 圆心的定义使用标准化坐标 (0.5, 0.5)，表示纹理的中心。

  3. 将标准化坐标转换为分辨率坐标：

    vec2 circlePointRes = circlePoint * resolution;
vec2 texcoordRes = v_texcoord * resolution;
    • 将圆心 circlePoint 和当前像素的纹理坐标 v_texcoord 转换为相对于图像分辨率的实际像素坐标。

  4. 计算圆的实际半径：

    float rRes = r * resolution.x * 0.5;
    • 将标准化半径 r 转换为实际像素坐标系下的半径 rRes。这里用图像宽度的一半作为转换系数。

  5. 计算当前像素到圆心的距离：

    float dis = distance(circlePointRes, texcoordRes);
    • 计算当前像素坐标到圆心坐标的距离。

  6. 判断当前像素是显示图像还是白色：

    if(dis < rRes) {
    fragColor = texture(texture0, v_texcoord); 
} else {
    fragColor = vec4(1, 1, 1, 1); // 白色
}
    • 如果当前像素到圆心的距离 dis 小于实际半径 rRes，则此像素位于圆形区域内，显示图像纹理。
    • 否则，此像素在圆形区域外，显示白色 (vec4(1, 1, 1, 1)).

这个片段着色器通过计算每个像素到图像中心的距离，并与动态调整的半径进行比较，决定是否显示图像纹理或白色，进而实现一个可调循环形区域显示的效果。offset 参数控制圆的大小，从0到1之间变化。

2.3.3 分屏

在这里插入图片描述

#version 300 es
precision mediump float;
uniform vec2 resolution;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float N = 2.0;
    vec2 uv = v_texcoord;
    uv *= N;
    uv = fract(uv);
    
    fragColor = texture(texture0, uv);
}

这个片段着色器的实现逻辑是将输入纹理进行瓦片化处理。它将纹理坐标范围缩放并通过 fract 函数实现周期性的重复图像。下面对主函数进行逐行解释：

  1. 定义平铺次数：

    float N = 2.0;
    • 定义一个浮点数 N 来控制纹理平铺的次数。在这里，N 被设定为 2.0，意味着纹理会在水平方向和垂直方向上各重复两次。

  2. 获取当前的纹理坐标：

    vec2 uv = v_texcoord;
    • 将输入的纹理坐标 v_texcoord 赋值给局部变量 uv。

  3. 缩放纹理坐标：

    uv *= N;
    • 将纹理坐标 uv 按照平铺次数 N 进行缩放，使得纹理坐标范围从 [0.0, 1.0] 变为 [0.0, N]。当 N 为 2.0 时，纹理坐标范围变为 [0.0, 2.0]。

  4. 应用周期性重复：

    uv = fract(uv);
    • 使用 fract 函数将纹理坐标限制在 [0.0, 1.0] 的范围内。fract 函数返回输入数值的小数部分，因此当 uv 大于 1.0 时，它会返回 uv 自身的小数部分，从而实现纹理的重复平铺。

  5. 采样并输出纹理颜色：

    fragColor = texture(texture0, uv);
    • 使用调整后的纹理坐标 uv 采样纹理 texture0，并将采样到的颜色赋值给 fragColor 作为输出。

这个片段着色器通过缩放和 fract 函数实现了对输入纹理的平铺效果。当 N 为 2 时，纹理会在水平方向和垂直方向上分别重复两次。通过调整 N 的值，可以控制纹理的重复次数，使得纹理在屏幕上呈现出周期性平铺的效果。

2.3.4 百叶窗

在这里插入图片描述

#version 300 es
precision mediump float;
uniform vec2 resolution;
uniform float offset;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float shuttersMaxH = 1.0 / 10.0;
    float shuttersH = -shuttersMaxH*offset + shuttersM
    float y = mod(v_texcoord.y, shuttersMaxH);
    
    if(y < shuttersH)
    {
        fragColor = vec4(1.0,1.0,1.0,1.0);
    }else
    {
        fragColor = texture(texture0, v_texcoord);
    }
}

这个片段着色器的主函数实现了一种百叶窗效果。通过一个可调的 offset 参数，控制纹理中水平条纹之间的透明区域。透明区域显示为白色，而其余部分显示纹理。下面对主函数进行逐行解释：

  1. 定义百叶窗各条纹的最大高度：

    float shuttersMaxH = 1.0 / 10.0;
    • 定义百叶窗条纹的最大高度 shuttersMaxH。这里设定为 1.0 / 10.0，表示条纹在纹理坐标系中占据的垂直高度为 1/10，即整体被水平分成10等份。

  2. 计算当前条纹的高度：

    float shuttersH = -shuttersMaxH * offset + shuttersMaxH;
    • 通过 offset 参数动态计算当前条纹的高度 shuttersH。offset 的值在 0 到 1 之间变化。
      • 当 offset 为 0 时，shuttersH 为 shuttersMaxH，即条纹高度最大（占据1/10的总高度）。
      • 当 offset 为 1 时，shuttersH 为 0，条纹高度为 0，即没有显示条纹。

  3. 计算当前像素所在的条纹位置：

    float y = mod(v_texcoord.y, shuttersMaxH);
    • 通过 mod 函数计算当前像素的 y 纹理坐标在条纹条纹高度 shuttersMaxH 内的位置。结果 y 将在 0 到 shuttersMaxH 之间循环，表示当前像素在条纹中的相对位置。

  4. 根据位置决策显示内容：

    if(y < shuttersH)
{
    fragColor = vec4(1.0, 1.0, 1.0, 1.0);
} else {
    fragColor = texture(texture0, v_texcoord);
}
    • 如果相对位置 y 小于当前条纹高度 shuttersH，则设置该像素的颜色为白色 (vec4(1.0, 1.0, 1.0, 1.0))，表示这个区域是”透明”的。
    • 否则，从纹理 texture0 中采样颜色，并将其赋值给 fragColor，来显示该像素的纹理颜色。

这个片段着色器通过将纹理按垂直方向分成多个水平条纹，并根据 offset 参数调整每个条纹的高度，实现了一种类似百叶窗的效果。offset 参数动态控制条纹的高度，从而能够模拟百叶窗关闭及打开的过程。当offset 值最大（1.0）时，条纹高度最小（0），表示完全打开状态；当offset 值最小（0.0）时，条纹高度最大（分辨率的 1/10），表示完全关闭状态。

2.3.5 溶解渐入

在这里插入图片描述

#version 300 es
precision mediump float;
uniform sampler2D texture0;
uniform float offset;
in vec2 v_texcoord;
out vec4 fragColor;
float rand2(vec2 co){
    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main(void)
{
    float randomValue = rand2(v_texcoord);
    if(randomValue < offset){
        fragColor = texture(texture0, v_texcoord);
    }else{
        fragColor = vec4(1.0,1.0,1.0,1.0);
    }
}

这个片段着色器的主函数实现了一种基于随机性的效果。通过一个可调的 offset 参数来控制显示纹理像素的概率，其余像素显示为白色。下面对主函数进行逐行解释：

  1. 生成随机值：

    float randomValue = rand2(v_texcoord);
    • 调用自定义的 rand2 函数，生成一个基于当前纹理坐标 v_texcoord 的随机值 randomValue。
    • rand2 函数通过对纹理坐标应用一组固定的常数并使用 sin 和 fract 函数来生成一个伪随机数。

  2. 根据随机值和 offset 决策显示内容：

    if(randomValue < offset){
    fragColor = texture(texture0, v_texcoord);
}else{
    fragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
    • 比较生成的随机值 randomValue 和 offset 参数：
      • 如果 randomValue 小于 offset，则显示纹理中的颜色值，由 texture 函数采样自 texture0。
      • 否则，显示白色 (vec4(1.0, 1.0, 1.0, 1.0))。

  3. rand2 函数解释：

float rand2(vec2 co){
    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
  • rand2 函数接受一个二维向量 co 作为输入。
  • 通过 dot 函数计算 co.xy 和一个固定向量 (12.9898, 78.233) 的点积。
  • 将点积结果传递给 sin 函数并乘以一个大常数 43758.5453，目的是打破周期性并增加随机性。
  • 最后通过 fract 函数提取小数部分，生成一个范围在 [0.0, 1.0) 的伪随机数。

这个片段着色器通过伪随机数生成，实现了一种基于随机性的纹理透明效果。offset 参数控制当前像素显示纹理颜色的概率：

  • 当 offset 为 1.0 时，所有像素都会显示纹理颜色。
  • 当 offset 为 0.0 时，所有像素都显示为白色。
  • 在 0.0 和 1.0 之间的值，会根据生成的随机数决定部分像素显示纹理颜色，部分像素显示白色，形成一种随机遮挡的效果。

2.3.6 劈裂

在这里插入图片描述

#version 300 es
precision mediump float;
uniform float offset;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float w = -offset + 1.0;
    float dis = abs(v_texcoord.x - 0.5);
    if(dis < w/2.0){
      fragColor = vec4(1.0,1.0,1.0,1.0);
    }else{
      fragColor = texture(texture0, v_texcoord);
    }
}

这个片段着色器的主函数实现了一种基于水平遮罩的效果。根据一个可调的 offset 参数，决定一部分图像在水平方向上被遮挡为白色，其余部分显示纹理。下面对主函数逐行解释：

  1. 计算遮罩区域的宽度：

    float w = -offset + 1.0;
    • 定义一个浮点数 w 来表示遮罩区域的宽度。offset 参数决定了遮罩区域的宽度：
      • 当 offset 为 0 时，w 为 1，遮罩区域覆盖整个图像。
      • 当 offset 为 1 时，w 为 0，没有遮罩区域。
      • offset 为 0 到 1 之间的值，将线性控制遮罩区域的宽度。

  2. 计算当前像素到中心的水平距离：

    float dis = abs(v_texcoord.x - 0.5);
    • 计算当前像素的水平纹理坐标 v_texcoord.x 到中心（0.5）的绝对距离 dis，用来决定当前像素是否在遮罩区域内。

  3. 决策显示内容：

    if(dis < w / 2.0){
    fragColor = vec4(1.0, 1.0, 1.0, 1.0);
} else {
    fragColor = texture(texture0, v_texcoord);
}
    • 判断当前像素的水平距离 dis 是否小于遮罩区域的一半宽度 w / 2.0：
      • 如果小于 w / 2.0，表示该像素在遮罩区域内，设置该像素的颜色为白色 (vec4(1.0, 1.0, 1.0, 1.0)）。
      • 否则，从纹理 texture0 中采样颜色，并将其赋值给 fragColor。

这个片段着色器实现了一个水平遮罩效果，offset 参数控制遮罩区域的宽度：

  • 当 offset 为 0 时，遮罩区域最宽，图像完全被遮罩为白色。
  • 当 offset 为 1 时，没有遮罩区域，显示整个图像纹理。
  • 在 0.0 和 1.0 之间的值，会线性控制遮罩区域的宽度，中间区域被遮挡为白色，两边显示纹理，使得遮罩效果渐进变化。

2.3.7 轮子

在这里插入图片描述

#version 300 es
precision mediump float;
uniform float offset;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    vec2 circlePos = vec2(0.5, 0.5); // 圆心位置
    vec2 direction = v_texcoord - circlePos; // 从圆心指向当前片元的向量
    // 计算当前片元相对于圆心的角度
    float angle = atan(direction.y, direction.x);
    // 将角度范围从 [-π, π] 映射到 [0, 2π]
    if (angle < 0.0) {
        angle += 2.0 * 3.14159265358979323846;
    }
    // 当前阈值角度，offset 控制动画进度，范围为 [0, 2π]
    float curAngle = offset * 2.0 * 3.14159265358979323846;
    // 根据当前片元的角度和阈值角度决定片元颜色
    if (angle < curAngle) {
        fragColor = texture(texture0, v_texcoord); // 显示纹理
    } else {
        fragColor = vec4(1.0, 1.0, 1.0, 1.0); // 显示白色
    }
}

这个片段着色器实现了一个基于角度动画效果，即通过一个中心点（圆心）逐渐从白色向纹理过渡显示的效果。offset 参数用来控制动画进度。

  1. 定义圆心位置并计算向量方向：

    vec2 circlePos = vec2(0.5, 0.5); // 圆心位置
vec2 direction = v_texcoord - circlePos; // 从圆心指向当前片元的向量
    • circlePos 定义了圆心的位置，在纹理坐标 (0.5, 0.5)，即中心位置。
    • direction 计算从圆心到当前片元位置的向量。

  2. 计算片元相对于圆心的角度：

    float angle = atan(direction.y, direction.x);
    • 使用 atan 函数计算当前片元相对于圆心方向的角度，范围在 [-π, π]。

  3. 将角度范围映射到 [0, 2π]：

    if (angle < 0.0) {
    angle += 2.0 * 3.14159265358979323846;
}
    • 如果角度 angle 小于 0，则将其加上 2π，使得角度范围变为 [0, 2π]。

  4. 计算当前阈值角度：

    float curAngle = offset * 2.0 * 3.14159265358979323846;
    • 通过 offset 参数控制动画进度，计算当前的阈值角度 curAngle，范围从 0 到 2π。offset 的值应在 [0, 1.0] 之间变化。

  5. 判断并设置片元颜色：

    if (angle < curAngle) {
    fragColor = texture(texture0, v_texcoord); // 显示纹理
} else {
    fragColor = vec4(1.0, 1.0, 1.0, 1.0); // 显示白色
}
    • 如果当前片元的角度 angle 小于当前阈值角度 curAngle，则显示纹理颜色。
    • 否则，显示白色 (vec4(1.0, 1.0, 1.0, 1.0))。

这个片段着色器通过计算每个片元相对于圆心的角度，并与由 offset 参数定义的阈值角度进行比较，实现一种从中心开始展开的动画效果。offset 参数在 [0, 1.0] 之间变化，逐渐揭示从圆心扩展到整个纹理的过程。

2.3.8 马赛克

在这里插入图片描述

#version 300 es
precision mediump float;
uniform sampler2D texture0;
in vec2 v_texcoord;
out vec4 fragColor;
void main(void)
{
    float numBlockX = 150.0;
    float numBlockY = 150.0;
    float stepX = 1.0 / numBlockX;
    float stepY = 1.0 / numBlockY;
    float indexBlockX = floor(v_texcoord.x / stepX);
    float indexBlockY = floor(v_texcoord.y / stepY);
    
    vec2 currentBlockLeftBottom = vec2(indexBlockX*stepX, indexBlockY*stepY);
    
    fragColor = texture(texture0, currentBlockLeftBottom);
}

这个片段着色器的主函数实现了一种像素化效果。将图像划分成若干个小块，然后对每个小块仅采样其左下角的颜色，从而实现一种块状化的视觉效果。下面对主函数的逻辑进行逐行解释：

  1. 定义块数和每个块的尺寸：

    float numBlockX = 150.0;
float numBlockY = 150.0;
float stepX = 1.0 / numBlockX;
float stepY = 1.0 / numBlockY;
    • numBlockX 和 numBlockY 分别定义了图像在水平方向和垂直方向上划分的块数，这里设定为 150 块。
    • stepX 和 stepY 计算每个块在纹理坐标系中的宽度和高度。由于纹理坐标范围是 [0.0, 1.0]，所以步长 stepX 和 stepY 分别为 1.0 / 150.0。

  2. 计算当前片元的块索引：

    float indexBlockX = floor(v_texcoord.x / stepX);
float indexBlockY = floor(v_texcoord.y / stepY);
    • indexBlockX 计算当前片元在水平方向上位于哪个块中。通过将当前片元的 x 坐标除以 stepX，并用 floor 函数取整。
    • 类似地，indexBlockY 计算当前片元在垂直方向上位于哪个块中。

  3. 计算当前块的左下角坐标：

    vec2 currentBlockLeftBottom = vec2(indexBlockX * stepX, indexBlockY * stepY);
    • currentBlockLeftBottom 计算当前片元所在块的左下角的纹理坐标。通过将块索引分别乘以步长 stepX 和 stepY 得到。

  4. 采样并输出纹理颜色：

    fragColor = texture(texture0, currentBlockLeftBottom);
    • 使用 texture 函数从纹理 texture0 中采样左下角坐标点的颜色，并将其赋值给 fragColor 作为输出。这意味着当前块中的所有片元都会显示块左下角的颜色，从而实现像素化效果。

这个片段着色器通过将图像划分成多个小块，并对每个块仅采样其左下角的颜色，达到了像素化的效果。numBlockX 和 numBlockY 控制块的数量，所以可以通过调整这两个参数来改变块的大小，从而获得不同程度的像素化效果：

  • 较大的 numBlockX 和 numBlockY 值，将导致更多更小的块，像素化程度更高。
  • 较小的 numBlockX 和 numBlockY 值，将导致更少更大的块，像素化程度更低。

总结

本文介绍了 8 中基础特效的实现逻辑，所有代码可以在 BasicEffect.kt 找到。

参考

  • BasicEffect.kt
  • android-gpuimage
  • KodeLife

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1922348.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Open3D Ransac算法分割多个点云平面

Open3D Ransac算法分割多个点云平面

目录 一、概述 1.1基本原理 1.2实现步骤 二、代码实现 三、实现效果 3.1原始点云 3.2分割后点云 前期试读&#xff0c;后续会将博客加入该专栏&#xff0c;欢迎订阅 Open3D与点云深度学习的应用_白葵新的博客-CSDN博客 一、概述 1.1基本原理 原理一样&#xff0c;不…
阅读更多...
SpringCloud---zuul路由网关

SpringCloud---zuul路由网关

zuul网关 zuul网关定义 Zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet(filter)应用。Zuul 在云平台上提供动态路由&#xff0c;监控&#xff0c;弹性&#xff0c;安全等边缘服务的框架。Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的…
阅读更多...
FastAPI 学习之路（四十七）WebSockets（三）登录后才可以聊天

FastAPI 学习之路（四十七）WebSockets（三）登录后才可以聊天

之前我们是通过前端自动生成的token信息&#xff0c;这次我们通过注册登录&#xff0c;保存到本地去实现。首先&#xff0c;我们实现一个登录页面&#xff0c;放在templates目录下。 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…
阅读更多...
单目测距 单目相机测距 图片像素坐标转实际坐标的一种转换方案

单目测距 单目相机测距 图片像素坐标转实际坐标的一种转换方案

需要相机位置固定 原图 红色的点是我们标注的像素点&#xff0c;这些红色的点我们知道它的像素坐标&#xff0c;以及以右下角相机位置为原点的x y 实际坐标数值 通过转换&#xff0c;可以得到整个图片内部其余像素点的实际坐标&#xff0c; 这些红色的点是通过转换关系生成的&…
阅读更多...
408数据结构-图的应用2-最短路径 自学知识点整理

408数据结构-图的应用2-最短路径 自学知识点整理

前置知识&#xff1a;最小生成树&#xff0c;图的遍历 最短路径 当图是带权图时&#xff0c;把从一个顶点 v 0 v_0 v0​到图中其余任意一个顶点 v i v_i vi​的一条路径所经过边上的权值之和&#xff0c;定位为该路径的带权路径长度&#xff0c;把带权路径长度最短的那条路径&…
阅读更多...
借人工智能之手，编织美妙歌词篇章

借人工智能之手，编织美妙歌词篇章

在音乐的领域中&#xff0c;歌词宛如璀璨的明珠&#xff0c;为旋律增添了无尽的魅力和情感深度。然而&#xff0c;对于许多创作者来说&#xff0c;编织出美妙动人的歌词并非易事。但如今&#xff0c;随着科技的飞速发展&#xff0c;人工智能为我们带来了全新的创作可能。 “妙…
阅读更多...
ant design form动态增减表单项Form.List如何进行动态校验规则

ant design form动态增减表单项Form.List如何进行动态校验规则

项目需求&#xff1a; 在使用ant design form动态增减表单项Form.List时&#xff0c;Form.List中有多组表单项&#xff0c;一组中的最后一个表单项的校验规则是动态的&#xff0c;该组为最后一组时&#xff0c;最后一个表单项是非必填项&#xff0c;其他时候为必填项。假设动态…
阅读更多...
有奖竞猜！斗牛士军团与法兰西骑士的终极之战，谁将笑傲欧洲之巅？

有奖竞猜！斗牛士军团与法兰西骑士的终极之战，谁将笑傲欧洲之巅？

痛快看球&#xff0c;畅玩游戏&#xff0c;AGON爱攻带你进入酣畅淋漓的足球世界&#xff01; 7月15日&#xff0c;绿茵赛场硝烟再起&#xff0c;两支身披荣光的王者之师&#xff0c;一路过关斩将&#xff0c;最终会师决赛。一场万众瞩目的巅峰对决即将拉开帷幕&#xff0c;究竟…
阅读更多...
Midjourney v6.5 可能会在“7月底”发布，并改进了真实感和皮肤纹理

Midjourney v6.5 可能会在“7月底”发布，并改进了真实感和皮肤纹理

Midjourney v6.5即将发布&#xff0c;这一更新将大幅提升图像的真实感和皮肤纹理&#xff0c;为用户带来更逼真的视觉体验。首席执行官David Holz在电话会议中宣布&#xff0c;新版本将提高图像清晰度&#xff0c;特别是在手部和皮肤细节上&#xff0c;同时改进Web应用程序和个…
阅读更多...
对红酒品质进行数据分析（python）

对红酒品质进行数据分析（python）

http://t.csdnimg.cn/UWg2S 数据来源于这篇博客&#xff0c;直接下载好csv文件。 这篇内容均在VScode的jupyter notebook上完成&#xff0c;操作可以看我的另一篇博客&#xff1a;http://t.csdnimg.cn/69sDJ 一、准备工作 1. 导入数据库 #功能是可以内嵌绘图&#xff0c;并…
阅读更多...
替换:show-overflow-tooltip=“true“ ，使用插槽tooltip，达到内容可复制

替换:show-overflow-tooltip=“true“ ，使用插槽tooltip，达到内容可复制

原生的show-overflow-tooltip“true” 不能满足条件&#xff0c;使用插槽自定义编辑&#xff1b; 旧code <el-table-column prop"reason" label"原因" align"center" :show-overflow-tooltip"true" /> <el-table-column pro…
阅读更多...
构建实时银行应用程序：英国金融机构 Nationwide 为何选择 MongoDB Atlas

构建实时银行应用程序：英国金融机构 Nationwide 为何选择 MongoDB Atlas

Nationwide Building Society 超过135年的互助合作 Nationwide Building Society&#xff08;以下简称“Nationwide”&#xff09; 是一家英国金融服务提供商&#xff0c;拥有超过 1500 万名会员&#xff0c;是全球最大的建房互助会。 Nationwide 的故事可以追溯到 1884 年&am…
阅读更多...
ArcGIS Pro、ChatGPT、Python、InVEST等多技术融合的水文、生态、气候变化等地学领域科研及项目综合能力提升

ArcGIS Pro、ChatGPT、Python、InVEST等多技术融合的水文、生态、气候变化等地学领域科研及项目综合能力提升

在当前科学技术飞速发展的背景下&#xff0c;综合科研能力的提升对于推动各个领域的创新和发展具有重要的意义。在当前竞争激烈的科研环境中&#xff0c;掌握先进的数据处理与分析技术、深入了解前沿的研究领域、有效利用智能工具进行科研工作&#xff0c;已成为科研人员脱颖而…
阅读更多...
html5——CSS3_文本样式属性

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …
阅读更多...
CF1473E Minimum Path 题解（最短路，分层图最短路，较重要的套路）

CF1473E Minimum Path 题解（最短路，分层图最短路，较重要的套路）

题目描述&#xff1a; 题目 分析&#xff1a; 题目是要让我们求从 1 1 1 出发&#xff0c;到 i i i 的路径的最小权值。其中路径的权值定义为 路径上所有的边权和 减去最大边权 加上最小边权。这里有一个很秒的转化&#xff1a;可以把一条路径的权值理解为 必须将路径上的任…
阅读更多...
【面试八股总结】单例模式实现详解

【面试八股总结】单例模式实现详解

一、基本概念 单例设计模式是⼀种确保⼀个类只有⼀个实例&#xff0c;并提供⼀个全局访问点来访问该实例的创建模式。 关键概念&#xff1a; 一个私有构造函数&#xff1a;确保只能单例类自己创建实例一个私有静态变量&#xff1a;确保只有一个实例&#xff0c;私有静态变量用…
阅读更多...
IDEA自动把接口中的方法注解填充到实现类中，勾选Copy JavaDoc即可

IDEA自动把接口中的方法注解填充到实现类中，勾选Copy JavaDoc即可

1. 目的 有一个Image接口类&#xff0c;接口中有getUserById方法&#xff0c;方法上有注释&#xff0c;实现类ImageImpl实现Image中的方法时&#xff0c;自动把接口中方法的注释也给带下来 具体案例如下 2. 接口类 有一个getUserById方法&#xff0c;方法上面有注释 3. 实现…
阅读更多...
Java常用的API_02（正则表达式、爬虫）

Java常用的API_02（正则表达式、爬虫）

Java正则表达式 七、正则表达式7.1 格式7.1.1 字符类注意字符类示例代码1例2 7.1.2 预定义字符预定义字符示例代码例2 7.1.3 区别总结 7.2 使用Pattern和Matcher类与直接使用String类的matches方法的区别。&#xff08;1&#xff09; 使用Pattern和Matcher类示例代码 &#xff…
阅读更多...
JVM 之对象的结构与创建

JVM 之对象的结构与创建

1.对象的创建 1.1类加载 当Java 虚拟机遇到一条字节码 new 指令时&#xff0c;首先将去检查这个指令的参数是否能在常量池中定位到 一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有&#xff0c;那 必须先执行相应的类加载过…
阅读更多...
昇思MindSpore学习总结十五 ——基于Mindspore 实现BERT对话情绪识别

昇思MindSpore学习总结十五 ——基于Mindspore 实现BERT对话情绪识别

1、环境配置 根据实际情况&#xff0c;选择合适版本。 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023