OpenGL ES教程：释放图形处理器的力量，揭秘基本图元的绘制

2024-02-11 13:04:54

踏上OpenGL ES之旅

OpenGL ES（Embedded System）是一种跨平台的图形应用程序编程接口（API），专为移动设备和嵌入式系统而设计。借助 OpenGL ES，你可以解锁设备图形处理单元（GPU）的潜力，为你的应用程序带来令人惊叹的视觉效果和流畅的交互体验。

基本图元：图形世界的基石

图形的世界由基本图元组成，它们是构成复杂场景的基础构建块。在 OpenGL ES 中，最基本的图元是三角形，一种由三个顶点定义的多边形。掌握三角形的绘制是开启图形编程之门的关键。

绘制三角形的魔力

绘制三角形的过程涉及三个主要步骤：定义顶点、指定着色器和执行渲染。顶点定义三角形的形状，着色器指定如何为其着色，而渲染将三角形呈现到屏幕上。

解锁细节：顶点、着色器和渲染

顶点： 顶点是三角形的基点。它们定义三角形的形状和位置。每个顶点由 X、Y 和 Z 坐标以及其他属性（如颜色和纹理坐标）组成。
着色器： 着色器是程序，用于为三角形指定颜色、纹理和其他视觉效果。OpenGL ES 中有两种着色器：顶点着色器和片元着色器。
渲染： 渲染是将三角形绘制到屏幕上的过程。它由渲染流水线执行，它将三角形转换为屏幕上的像素。

实例代码：点亮第一个三角形

// 定义顶点
const vertices = [
  -0.5, -0.5, 0.0, // 左下角
  0.5, -0.5, 0.0, // 右下角
  0.0, 0.5, 0.0,  // 顶点
];

// 定义顶点着色器
const vertexShaderSource = `
  attribute vec3 a_position;
  void main() {
    gl_Position = vec4(a_position, 1.0);
  }
`;

// 定义片元着色器
const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 编译并链接着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 创建顶点缓冲区并绑定数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 启用顶点属性
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 使用着色器程序
gl.useProgram(program);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);