WebGL 是一种基于 OpenGL 的图形接口标准，它能够在浏览器中使用 GPU 加速渲染 3D 图形，为前端开发提供了全新的可能性。为了更好地管理和开发 WebGL 应用，我们可以使用 TypeScript 进行开发。
本指南将带您深入了解使用 TypeScript 进行 WebGL 开发的全部内容，包括环境配置、基础知识、高级技巧和最佳实践。
环境配置
首先，您需要将 TypeScript 和 WebGL 的开发环境进行配置。
- 安装 Node.js
Node.js 是运行于本地计算机的 JavaScript 运行时环境。您可以在 Node.js 官网 下载适合您系统的版本。
- 安装 TypeScript
TypeScript 是 JavaScript 的超集，它提供了更严格的语法规则和类型检查。您可以使用 npm 安装 TypeScript：
npm install -g typescript
- 安装 WebGL
WebGL 是基于浏览器的图形接口标准，您可以通过使用 WebGL 库来开发 WebGL 应用程序。常用的 WebGL 库有 Three.js、Babylon.js、Pixi.js 等。您可以根据需求选择一个或多个库进行使用。
基础知识
在开始开发 WebGL 应用之前，您需要了解一些基础知识。
- WebGL 上下文
WebGL 上下文是开发 WebGL 应用的核心对象，它可以用来控制 WebGL 的行为，包括设置背景颜色、创建和配置缓冲器、绘制图形等。在 TypeScript 中，我们可以使用 WebGLRenderingContext 类型来表示 WebGL 上下文。
const canvas = document.querySelector("canvas")!
const gl = canvas.getContext("webgl") as WebGLRenderingContext;在上面的代码中，我们通过 canvas.getContext 函数来获取 WebGL 上下文，然后将其类型断言为 WebGLRenderingContext。
- 顶点缓冲器
顶点缓冲器是用于存储和传输顶点数据的缓冲器对象，在绘制图形时，需要从顶点缓冲器中读取顶点数据，并将其传递给着色器进行处理。在 TypeScript 中，我们可以使用 WebGLBuffer 类型来表示顶点缓冲器。
// www.javascriptcn.com code example const vertices = [ -1, -1, 1, -1, 1, 1, -1, 1, ]; const vertexBuffer = gl.createBuffer()!; gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
在上面的代码中，我们先定义了一个包含四个顶点坐标的数组 vertices，然后使用 gl.createBuffer 函数创建一个顶点缓冲器对象，并将其绑定到 gl.ARRAY_BUFFER 上下文绑定点。接着，我们使用 gl.bufferData 函数将顶点数据存储到缓冲器对象中，并指定缓冲器的使用方式为 gl.STATIC_DRAW。
- 着色器
着色器是负责计算 WebGL 渲染结果的程序，它通常由两个部分组成：顶点着色器和片段着色器。在 TypeScript 中，我们可以使用 WebGLShader 类型来表示着色器。
// www.javascriptcn.com code example
const vertexShaderSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
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);在上面的代码中，我们首先定义了一个包含顶点着色器代码的字符串 vertexShaderSource，和一个包含片段着色器代码的字符串 fragmentShaderSource。然后，我们使用 gl.createShader 函数创建一个顶点着色器对象，并使用 gl.shaderSource 函数为着色器对象指定着色器代码。接着，我们使用 gl.compileShader 函数来编译顶点着色器。最后，我们重复这个过程，创建片段着色器对象，并编译它。
- 着色器程序
着色器程序由顶点着色器和片段着色器组成，它们一起工作以创建最终的 WebGL 渲染结果。在 TypeScript 中，我们可以使用 WebGLProgram 类型来表示着色器程序。
const shaderProgram = gl.createProgram()!; gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram);
在上面的代码中，我们使用 gl.createProgram 函数创建一个着色器程序对象，并使用 gl.attachShader 函数将顶点着色器和片段着色器对象指定为着色器程序的一部分。然后，我们使用 gl.linkProgram 函数来链接着色器程序。
高级技巧
- 透视投影
透视投影是一种常用的 3D 渲染技术，它可以将 3D 对象投影到 2D 平面上，以创建逼真的 3D 效果。在 TypeScript 中，我们可以使用 glMatrix 库来进行透视投影计算。
// www.javascriptcn.com code example
import { mat4 } from "gl-matrix";
const fov = Math.PI / 3
const aspect = canvas.width / canvas.height;
const near = 0.1;
const far = 100.0;
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, fov, aspect, near, far);在上面的代码中，我们首先通过 Math.PI / 3 设置透视投影的视角。然后，我们根据画布的宽高比计算投影矩阵的纵横比 aspect，以及近、远平面的距离 near 和 far。接着，我们使用 mat4.create() 函数创建一个 4x4 的矩阵，然后使用 mat4.perspective() 函数为矩阵设置透视投影信息。
- 纹理贴图
纹理贴图是一种常用的 3D 渲染技术，它可以将 2D 图片映射到 3D 物体上，以创建逼真的纹理效果。在 TypeScript 中，我们可以使用 WebGLTexture 类型来表示纹理贴图。
const texture = gl.createTexture()!;
const image = new Image();
image.src = "texture.jpg";
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);
};在上面的代码中，我们首先使用 gl.createTexture 函数创建一个纹理对象，并使用 new Image() 创建一个图片对象。然后，我们指定图片加载成功后的回调函数，并在回调函数中使用 gl.bindTexture 函数将纹理对象绑定到 gl.TEXTURE_2D 上下文绑定点。接着，我们使用 gl.texImage2D 函数将图片数据存储到纹理对象中，并指定存储方式为 gl.RGBA。最后，我们使用 gl.generateMipmap 函数生成纹理对象的多级细化层次。
最佳实践
- 封装 WebGL 应用程序
为了更好地重用 WebGL 应用程序的代码，我们应该封装 WebGL 应用程序为一个独立的类，这样可以更好地组织和管理 WebGL 应用程序的状态和行为。
// www.javascriptcn.com code example
class WebGLApp {
private readonly canvas: HTMLCanvasElement;
private readonly gl: WebGLRenderingContext;
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
this.gl = canvas.getContext("webgl") as WebGLRenderingContext;
}
public start() {
// 初始化 WebGL 应用程序
}
public draw() {
// 绘制 WebGL 画面
}
}
const canvas = document.querySelector("canvas")!;
const app = new WebGLApp(canvas);
app.start();在上面的代码中，我们首先定义了一个名为 WebGLApp 的类，它封装了 WebGL 应用程序的状态和行为。然后，我们通过 new WebGLApp(canvas) 创建一个 WebGL 应用程序对象，并在之后使用 app.start() 方法开始应用程序的运行。
- 使用 WebGL 组件库（WebGL framework）
WebGL 组件库是一组预先编写好的库和组件，它们可以大大简化 WebGL 应用程序的开发，减少代码量，加快开发效率。常用的 WebGL 组件库有 Three.js、Babylon.js、Pixi.js 等。
// www.javascriptcn.com code example
import * as THREE from "three";
class WebGLApp {
private readonly canvas: HTMLCanvasElement;
private readonly renderer: THREE.Renderer;
private readonly camera: THREE.Camera;
private readonly scene: THREE.Scene;
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
this.renderer = new THREE.WebGLRenderer({ canvas });
this.camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
this.scene = new THREE.Scene();
}
public start() {
// 初始化 WebGL 应用程序
}
public draw() {
// 绘制 WebGL 画面
}
}
const canvas = document.querySelector("canvas")!;
const app = new WebGLApp(canvas);
app.start();在上面的代码中，我们引入了 Three.js 库，并使用 THREE.WebGLRenderer、THREE.PerspectiveCamera 和 THREE.Scene 来代替原生 WebGL 对象。这样我们就能够使用 Three.js 提供的组件和功能来简化 WebGL 应用程序的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8048da941bf7134e4d0d4