如何在 HTML 中使用 WebGL 技术渲染 3D 图形？

要在 HTML 中使用 WebGL 技术渲染 3D 图形，需要按照以下步骤操作：

1. 在 HTML 文件中引入 WebGL 的上下文对象，即 Canvas 元素，例如：

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

2. 在 JavaScript 文件中获取 Canvas 元素，并获取 WebGL 上下文对象，例如：

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

3. 在 JavaScript 文件中编写着色器程序，包括顶点着色器和片元着色器。顶点着色器用于处理顶点的位置和颜色等信息，片元着色器用于处理每个像素的颜色和透明度等信息，例如：

const vertexShaderSource = `
    attribute vec4 a_position;
    attribute vec4 a_color;
    varying vec4 v_color;
    void main() {
        gl_Position = a_position;
        v_color = a_color;
    }
`;

const fragmentShaderSource = `
    precision mediump float;
    varying vec4 v_color;
    void main() {
        gl_FragColor = v_color;
    }
`;

4. 在 JavaScript 文件中创建着色器程序，并将着色器程序链接到 WebGL 上下文对象中，例如：

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);

5. 在 JavaScript 文件中创建缓冲区，并将数据传入缓冲区中，例如：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
    -1, 1,
    1, 1,
    -1, -1,
    1, -1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const colors = [
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
    1, 0, 1, 1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

6. 在 JavaScript 文件中将缓冲区中的数据链接到着色器程序中的变量中，例如：

const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

const colorLocation = gl.getAttribLocation(program, 'a_color');
gl.enableVertexAttribArray(colorLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);

7. 在 JavaScript 文件中使用 WebGL 上下文对象绘制图形，例如：

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

以上就是在 HTML 中使用 WebGL 技术渲染 3D 图形的基本步骤，其中关键词包括 WebGL、Canvas 元素、顶点着色器、片元着色器、着色器程序、缓冲区、变量、绘制图形等。