webgl-screenspace-shader.js

// Vertex shader source code
const vertexShaderSource = `#version 300 es
  in vec4 position;
  in vec2 texCoord;
  out vec2 vTexCoord;
  void main() {
    gl_Position = position;
    vTexCoord = texCoord;
  }`;

// Fragment shader source code
const fragmentShaderSource = `#version 300 es
  precision mediump float;
  in vec2 vTexCoord;
  out vec4 fragColor;

  uniform sampler2D uTexture;

  void main() {
    // fragColor = vec4(vTexCoord, 0.0, 1.0); // Color based on texture coordinates
    fragColor = texture(uTexture, vTexCoord); // Sample texture color using texture coordinates
  }`;

// Create and compile the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error(
    "Vertex shader failed to compile:",
    gl.getShaderInfoLog(vertexShader)
  );
  return;
}

// Create and compile the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error(
    "Fragment shader failed to compile:",
    gl.getShaderInfoLog(fragmentShader)
  );
  return;
}

// Link the vertex and fragment shaders into a shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error(
    "Shader program failed to link:",
    gl.getProgramInfoLog(shaderProgram)
  );
  return;
}

// Define the vertices and texture coordinates for the fullscreen quad as two triangles
const vertices = new Float32Array([
  // Positions     // Texture Coordinates
  -1.0,
  1.0,
  0.0,
  1.0, // Top-left
  -1.0,
  -1.0,
  0.0,
  0.0, // Bottom-left
  1.0,
  1.0,
  1.0,
  1.0, // Top-right

  -1.0,
  -1.0,
  0.0,
  0.0, // Bottom-left
  1.0,
  -1.0,
  1.0,
  0.0, // Bottom-right
  1.0,
  1.0,
  1.0,
  1.0, // Top-right
]);

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

// Bind the vertex position attribute to the shader program
const position = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(
  position,
  2,
  gl.FLOAT,
  false,
  4 * Float32Array.BYTES_PER_ELEMENT,
  0
);

// Bind the texture coordinate attribute to the shader program
const texCoord = gl.getAttribLocation(shaderProgram, "texCoord");
gl.enableVertexAttribArray(texCoord);
gl.vertexAttribPointer(
  texCoord,
  2,
  gl.FLOAT,
  false,
  4 * Float32Array.BYTES_PER_ELEMENT,
  2 * Float32Array.BYTES_PER_ELEMENT
);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

const uTexture = gl.getUniformLocation(shaderProgram, "uTexture");

// Set the WebGL viewport to match the canvas size
//   gl.viewport(0, 0, canvas.width, canvas.height);

// Clear the color buffer
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Use the shader program and draw the quad with TRIANGLES
gl.useProgram(shaderProgram);
gl.uniform1i(uTexture, 0);

gl.drawArrays(gl.TRIANGLES, 0, 6);