OpenGL ES初探

Table of Contents

我会尽量用最简单的方式解释 OpenGL ES 和相关术语，即使你完全没有基础也能看懂。

1. OpenGL ES 是什么？

  • 一句话定义：
    OpenGL ES 是一个专门为手机、平板、游戏机等移动或嵌入式设备设计的 图形渲染标准。
    它告诉设备上的 GPU（图形处理器） 如何高效地绘制图像、3D 模型、特效等。

  • 类比理解：
    想象你是一个导演，OpenGL ES 就像一本“拍摄指南”，告诉摄影师（GPU）如何摆放镜头、打光、处理画面，最终生成你想要的电影（图像）。

2. 核心概念解释

(1) 什么是 GPU？

  • GPU（Graphics Processing Unit，图形处理器）：
    电脑或手机里专门负责处理图像任务的芯片。它比 CPU（中央处理器）更擅长同时处理大量重复任务（比如计算屏幕上百万个像素的颜色）。

(2) 什么是“渲染”（Rendering）？

  • 渲染：
    把数据（比如 3D 模型的坐标、颜色）转换成屏幕上显示的图像的过程。
    例如：游戏里的人物模型 → 经过渲染 → 变成你看到的立体角色。

(3) 什么是“图形 API”？

  • API（Application Programming Interface，应用程序接口）：
    一套预先定义好的工具和规则，让开发者不用关心底层硬件细节，直接调用功能。
    图形 API 就是专门用来控制 GPU 画图的工具包，OpenGL ES 是其中之一（其他还有 Vulkan、Metal 等）。

3. OpenGL ES 的用途

  • 你能用它做什么？

    • 在屏幕上显示 3D 游戏角色
    • 给视频添加滤镜（比如黑白、模糊）
    • 实现动态特效（比如下雨、火焰）
    • 绘制 UI 界面（比如按钮、图表）

  • 为什么用 OpenGL ES？

    • 高效：直接操作 GPU，比用 CPU 画图快得多。
    • 跨平台：Android、iOS、游戏机都能用同一套代码。
    • 灵活：可以自定义复杂的视觉效果。

4. OpenGL ES 的核心工作原理

想象你要在手机上显示一个 红色的三角形，OpenGL ES 的处理流程如下：

步骤 1：定义数据

  • 顶点（Vertex）：
    三角形的三个角点坐标（比如 (0,0)、(1,0)、(0.5,1)）。
    （“顶点”就是几何图形的关键点，比如立方体的 8 个角。）

步骤 2：处理顶点

  • 顶点着色器（Vertex Shader）：
    一段小程序，告诉 GPU 如何处理顶点。比如移动位置、旋转、缩放。
    例如：把三角形放大 2 倍。

步骤 3：组装图形

  • 图元（Primitive）：
    OpenGL ES 把顶点连成基本图形（如三角形、线条）。
    这里就是把三个顶点连成一个三角形。

步骤 4：处理像素

  • 片段着色器（Fragment Shader）：
    另一段小程序，决定每个像素的颜色。
    例如：把三角形内的所有像素涂成红色。

步骤 5：输出到屏幕

  • 帧缓冲（Framebuffer）：
    GPU 把处理好的像素数据存入一块内存区域，最终显示到屏幕上。

5. 关键术语详解

(1) 着色器（Shader）

  • 是什么：
    用 GLSL 语言（类似 C 语言）写的小程序，运行在 GPU 上。
  • 两种类型：
    • 顶点着色器：处理顶点位置（比如让人物动起来）。
    • 片段着色器：处理像素颜色（比如给画面加滤镜）。

(2) 纹理（Texture）

  • 是什么：
    可以理解为“贴纸”或“图片”，贴在 3D 模型表面，让模型看起来更真实。
    （比如给游戏角色的衣服贴上花纹图案。）

(3) 渲染管线（Rendering Pipeline）

  • 是什么：
    GPU 处理图形的“流水线”，分为多个阶段：顶点处理 → 组装图形 → 像素处理 → 输出。
    （就像工厂流水线，每个工人负责一个环节。）

(4) 坐标系

  • 归一化坐标系：
    OpenGL ES 中，屏幕的左上角是 (-1,1)，右下角是 (1,-1)，无论屏幕实际大小如何。
    （这样坐标计算更简单，不用考虑具体分辨率。）

6. GLSL

GLSL（OpenGL Shading Language）是用于编写着色器（Shader）的编程语言，专为图形渲染管线中的GPU 计算设计。它是 OpenGL/OpenGL ES 的核心组成部分，用于控制顶点、片段（像素）等渲染阶段的行为，实现复杂的图形效果。

1. GLSL 的核心作用

  • 替代固定管线：传统 OpenGL 使用固定功能的渲染管线，而 GLSL 允许开发者通过编程自定义渲染细节。
  • 并行计算：针对 GPU 的并行架构优化，可同时处理数百万个顶点或像素。
  • 高效图形处理：直接操作顶点坐标、颜色、纹理、光照等数据，实现高性能渲染。

2. GLSL 的关键特点

(1) 嵌入在 OpenGL/OpenGL ES 中
  • 着色器代码以字符串形式嵌入到 C++/Java/Objective-C 等宿主语言中，通过 OpenGL API 编译和执行。
(2) 强类型语言
  • 明确的数据类型（如 float、vec4、mat4、sampler2D），适合图形计算。 
    vec3 position = vec3(1.0, 2.0, 3.0); // 三维向量
mat4 matrix = mat4(1.0);              // 4x4 矩阵
(3) 着色器类型

  • 顶点着色器（Vertex Shader）：

    • 处理每个顶点的位置、法线、纹理坐标等属性。
    • 示例：实现模型变换、骨骼动画。
    // 顶点着色器示例：将顶点坐标变换到屏幕空间
attribute vec3 aPosition;
uniform mat4 uMVPMatrix; // 模型-视图-投影矩阵
void main() {
    gl_Position = uMVPMatrix * vec4(aPosition, 1.0);
}

  • 片段着色器（Fragment Shader）：

    • 处理每个像素（片段）的颜色、透明度等。
    • 示例：实现纹理采样、光照计算、滤镜。
    // 片段着色器示例：纹理采样
varying vec2 vTexCoord;
uniform sampler2D uTexture;
void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}

  • 其他着色器（如几何着色器、计算着色器）在 OpenGL ES 中通常不支持。

(4) 内置变量和函数
  • 内置变量：
    • gl_Position（顶点着色器输出位置）。
    • gl_FragColor（片段着色器输出颜色）。
  • 内置函数：
    • 数学运算：sin(), dot(), cross(), length()。
    • 纹理采样：texture2D(), textureCube()。
    • 向量/矩阵操作：normalize(), transpose()。

3. GLSL 与通用编程语言的区别

特性 GLSL C/C++/Java
运行环境 GPU CPU
并行性 天然并行（处理顶点/像素） 通常单线程/需手动并行化
内存模型 无指针，显式访问纹理/Uniform 支持指针和动态内存
调试工具 依赖 RenderDoc、NSight 等工具 传统调试器（GDB/LLDB）

4. GLSL 在图形渲染中的典型应用

  1. 基础渲染：
    • 顶点变换（MVP 矩阵）、纹理映射。
  2. 光照模型：
    • Phong 光照、PBR（基于物理的渲染）。
  3. 特效：
    • 模糊、边缘检测、扭曲、粒子效果。
  4. 后处理：
    • 屏幕空间反射（SSR）、景深（Depth of Field）。

5. GLSL 代码示例

(1) 顶点着色器：实现波浪动画
attribute vec4 aPosition;
uniform float uTime;
void main() {
    vec4 pos = aPosition;
    pos.y += sin(pos.x * 5.0 + uTime) * 0.1; // 沿 Y 轴波动
    gl_Position = pos;
}
(2) 片段着色器：实现颜色渐变
varying vec2 vTexCoord;
void main() {
    // 水平方向从红到蓝渐变
    gl_FragColor = vec4(vTexCoord.x, 0.0, 1.0 - vTexCoord.x, 1.0);
}

7. 从画三角形到实现视频特效

从绘制一个简单的三角形到实现一个炫酷的视频特效（比如动态模糊、火焰扭曲、颜色渐变等），需要逐步掌握更多 图形渲染 和 GPU 编程 的知识。

1. 基础阶段：画一个三角形

  • 你已掌握的知识：
    • 顶点（Vertex）：三角形的三个角点坐标。
    • 顶点着色器（Vertex Shader）：告诉 GPU 如何处理顶点位置。
    • 片段着色器（Fragment Shader）：告诉 GPU 如何给每个像素上色。
    • 渲染管线（Pipeline）：GPU 处理图形的流程（顶点 → 组装 → 像素 → 屏幕）。

2. 进阶阶段：添加纹理（贴图）

(1) 什么是纹理（Texture）？
  • 通俗解释：
    就像一张“贴纸”，可以贴在 3D 模型表面。例如，给三角形贴一张猫咪图片。
(2) 如何实现？

  • 步骤：

    1. 加载一张图片到内存（比如 PNG 或 JPG）。
    2. 将图片上传到 GPU 的显存中，生成一个 纹理对象。
    3. 在片段着色器中，根据顶点坐标对应的 纹理坐标（UV 坐标），从纹理中取颜色值。

  • 代码示例（片段着色器）：

    varying vec2 vTexCoord;     // 从顶点着色器传递来的纹理坐标
uniform sampler2D uTexture; // 纹理对象
void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord); // 从纹理中取颜色
}
(3) 关键术语：

  • 纹理坐标（UV）：
    每个顶点对应纹理上的位置，范围是 (0,0)（左下角）到 (1,1)（右上角）。

  • 纹理采样（Sampling）：
    根据纹理坐标从纹理中获取颜色的过程（类似“查字典”）。

3. 特效阶段：修改像素颜色（基础滤镜）

(1) 灰度滤镜
  • 原理：将彩色像素的 RGB 值转换为亮度值（黑白）。
  • 片段着色器代码： 
    vec4 color = texture2D(uTexture, vTexCoord);
float gray = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b; // 亮度公式
gl_FragColor = vec4(gray, gray, gray, color.a);
(2) 反色滤镜（负片效果）
  • 原理：每个颜色通道取反（1.0 - color）。 
    gl_FragColor = vec4(1.0 - color.rgb, color.a);

4. 高级阶段：动态效果（随时间变化）

(1) 波纹特效
  • 原理：通过时间变量 uTime 修改纹理坐标，产生波动。
  • 代码示例： 
    uniform float uTime; // 从 CPU 传入的时间（秒）
void main() {
    vec2 coord = vTexCoord;
    coord.x += sin(coord.y * 10.0 + uTime) * 0.02; // 横向波动
    coord.y += cos(coord.x * 8.0 + uTime) * 0.01;  // 纵向波动
    gl_FragColor = texture2D(uTexture, coord);
}
(2) 关键术语：
  • Uniform 变量：
    从 CPU（你的程序）传递给 GPU 的全局变量（比如时间、强度参数）。
    （类比：导演通过对讲机告诉摄影师调整镜头参数。）

5. 复杂特效：多步骤处理（多 Pass 渲染）

(1) 模糊特效（高斯模糊）

  • 原理：

    1. 第一趟（水平模糊）：对纹理横向模糊。
    2. 第二趟（垂直模糊）：对结果纵向模糊。

  • 实现工具：

    • 帧缓冲对象（FBO, Framebuffer Object）：
      一块离屏的“画布”，用于存储中间渲染结果。
      （类比：先在草稿纸上画草稿，再誊到正式纸上。）

  • 代码逻辑：

    // 第一趟：水平模糊到 FBO
glBindFramebuffer(GL_FRAMEBUFFER, fbo1);
drawWithShader(shader_horizontal_blur);

// 第二趟：垂直模糊到屏幕
glBindFramebuffer(GL_FRAMEBUFFER, 0); // 0 表示默认帧缓冲（屏幕）
glBindTexture(GL_TEXTURE_2D, texture_blurred);
drawWithShader(shader_vertical_blur);
(2) 关键术语：
  • 离屏渲染（Off-screen Rendering）：
    不直接渲染到屏幕，而是先渲染到 FBO，用于后续处理。

6. 终极特效：混合多种效果

(1) 辉光（Bloom）特效

  • 步骤：

    1. 提取高亮区域：只保留画面中较亮的部分（如灯光、火焰）。
    2. 模糊高亮区域：生成光晕效果。
    3. 混合到原图：将光晕叠加到原始画面上。

  • 代码逻辑：

    // 步骤1：提取高亮
vec4 color = texture2D(uTexture, vTexCoord);
float brightness = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
if (brightness > 0.8) {
    gl_FragColor = color;
} else {
    gl_FragColor = vec4(0.0);
}

// 步骤3：混合辉光
vec4 base = texture2D(uOriginalTexture, vTexCoord);
vec4 bloom = texture2D(uBloomTexture, vTexCoord);
gl_FragColor = base + bloom * 0.5; // 叠加辉光
(2) 关键术语：
  • 混合模式（Blend Mode）：
    定义如何将新颜色与已有颜色混合（如叠加、正片叠底）。
    （类似 Photoshop 中的图层混合模式。）

7. 性能优化：让特效更流畅

(1) 减少纹理上传开销
  • PBO（Pixel Buffer Object）：
    一种异步传输纹理数据到 GPU 的技术，避免卡顿。
    （类比：快递员分批送货，不用等所有货物到齐再出发。）
(2) 降低分辨率渲染
  • 技巧：对模糊等特效，先用低分辨率渲染，再放大到屏幕。
    （类比：先画小图再放大，节省时间。）

8. 下一步学习建议

  1. 动手实践：从修改片段着色器的颜色开始，逐步添加效果。
  2. 使用工具：
    • ShaderToy（shadertoy.com)：在线编写 GLSL 特效。
    • GPUImage：直接调用现成的滤镜库（支持 Android/iOS）。
  3. 调试工具：RenderDoc 查看每一步的渲染结果。

8. 总结

  • OpenGL ES 是移动设备上控制 GPU 画图的“工具包”。
  • 核心流程是：定义顶点 → 顶点着色器处理 → 组装图形 → 片段着色器上色 → 输出到屏幕。
  • 着色器（Shader）是关键，用 GLSL 语言编写，运行在 GPU 上。
  • 学习路径：先画简单图形（三角形），再逐步添加纹理、光照、特效。

具体的再在实践的时候遇到什么问题再深入了解相关知识，尝试借助AI生成一些有趣的视频特效

明天开始系统了解一下 Android Framework