station

by phloe

HTML

<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
<canvas id="canvas"></canvas>

SCSS

html {
  min-height: 100%;
  overflow: hidden;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

JavaScript

var gl = canvas.getContext("webgl");

var aspect = 1;

function resetCanvas() {
	const { offsetWidth, offsetHeight, width, height } = canvas;
  if (width != offsetWidth) {
  	canvas.setAttribute("width", offsetWidth);
  }
  if (height != offsetHeight) {
  	canvas.setAttribute("height", offsetHeight);
  }
  aspect = offsetWidth / offsetHeight;
  
  //console.log("ratio is now", ratio);
}

function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }
 
  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

function createProgram(gl, vertexShader, fragmentShader) {
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (success) {
    return program;
  }
 
  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

const vertexShaderSource = `
 
  // an attribute will receive data from a buffer
  attribute vec4 a_position;
  uniform mat4 u_matrix;
  uniform float u_aspect;
  varying vec4 v_color;
 
  // all shaders have a main function
  void main() {
 
    // gl_Position is a special variable a vertex shader
    // is responsible for setting
    gl_Position = u_matrix * a_position;
    v_color = gl_Position * 0.001 + 0.5;
  }
  
`;

const fragmentShaderSource = `

  // fragment shaders don't have a default precision so we need
  // to pick one. mediump is a good default
  precision mediump float;
  
  varying vec4 v_color;
 
  void main() {
    // gl_FragColor is a special variable a fragment shader
    // is responsible for setting
    gl_FragColor = v_color;
  }

`;


window.addEventListener("resize", resetCanvas);

var vertexShader = createShader(gl, gl.VERTEX_SHADER,...