WebGL基础：开启Web图形编程之旅
WebGL是一种强大的Web图形技术，允许我们在浏览器中实现高性能的3D图形渲染。
什么是WebGL
WebGL是基于OpenGL ES的Web标准，允许在HTML5 Canvas上进行硬件加速的3D图形渲染。
核心概念
1. Canvas元素
HTML5 Canvas是WebGL的渲染目标。
2. WebGL上下文
通过Canvas获取WebGL渲染上下文。
3. 着色器程序
包括顶点着色器和片段着色器。
WebGL工作流程
基本步骤
代码示例
const canvas = document.getElementById('glCanvas')
const gl = canvas.getContext('webgl')
if (!gl) {
console.error('WebGL not supported')
}
const vertexShaderSource = `
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
`
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
function createShader(gl, type, source) {
const shader = gl.createShader(type)
gl.shaderSource(shader, source)
gl.compileShader(shader)
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader))
gl.deleteShader(shader)
return null
}
return shader
}
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(program))
return null
}
return program
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource)
const program = createProgram(gl, vertexShader, fragmentShader)
const vertices = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
])
const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
const positionLocation = gl.getAttribLocation(program, 'aPosition')
gl.enableVertexAttribArray(positionLocation)
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
gl.clearColor(0.0, 0.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.useProgram(program)
gl.drawArrays(gl.TRIANGLES, 0, 3)
着色器编程
顶点着色器
处理顶点位置和属性：
attribute vec3 aPosition;
attribute vec3 aColor;
varying vec3 vColor;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
vColor = aColor;
}
片段着色器
处理像素颜色：
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
3D变换
模型矩阵
function createModelMatrix(translation, rotation, scale) {
// 实现模型变换矩阵
}
视图矩阵
function createViewMatrix(cameraPosition, target, up) {
// 实现视图变换矩阵
}
投影矩阵
function createPerspectiveMatrix(fov, aspect, near, far) {
// 实现透视投影矩阵
}
纹理映射
加载纹理
function loadTexture(gl, url) {
const texture = gl.createTexture()
gl.bindTexture(gl.TEXTURE_2D, texture)
const image = new Image()
image.onload = () => {
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
gl.generateMipmap(gl.TEXTURE_2D)
}
image.src = url
return texture
}
光照效果
基本光照模型
struct Light {
vec3 position;
vec3 color;
float intensity;
};
uniform Light uLight;
uniform vec3 uCameraPosition;
void main() {
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(uLight.position – vPosition);
float diff = max(dot(normal, lightDir), 0.0);
vec3 diffuse = diff * uLight.color * uLight.intensity;
gl_FragColor = vec4(diffuse, 1.0);
}
性能优化
批处理渲染
- 合并相似的几何体
- 使用顶点数组对象
纹理压缩
- 使用压缩纹理格式
- 合理设置纹理大小
剔除和遮挡
- 启用背面剔除
- 使用遮挡查询
总结
WebGL是Web图形编程的强大工具，掌握它可以实现令人惊叹的视觉效果。
技术有温度，WebGL让Web应用更加生动有趣。
