HTML5 – WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within a web browser. WebGL is based on OpenGL ES, which is a low-level graphics API for mobile devices.

To use WebGL, you need to create a canvas element in your HTML page and get a WebGL rendering context from the canvas element:

<canvas id="canvas"></canvas>

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

In this example, the getContext method of the canvas element is used to get a WebGL rendering context, which is represented by the gl variable.

To draw a shape in WebGL, you need to create a vertex buffer, bind the vertex buffer to the context, and specify the vertices of the shape:

// Create a vertex buffer
var vertexBuffer = gl.createBuffer();

// Bind the vertex buffer to the context
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// Specify the vertices of the shape
var vertices = [
  0.0, 0.5,
  -0.5, -0.5,
  0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

In this example, the createBuffer method is used to create a vertex buffer, the bindBuffer method is used to bind the vertex buffer to the context, and the bufferData method is used to specify the vertices of the shape as an array of floats. The STATIC_DRAW parameter specifies that the vertices will not be updated frequently.

To draw the shape, you need to create a vertex shader, a fragment shader, and a program, and use the drawArrays method of the context:

// Create a vertex shader
var vertexShaderSource = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0.0, 1.0);
  }
`;

// Create a fragment shader
var fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// Compile the vertex shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Compile the fragment shader
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Create a program and attach the shaders
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Get the position attribute from the program
var positionAttribute = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);

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

In this example, the createShader method is used to create a vertex shader and a fragment shader, the shaderSource method is used to specify the source code of the shaders, the compileShader method is used to compile the shaders, the createProgram method is used to create a program and the attachShader method is used to attach the shaders to the program, the linkProgram method is used to link the program, the useProgram method is used to set the program as the current program, the getAttribLocation method is used to get the position attribute from the program, the enableVertexAttribArray method is used to enable the position attribute, and the vertexAttribPointer method is used to specify the layout of the vertex buffer. The drawArrays method is used to draw the shape, and the TRIANGLES parameter specifies that the vertices should be connected to form triangles. The 0 parameter specifies the starting index of the vertices, and the 3 parameter specifies the number of vertices to be drawn.