编辑“︁JavaScript WebGL基础”︁

= JavaScript WebGL基础 =

'''WebGL'''（Web Graphics Library）是一种基于JavaScript的API，用于在网页浏览器中渲染交互式2D和3D图形。它基于OpenGL ES 2.0标准，允许开发者直接利用GPU加速进行高性能图形计算，而无需安装插件。本章节将介绍WebGL的基础知识，包括其工作原理、核心概念和实际应用。

== 介绍 ==
WebGL通过HTML5的<code><canvas></code>元素提供了一种在网页中绘制复杂图形的方式。它使用着色器语言（GLSL）来控制渲染管线，并支持硬件加速，适用于数据可视化、游戏开发、3D建模等场景。

WebGL的核心特点包括：
* 基于OpenGL ES 2.0标准
* 使用JavaScript调用GPU进行渲染
* 支持顶点着色器和片元着色器编程
* 跨平台兼容性（现代浏览器均支持）

== 核心概念 ==

=== 渲染管线 ===
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>：存储顶点索引数据。

== 基础示例 ==
以下是一个简单的WebGL程序，绘制一个红色三角形：

<syntaxhighlight lang="javascript">
// 获取Canvas和WebGL上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 顶点数据（三角形）
const vertices = new Float32Array([
    0.0, 0.5, 0.0,   // 顶点1
    -0.5, -0.5, 0.0,  // 顶点2
    0.5, -0.5, 0.0    // 顶点3
]);

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

// 顶点着色器
const vsSource = `
    attribute vec3 aPosition;
    void main() {
        gl_Position = vec4(aPosition, 1.0);
    }
`;

// 片元着色器
const fsSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 编译着色器
function compileShader(gl, source, type) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
}

const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

// 创建程序并链接着色器
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 绑定顶点属性
const aPosition = gl.getAttribLocation(shaderProgram, 'aPosition');
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);

// 渲染
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</syntaxhighlight>

'''输出'''：Canvas中显示一个红色三角形，背景为黑色。

== 实际应用案例 ==
WebGL广泛应用于以下场景：
1. '''数据可视化'''：如D3.js、Three.js等库利用WebGL渲染复杂图表。
2. '''游戏开发'''：浏览器游戏（如《HexGL》）使用WebGL实现3D效果。
3. '''虚拟现实（VR）'''：WebVR基于WebGL提供沉浸式体验。
4. '''地图服务'''：如Google Maps使用WebGL加速3D地形渲染。

== 数学基础 ==
WebGL涉及以下数学概念：
* '''矩阵变换'''：模型视图矩阵（<math>M_{modelview}</math>）、投影矩阵（<math>M_{projection}</math>）。
* '''向量运算'''：点积、叉积。
* '''齐次坐标'''：用<math>(x, y, z, w)</math>表示3D空间中的点。

例如，透视投影矩阵公式为：
<math>
M_{perspective} = \begin{bmatrix}
\frac{2n}{r-l} & 0 & \frac{r+l}{r-l} & 0 \\
0 & \frac{2n}{t-b} & \frac{t+b}{t-b} & 0 \\
0 & 0 & -\frac{f+n}{f-n} & -\frac{2fn}{f-n} \\
0 & 0 & -1 & 0
\end{bmatrix}
</math>

== 总结 ==
WebGL为网页提供了强大的图形渲染能力，适合需要高性能可视化的场景。初学者可以从绘制简单几何体开始，逐步学习着色器编程、矩阵变换等高级主题。结合Three.js等库，能更高效地开发复杂应用。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]