WebGL: Simplest Hello Triangle

README.md

WebGL: Simplest Hello Triangle

view on jsgist

index.css

:root {
  color-scheme: light dark;
}

index.html

<canvas></canvas> 

index.js

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');

function createShader(gl, type, src) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, src);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(shader));
  }
  return shader;
}

const program = gl.createProgram();;
gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, `#version 300 es
void main() {
  vec2 pos[3];
  pos[0] = vec2( 0, 1);
  pos[1] = vec2(-1,-1);
  pos[2] = vec2( 1,-1);
  gl_Position = vec4(pos[gl_VertexID], 0, 1);
}
`));
gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, `#version 300 es
precision highp float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1, 0, 0, 1);
}
`));
gl.linkProgram(program);

gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

jsGist.json

{"name":"WebGL: Simplest Hello Triangle","settings":{},"filenames":["index.html","index.css","index.js"]}