WebGL基础知识快速入门

WebGL概述

核心概念：WebGL利用GPU（图形处理器）来渲染图形，这使得它能处理复杂的图形计算，如光照、阴影、纹理贴图等。
着色语言：WebGL使用GLSL（OpenGL Shading Language）编写顶点着色器和片段着色器，用于计算顶点位置和像素颜色。
图形管线：WebGL遵循传统的图形渲染管线，包括顶点处理、图元装配、光栅化等阶段。
上下文获取：通过canvas.getContext('webgl')或canvas.getContext('experimental-webgl')获取WebGL渲染上下文。

WebGL环境搭建

1. HTML准备：

创建一个<canvas>元素，这是WebGL绘制图形的画布。

   <canvas id="webgl-canvas"></canvas>

2. 获取WebGL上下文：

在JavaScript中获取canvas元素并初始化WebGL上下文。

   const canvas = document.getElementById('webgl-canvas');const gl = canvas.getContext('webgl');if (!gl) {alert('WebGL not supported');}

3. 设置视口和清除颜色：

配置WebGL的视口大小，并清除颜色缓冲区。

   gl.viewport(0, 0, canvas.width, canvas.height);gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置背景色为黑色gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区

WebGL代码示例

// 获取WebGL上下文
const canvas = document.getElementById('webgl');
const gl = canvas.getContext('webgl');// 设置清空颜色为黑色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);// 创建顶点着色器和片段着色器
const vertexShaderSource = `
attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}
`;const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {gl_FragColor = u_FragColor;
}
`;// 编译着色器
function compileShader(type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('Shader compile error:', gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;
}const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);// 创建程序对象并连接着色器
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {console.error('Program link error:', gl.getProgramInfoLog(program));return;
}
gl.useProgram(program);// 设置顶点位置
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [0, 0];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 设置颜色并绘制
const colorLocation = gl.getUniformLocation(program, 'u_FragColor');
gl.uniform4f(colorLocation, 1.0, 0.0, 0.0, 1.0); // 红色
gl.drawArrays(gl.POINTS, 0, 1); // 绘制一个点