深入解析 WebGL 入门爽系列 1：gl.drawArrays()

2023-09-27 09:32:09

WebGL 入门爽系列 1：gl.drawArrays()

简介

WebGL 是一种强大的 JavaScript API，可让您在 Web 浏览器中创建交互式 3D 图形。与传统的 2D Canvas API 相比，WebGL 具有更快的渲染速度和更丰富的图形效果，因此非常适合创建 3D 游戏、数据可视化和交互式动画等应用。

gl.drawArrays() 函数

gl.drawArrays() 函数是 WebGL 的核心渲染函数，用于将几何图形绘制到屏幕上。其语法如下：

gl.drawArrays(mode, first, count);

mode ：指定要绘制的图元类型。可以是以下值之一：
- gl.POINTS：绘制点
- gl.LINES：绘制线段
- gl.LINE_STRIP：绘制折线
- gl.LINE_LOOP：绘制闭合折线
- gl.TRIANGLES：绘制三角形
- gl.TRIANGLE_STRIP：绘制三角形带
- gl.TRIANGLE_FAN：绘制三角形扇
first ：指定要绘制的第一个顶点的索引。
count ：指定要绘制的顶点数量。

示例

以下示例演示如何使用 gl.drawArrays() 函数绘制一个简单的三角形：

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

// 创建顶点着色器
const vertexShaderSource = `
    attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1.0);
    }
`;

// 创建片元着色器
const fragmentShaderSource = `
    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);

// 创建程序对象
const program = gl.createProgram();

// 将着色器附加到程序对象
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接程序对象
gl.linkProgram(program);

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

// 创建顶点缓冲区对象
const vertexBuffer = gl.createBuffer();

// 将顶点数据绑定到缓冲区对象
const vertices = [
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0
];
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器中的位置属性
const positionAttributeLocation = gl.getAttribLocation(program, 'position');

// 将位置属性绑定到顶点缓冲区对象
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 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);