我在Web里玩3D-WebGL

2023-11-25 11:44:23

WebGL是一种JavaScript API，它允许您在浏览器中创建3D图形。这使得您可以在任何支持WebGL的设备上轻松地创建交互式3D体验，包括台式机、笔记本电脑、平板电脑和智能手机。WebGL是基于OpenGL ES 2.0的，这是一个为嵌入式系统设计的3D图形API。这意味着WebGL可以为您提供与台式机和控制台相同的图形质量，而无需编写复杂的代码。

要开始使用WebGL，您需要做的就是将一个

WebGL是一个功能强大的工具，它可以用来创建令人惊叹的3D图形。如果您想在Web上创建交互式3D体验，那么WebGL绝对是您的不二之选。

现在，让我们创建一个简单的WebGL场景。首先，我们将创建一个

<canvas id="myCanvas"></canvas>

接下来，我们将使用JavaScript代码来创建WebGL上下文。

var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");

现在，我们可以开始渲染3D图形了。首先，我们将创建一个简单的顶点着色器和片段着色器。顶点着色器负责将顶点位置从模型空间变换到裁剪空间。片段着色器负责将每个片段的颜色计算出来。

var vertexShaderSource = `
    attribute vec3 a_position;
    uniform mat4 u_modelViewMatrix;
    uniform mat4 u_projectionMatrix;
    void main() {
        gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(a_position, 1.0);
    }
`;

var fragmentShaderSource = `
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
`;

接下来，我们将创建一个WebGL程序，并将顶点着色器和片段着色器附着到该程序上。

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

现在，我们将创建一个缓冲区对象，并将顶点数据上传到该缓冲区对象中。

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    0.0, 1.0, 0.0
]), gl.STATIC_DRAW);

接下来，我们将创建一个顶点属性指针，并将顶点属性指针指向缓冲区对象中的顶点数据。

var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

现在，我们将创建一个Uniform变量，并将Uniform变量的值设置为模型视图矩阵和投影矩阵。

var modelViewMatrix = mat4.create();
var projectionMatrix = mat4.create();
mat4.lookAt(modelViewMatrix, [0, 0, 5], [0, 0, 0], [0, 1, 0]);
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);
gl.uniformMatrix4fv(gl.getUniformLocation(program, "u_modelViewMatrix"), false, modelViewMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(program, "u_projectionMatrix"), false, projectionMatrix);

最后，我们将使用Uniform变量来设置三角形的颜色，然后调用drawArrays()方法来渲染三角形。

var color = vec4.create();
vec4.set(color, 1.0, 0.0, 0.0, 1.0);
gl.uniform4fv(gl.getUniformLocation(program, "u_color"), color);
gl.drawArrays(gl.TRIANGLES, 0, 3);