使用webgl绘制一个三角形

要使用WebGL绘制一个三角形，你需要编写HTML和JavaScript代码。以下是一个简单的例子，展示了如何实现这一目标：

HTML代码

html

JavaScript代码 (triangle.js)

javascript
// 获取canvas元素
const canvas = document.getElementById(‘glCanvas’);
const gl = canvas.getContext(‘webgl’);

// 确保WebGL可用
if (!gl) {
alert(‘WebGL不可用’);
}

// 定义顶点着色器
const vertexShaderSource = attribute vec2 aVertexPosition; void main() { gl_Position = vec4(aVertexPosition, 0.0, 1.0); };

// 定义片元着色器
const fragmentShaderSource = void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 };

// 初始化着色器
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

// 创建着色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

// 检查链接是否成功
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('无法初始化着色器程序: ' + gl.getProgramInfoLog(shaderProgram));
    return null;
}

return shaderProgram;

}

// 创建着色器
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

// 检查编译是否成功
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert('编译着色器失败: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
}

return shader;

}

// 设置顶点数据
const vertices = new Float32Array([
-0.5, -0.5, // 顶点1
0.5, -0.5, // 顶点2
0.0, 0.5 // 顶点3
]);

// 创建缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 初始化着色器程序
const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, ‘aVertexPosition’),
},
};

// 绘制三角形
function drawScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除颜色为黑色
gl.clearDepth(1.0); // 清除深度缓冲区
gl.enable(gl.DEPTH_TEST); // 启用深度测试
gl.depthFunc(gl.LEQUAL); // 近的物体覆盖远的物体

// 清除画布
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 使用着色器程序
gl.useProgram(programInfo.program);

// 绑定顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 告诉WebGL如何从缓冲区中提取顶点数据
const numComponents = 2;  // 每个顶点的组件数
const type = gl.FLOAT;    // 数据类型
const normalize = false;  // 不归一化数据
const stride = 0;         // 步长（0 = 使用类型和numComponents计算步长）
const offset = 0;         // 偏移量
gl.vertexAttribPointer(
    programInfo.attribLocations.vertexPosition,
    numComponents,
    type,
    normalize,
    stride,
    offset);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

// 绘制三角形
const primitiveType = gl.TRIANGLES;
const offset2 = 0;
const count = 3; // 顶点数量
gl.drawArrays(primitiveType, offset2, count);

}