目录
0 结果预览
1 代码例子
2 Trae讲解
0 结果预览
1 代码例子
//main.js// 顶点着色器代码
const vertexShaderSource = `attribute vec3 aPosition;attribute vec4 aColor;varying vec4 color;void main() {gl_Position = vec4(aPosition, 1.0);color = aColor;}
`;// 片段着色器代码
const fragmentShaderSource = `precision mediump float;varying vec4 color;void main() {gl_FragColor = color;}
`;// 创建着色器程序
function createShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('着色器编译错误:', gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;
}// 创建着色器程序
function createProgram(gl, vertexShader, fragmentShader) {const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {console.error('程序链接错误:', gl.getProgramInfoLog(program));return null;}return program;
}// 主函数
function main() {const canvas = document.querySelector('#glCanvas');// 设置canvas的实际分辨率canvas.width = 800;canvas.height = 600;// 尝试获取WebGL 2.0上下文let gl = canvas.getContext('webgl2');// 如果WebGL 2.0不可用，尝试使用WebGL 1.0if (!gl) {gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');if (!gl) {console.error('无法初始化WebGL，您的浏览器可能不支持WebGL');alert('无法初始化WebGL，您的浏览器可能不支持WebGL或需要启用硬件加速');return;}console.log('使用WebGL 1.0作为备用方案');}// 启用错误检查gl.getExtension('WEBGL_lose_context');const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');if (debugInfo) {console.log('WebGL供应商:', gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL));console.log('WebGL渲染器:', gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));}// 编译着色器const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);// 创建着色器程序const program = createProgram(gl, vertexShader, fragmentShader);if (!program) return;// 设置顶点数据const positions = new Float32Array([0.0, 0.5, 0.0, // 顶部顶点-0.5, -0.5, 0.0, // 左下顶点0.5, -0.5, 0.0 // 右下顶点]);const colors = new Float32Array([1.0, 0.0, 0.0, 1.0, // 红色0.0, 1.0, 0.0, 1.0, // 绿色0.0, 0.0, 1.0, 1.0 // 蓝色]);// 创建并绑定顶点数据const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);const colorBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);// 设置顶点属性gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);const positionLoc = gl.getAttribLocation(program, 'aPosition');gl.enableVertexAttribArray(positionLoc);gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);const colorLoc = gl.getAttribLocation(program, 'aColor');gl.enableVertexAttribArray(colorLoc);gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);// 设置视口和清除颜色gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);// 使用着色器程序并绘制gl.useProgram(program);gl.drawArrays(gl.TRIANGLES, 0, 3);
}// 页面加载完成后执行
window.onload = main;//index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGL应用</title><style>canvas {display: block;width: 800px;height: 600px;margin: 0 auto;border: 1px solid #ccc;}</style>
</head>
<body><canvas id="glCanvas"></canvas><script type="module" src="main.js"></script>
</body>
</html>2 Trae讲解
Python的HTTP服务器来运行这个WebGL应用。
opengl 终端
python -m http.server 8080
现在Python HTTP服务器已经成功启动，让我们在浏览器中打开WebGL应用进行预览。
预览
我们已经成功创建了一个基于WebGL的Web应用程序。具体完成了以下工作：
1. 创建了基本的HTML结构，设置了WebGL画布并添加了必要的样式。
2. 实现了main.js，包含了完整的WebGL初始化和渲染逻辑：
- 创建了顶点着色器和片段着色器
- 实现了着色器程序的创建和编译
- 设置了顶点数据和颜色数据
- 完成了WebGL渲染管线的配置
3. 使用Python的HTTP服务器成功启动了应用，可以在浏览器中查看一个彩色三角形的渲染结果。
应用现在可以通过 http://localhost:8080 访问，展示了一个使用WebGL渲染的三角形，每个顶点都有不同的颜色（红、绿、蓝），通过颜色插值形成渐变效果。