Using GLSL (OpenGL ES Shading Language) in WebGL with JavaScript involves several steps to define, compile, and link your shaders to a WebGL program.
1. Obtain a WebGL Rendering Context:
First, you need to get a WebGL rendering context from an HTML <canvas> element.
JavaScript

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

if (!gl) {
   console.error('Unable to initialize WebGL. Your browser may not support it.');
   return;
}

2. Define GLSL Shaders:
Write your vertex and fragment shader code as strings in JavaScript.
JavaScript

const vsSource = `
   attribute vec4 aVertexPosition;
   void main() {
       gl_Position = aVertexPosition;
   }
`;

const fsSource = `
   void main() {
       gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
   }
`;

3. Compile Shaders:
Create and compile each shader using gl.createShader(), gl.shaderSource(), and gl.compileShader().
JavaScript

function compileShader(gl, source, type) {
   const shader = gl.createShader(type);
   gl.shaderSource(shader, source);
   gl.compileShader(shader);

   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
       console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
       gl.deleteShader(shader);
       return null;
   }
   return shader;
}

const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

4. Create a Shader Program and Link Shaders:
Create a WebGLProgram, attach the compiled shaders, and link the program.
JavaScript

function createProgram(gl, vs, fs) {
   const shaderProgram = gl.createProgram();
   gl.attachShader(shaderProgram, vs);
   gl.attachShader(shaderProgram, fs);
   gl.linkProgram(shaderProgram);

   if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
       console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
       return null;
   }
   return shaderProgram;
}

const shaderProgram = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(shaderProgram);

5. Provide Data to Shaders (Attributes and Uniforms):

   Attributes: Used for per-vertex data (e.g., position, color).
   Uniforms: Used for data that is constant across all vertices in a draw call (e.g., transformation matrices, colors).

JavaScript

// Example for an attribute (positions)
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
   -0.5, -0.5,
    0.5, -0.5,
    0.0,  0.5,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

// Example for a uniform (if you had one)
// const uColorLocation = gl.getUniformLocation(shaderProgram, 'uColor');
// gl.uniform4f(uColorLocation, 0.0, 1.0, 0.0, 1.0); // Green color

6. Draw:
Clear the canvas and draw your geometry using gl.drawArrays() or gl.drawElements().
JavaScript

gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clear(gl.COLOR_BUFFER_BIT);

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