How to Draw many shapes in WebGL

Drawing multiple shapes in WebGL can be achieved through the following steps:

1. Initialize the WebGL Context

First, create a <canvas> element in HTML and retrieve it in JavaScript to initialize the WebGL context.

html
<canvas id="webgl-canvas"></canvas>

javascript
var canvas = document.getElementById('webgl-canvas');
var gl = canvas.getContext('webgl');
if (!gl) {
  console.error('Unable to initialize WebGL. Your browser may not support it.');
}

2. Define Vertex Data for Shapes

Define vertex data for multiple shapes. For example, to draw a triangle and a square, set up vertex arrays for each shape.

javascript
// Vertex positions for the triangle
var triangleVertices = [
  0.0,  1.0,  0.0,  // Vertex 1
 -1.0, -1.0,  0.0,  // Vertex 2
  1.0, -1.0,  0.0   // Vertex 3
];

// Vertex positions for the square
var squareVertices = [
 -1.0,  1.0,  0.0,  // Vertex 1
 -1.0, -1.0,  0.0,  // Vertex 2
  1.0,  1.0,  0.0,  // Vertex 3
  1.0, -1.0,  0.0   // Vertex 4
];

3. Create and Bind Buffers

Create a buffer for each shape and bind the vertex data to it.

javascript
// Create and bind the vertex buffer for the triangle
var triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

// Create and bind the vertex buffer for the square
var squareVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(squareVertices), gl.STATIC_DRAW);

4. Write Vertex and Fragment Shaders

For each shape, write vertex and fragment shaders. These shader codes handle vertex data and define how pixels are rendered.

glsl
// Vertex shader code
var vertexShaderCode = `\nattribute vec3 position;\nvoid main() {\n    gl_Position = vec4(position, 1.0);\n}`;\n
// Fragment shader code\nvar fragmentShaderCode = `\nprecision mediump float;\nuniform vec4 color;\nvoid main() {\n    gl_FragColor = color;\n}`;\n```

### 5. Draw Shapes

Finally, use vertex buffers and shader programs to draw each shape. Set different colors and positions as needed.

```javascript
function drawShape(buffer, color, vertexCount) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  // This section omits setting up attribute and uniform variables
  gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
}

// Draw the triangle
drawShape(triangleVertexBuffer, [1.0, 0.0, 0.0, 1.0], 3);
// Draw the square
drawShape(squareVertexBuffer, [0.0, 0.0, 1.0, 1.0], 4);

By following these steps, you can draw various shapes in WebGL by adjusting parameters for different graphics. This is a basic introductory example; for practical applications, consider advanced features such as lighting, texturing, and animation.