编辑“︁JavaScript WebGL基础”︁（章节）

== 核心概念 ==

=== 渲染管线 ===
WebGL的渲染管线是一系列步骤，将3D数据转换为2D屏幕上的像素。主要步骤包括：
1. '''顶点处理'''：顶点着色器处理顶点数据（位置、颜色等）。
2. '''图元装配'''：将顶点组合成点、线或三角形。
3. '''光栅化'''：将图元转换为像素。
4. '''片元处理'''：片元着色器计算每个像素的最终颜色。

<mermaid>
graph LR
    A[顶点数据] --> B[顶点着色器]
    B --> C[图元装配]
    C --> D[光栅化]
    D --> E[片元着色器]
    E --> F[帧缓冲区]
</mermaid>

=== 着色器 ===
WebGL使用两种着色器：
* '''顶点着色器'''：处理每个顶点的位置和属性。
* '''片元着色器'''（或像素着色器）：计算每个像素的颜色。

以下是一个简单的着色器示例：

<syntaxhighlight lang="glsl">
// 顶点着色器
attribute vec3 aPosition;
void main() {
    gl_Position = vec4(aPosition, 1.0);
}

// 片元着色器
precision mediump float;
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 输出红色
}
</syntaxhighlight>

=== 缓冲区对象 ===
WebGL使用缓冲区（Buffer）存储顶点数据、颜色等。常见的缓冲区类型包括：
* <code>ARRAY_BUFFER</code>：存储顶点属性数据。
* <code>ELEMENT_ARRAY_BUFFER</code>：存储顶点索引数据。