bellbind/fragment.glsl

## fragment.glsl
#version 100

precision highp float;

uniform vec2 screen;

void main(void)
{
  vec2 coord = gl_FragCoord.xy / screen;
  float other = 1.0 - (coord.x + coord.y) / 2.0;
  gl_FragColor = vec4(coord, other, 1.0);
}

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="data:image/x-icon;" />
    <script src="script.js"></script>
  </head>
  <body></body>
</html>

## script.js
"use strict";

window.addEventListener("load", ev => {
    // webgl setup
    const canvas = document.createElement("canvas");
    canvas.width = 512, canvas.height = 512;
    canvas.style.border = "solid";
    document.body.appendChild(canvas);
    const gl = canvas.getContext("webgl");
    gl.enable(gl.CULL_FACE);

    // drawing data
    const vert2d = [[1, 1], [-1, 1], [1, -1], [-1, -1]];
    const vert2dArray = new Float32Array([].concat(...vert2d));
    const index = [[0, 1, 2], [3, 2, 1]];
    const indexArray = new Uint16Array([].concat(...index));

    // store buffer data
    const vertBuf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
    gl.bufferData(gl.ARRAY_BUFFER, vert2dArray, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    const indexBuf = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArray, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

    const loadShader = (src, type) => {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, src);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.log(src, gl.getShaderInfoLog(shader));
        }
        return shader;
    };

    const loadProgram = () => Promise.all([
        fetch("vertex.glsl").then(res => res.text()).then(
            src => loadShader(src, gl.VERTEX_SHADER)),
        fetch("fragment.glsl").then(res => res.text()).then(
            src => loadShader(src, gl.FRAGMENT_SHADER))
    ]).then(shaders => {
        const program = gl.createProgram();
        shaders.forEach(shader => gl.attachShader(program, shader));
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.log(gl.getProgramInfoLog(program));
        };
        return program;
    });

    const initVariables = (program) => {
        // bind program data
        gl.useProgram(program);
        // uniform data
        const screenId = gl.getUniformLocation(program, "screen");
        gl.uniform2f(screenId, canvas.width, canvas.height);

        // map shader attribute with the buffer element
        const vert2dId = gl.getAttribLocation(program, "vert2d");
        const elem = gl.FLOAT, count = vert2d[0].length, normalize = false;
        const offset = 0, stride = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
        gl.enableVertexAttribArray(vert2dId);
        gl.vertexAttribPointer(
            vert2dId, count, elem, normalize, offset, stride);
        // unbind
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
        gl.useProgram(null);
        return program;
    };

    const startRendering = (program) => {
        requestAnimationFrame(function loop() {
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            //gl.drawArrays(gl.TRIANGLE_STRIP, 0, vert2d.length);
            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
            const indexOffset = 0 * index[0].length;
            gl.drawElements(gl.TRIANGLES, indexArray.length,
                            gl.UNSIGNED_SHORT, indexOffset);
            console.log(gl.getError());
            //requestAnimationFrame(loop);
        });
    };

    loadProgram().then(initVariables).then(startRendering);
}, false);

## vertex.glsl
#version 100

invariant gl_Position;
attribute vec2 vert2d;

void main(void) {
  gl_Position = vec4(vert2d, 0, 1);
}
	#version 100

	precision highp float;

	uniform vec2 screen;

	void main(void)
	{
	vec2 coord = gl_FragCoord.xy / screen;
	float other = 1.0 - (coord.x + coord.y) / 2.0;
	gl_FragColor = vec4(coord, other, 1.0);
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<link rel="shortcut icon" href="data:image/x-icon;" />
	<script src="script.js"></script>
	</head>
	<body></body>
	</html>
	"use strict";

	window.addEventListener("load", ev => {
	// webgl setup
	const canvas = document.createElement("canvas");
	canvas.width = 512, canvas.height = 512;
	canvas.style.border = "solid";
	document.body.appendChild(canvas);
	const gl = canvas.getContext("webgl");
	gl.enable(gl.CULL_FACE);

	// drawing data
	const vert2d = [[1, 1], [-1, 1], [1, -1], [-1, -1]];
	const vert2dArray = new Float32Array([].concat(...vert2d));
	const index = [[0, 1, 2], [3, 2, 1]];
	const indexArray = new Uint16Array([].concat(...index));

	// store buffer data
	const vertBuf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
	gl.bufferData(gl.ARRAY_BUFFER, vert2dArray, gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	const indexBuf = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArray, gl.STATIC_DRAW);
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

	const loadShader = (src, type) => {
	const shader = gl.createShader(type);
	gl.shaderSource(shader, src);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	console.log(src, gl.getShaderInfoLog(shader));
	}
	return shader;
	};

	const loadProgram = () => Promise.all([
	fetch("vertex.glsl").then(res => res.text()).then(
	src => loadShader(src, gl.VERTEX_SHADER)),
	fetch("fragment.glsl").then(res => res.text()).then(
	src => loadShader(src, gl.FRAGMENT_SHADER))
	]).then(shaders => {
	const program = gl.createProgram();
	shaders.forEach(shader => gl.attachShader(program, shader));
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	console.log(gl.getProgramInfoLog(program));
	};
	return program;
	});

	const initVariables = (program) => {
	// bind program data
	gl.useProgram(program);
	// uniform data
	const screenId = gl.getUniformLocation(program, "screen");
	gl.uniform2f(screenId, canvas.width, canvas.height);

	// map shader attribute with the buffer element
	const vert2dId = gl.getAttribLocation(program, "vert2d");
	const elem = gl.FLOAT, count = vert2d[0].length, normalize = false;
	const offset = 0, stride = 0;
	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
	gl.enableVertexAttribArray(vert2dId);
	gl.vertexAttribPointer(
	vert2dId, count, elem, normalize, offset, stride);
	// unbind
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	gl.useProgram(null);
	return program;
	};

	const startRendering = (program) => {
	requestAnimationFrame(function loop() {
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	//gl.drawArrays(gl.TRIANGLE_STRIP, 0, vert2d.length);
	gl.useProgram(program);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
	const indexOffset = 0 * index[0].length;
	gl.drawElements(gl.TRIANGLES, indexArray.length,
	gl.UNSIGNED_SHORT, indexOffset);
	console.log(gl.getError());
	//requestAnimationFrame(loop);
	});
	};

	loadProgram().then(initVariables).then(startRendering);
	}, false);
	#version 100

	invariant gl_Position;
	attribute vec2 vert2d;

	void main(void) {
	gl_Position = vec4(vert2d, 0, 1);
	}