WebGL

by evgkch

HTML

<input type="range" min="0" max="100" step="1" value="0"> 
<canvas id="app"></canvas>

CSS

body {
  text-align : center;
}
canvas {
  display : block;
  width : 400px;
  height : 300px;
  margin : auto;
  padding : 0;
  border : none;
  background-color : black;
}

JavaScript

function checkWebGLSupporting(gl){
  return gl && gl instanceof WebGLRenderingContext;		  
}

function getWebGLContext(source){
	return source.getContext('webgl') ||
    source.getContext('experimental-webgl');
}

function createVertexShaderSource(){
	return `attribute vec2 a_position;
  uniform vec2 u_resolution;
  uniform vec2 u_translation;
  
  void main(){
  	vec2 position = a_position + u_translation;
  	vec2 zeroToOne = position / u_resolution;
    vec2 zeroToTwo = zeroToOne * 2.0;
    vec2 clipSpace = zeroToTwo - 1.0;
  	gl_Position = vec4(clipSpace * vec2(1, -1), 0 ,1);
  }`;
}

function createFragmentShaderSource(){
	return `precision mediump float;
  
  uniform vec4 u_color;
  void main(){
  	gl_FragColor = u_color;
  }`
}

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);
}

function randomInt(range) {
  return Math.floor(Math.random() * range);
}

function setRectangle(gl, x, y, width, height) {
  var x1 = x;
  var x2 = x + width;
  var y1 = y;
  var y2 = y + height;
 
  // ПРИМ.: gl.bufferData(gl.ARRAY_BUFFER, ...) воздействует
  // на буфер, который привязан к точке привязке `ARRAY_BUFFER`,
  // но таким образом у нас будет один буфер. Если бы нам понадобилось
  // несколько буферов, нам бы потребовалось привязать их сначала к `ARRAY_BUFFER`.
 
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 ...