<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Triangle Example</title>
<style>
canvas {
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="webglCanvas"></canvas>
<script>
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main(void) {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
const fsSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Orange color
}
`;
// Function to create a shader, upload GLSL source code, and compile the shader
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);