Introduction to WebGL

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance, also known as interactive 3D/2D graphics within any compatible web browser.

Basic WebGL Concepts

To start with WebGL, you need to understand the basics of graphics rendering, including vertices, indices, and shaders.

• Vertices: Define the points of your 3D object.
• Indices: Specify how the vertices are connected to form triangles.
• Shaders: Small programs that run on the GPU to perform tasks like transforming vertices and coloring pixels.

Creating a Simple WebGL Scene

Let's create a simple WebGL scene by rendering a triangle.

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

// Define vertices for a triangle
const vertices = new Float32Array([
 -0.5, -0.5,0.0,
0.5, -0.5,0.0,
0.0,0.5,0.0
]);

// Create a WebGL buffer for the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// Define a simple vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
 attribute vec3 position;
 void main() {
 gl_Position = vec4(position,1.0);
 }
`);
gl.compileShader(vertexShader);

// Define a simple fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
 void main() {
 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
 }
`);
gl.compileShader(fragmentShader);

// Create a WebGL program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Draw the triangle
gl.drawArrays(gl.TRIANGLES,0,3);