aaronmaldonado-dev/gist:5f8f33a6974af7e0ce6a80fc0d11e96b

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WEBGL - 06</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <style>
      #gl {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
      }
      #gl canvas {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    </style>
</head>
<body>
    <div id="gl"></div>
    <script>
        const vertexShaderSrc = `
            void main(void) {
                gl_Position = vec4(0, 0, 0, 1);
            }
        `;
        const fragmentShaderSrc = `
            precision mediump float;

            void main(void) {
                gl_FragColor = vec4(0,0,0,1);
            }
        `;
        class Playground {
            constructor() {
                this.gl = this.createContext();

                this.vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc);
                this.fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc);
            }
            createContext() {
                const container = document.getElementById('gl');
                const canvas = document.createElement('canvas');

                let screenHeight = window.innerHeight;
                let screenWidth = window.innerWidth;

                canvas.height = screenHeight;
                canvas.width = screenWidth;

                container.appendChild(canvas);

                return canvas.getContext('webgl');
            }
            compileShader(type, src) {
                const shader = this.gl.createShader(type);
                const trimSrc = src.trim();

                this.gl.shaderSource(shader, trimSrc);
                this.gl.compileShader(shader);

                if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
                    console.log(this.gl.getShaderInfoLog(shader));
                    return null;
                }

                return shader;
            }
        }
        let playground = new Playground();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>WEBGL - 06</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
	<style>
	#gl {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	}
	#gl canvas {
	position: absolute;
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="gl"></div>
	<script>
	const vertexShaderSrc = `
	void main(void) {
	gl_Position = vec4(0, 0, 0, 1);
	}
	`;
	const fragmentShaderSrc = `
	precision mediump float;

	void main(void) {
	gl_FragColor = vec4(0,0,0,1);
	}
	`;
	class Playground {
	constructor() {
	this.gl = this.createContext();

	this.vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc);
	this.fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc);
	}
	createContext() {
	const container = document.getElementById('gl');
	const canvas = document.createElement('canvas');

	let screenHeight = window.innerHeight;
	let screenWidth = window.innerWidth;

	canvas.height = screenHeight;
	canvas.width = screenWidth;

	container.appendChild(canvas);

	return canvas.getContext('webgl');
	}
	compileShader(type, src) {
	const shader = this.gl.createShader(type);
	const trimSrc = src.trim();

	this.gl.shaderSource(shader, trimSrc);
	this.gl.compileShader(shader);

	if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
	console.log(this.gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}
	}
	let playground = new Playground();
	</script>
	</body>
	</html>