WebGL新手启蒙指南：从零开始创造交互式3D世界

前端

2024-01-19 03:15:00

WebGL是一项革新性的技术，它让你可以在网页浏览器中呈现3D内容。凭借其强大的功能，你可以为用户创造引人入胜的交互式3D体验。本教程旨在帮助你迈出学习WebGL的第一步，为你构建3D世界打下坚实的基础。

WebGL 概述

WebGL诞生于对互动3D内容日益增长的需求，它基于OpenGL标准，并将其功能移植到浏览器中。有了WebGL，你可以在网页上渲染3D图形，创建游戏、虚拟现实体验，甚至是对现实世界的可视化表示。

准备工作

在开始之前，你需要确保具备以下条件：

一个现代的网络浏览器，如Chrome、Firefox或Edge。
一个文本编辑器，如Visual Studio Code或Atom。
对JavaScript语言的基础知识。

你将学到什么

本教程将逐步引导你了解WebGL的基本概念和技术，包括：

创建WebGL上下文
加载并编译着色器
创建缓冲区对象和纹理
使用uniform和attribute变量
绘制图形

开始构建你的第一个WebGL应用程序

创建WebGL上下文：

// 获取canvas元素
const canvas = document.getElementById('myCanvas');

// 创建WebGL上下文
const gl = canvas.getContext('webgl');

加载并编译着色器：

// 加载顶点着色器
const vertexShaderSource = ...

// 加载片段着色器
const fragmentShaderSource = ...

// 创建顶点着色器
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, vertices, gl.STATIC_DRAW);

// 创建纹理对象
const texture = gl.createTexture();

// 将图像数据绑定到纹理对象
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, imageWidth, imageHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

使用uniform和attribute变量：

// 获取attribute变量的位置
const positionAttributeLocation = gl.getAttribLocation(program, 'position');

// 启用attribute变量
gl.enableVertexAttribArray(positionAttributeLocation);

// 将attribute变量绑定到缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 获取uniform变量的位置
const resolutionUniformLocation = gl.getUniformLocation(program, 'resolution');

// 设置uniform变量的值
gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height);

绘制图形：

// 启用程序对象
gl.useProgram(program);

// 清空缓冲区
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制图形
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);