strangerintheq · September 17, 2024 04:33 · clankill3r · Jan 24, 2022
diff --git a/README.md b/README.md
diff --git a/full-screen-triangle.js b/full-screen-triangle.js
 var canvas = document.body.appendChild(document.createElement('canvas'));
 var gl = canvas.getContext('webgl2');
 gl.viewport(0, 0, canvas.width = window.innerWidth, canvas.height = window.innerHeight);

 var program = createProgram(glsl('shader-vertex'), glsl('shader-fragment'));
 var mouse = program.createUniform('2f', 'mouse');
 gl.useProgram(program);

 render();

 listen("mousemove");

 listen("touchstart");

 function listen(eventType){
    window.addEventListener(eventType, function (e) {
        mouse(e.x, canvas.height - e.y);
        render();
    });
 }

 function render(){
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);
 }

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

 function createProgram(vertex, fragment) {
    var program = gl.createProgram();
    gl.attachShader(program, createShader(vertex, gl.VERTEX_SHADER));
    gl.attachShader(program, createShader(fragment, gl.FRAGMENT_SHADER));
    gl.linkProgram(program);
    
    program.createUniform = function (type, name) {
        var location = gl.getUniformLocation(program, name);
        return function (v1, v2, v3, v4) {
            gl['uniform' + type](location, v1, v2, v3, v4);
        }
    };
    
    return program;
 }

 function glsl(name) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', name + '.glsl', false);
    xhr.send();
    return xhr.responseText;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <body style="margin: 0; overflow: hidden;">
 <script src="full-screen-triangle.js"></script>
 </body>
 </html>
diff --git a/shader-fragment.glsl b/shader-fragment.glsl
 #version 300 es

 precision highp float;

 uniform vec2 mouse;

 in vec2 texCoord;

 out vec4 fragmentColor;

 void main(void) {
    fragmentColor = vec4(mouse.x/1000., mouse.y/1000., 0.0, 1.0);
    float x = gl_FragCoord.x - mouse.x;
    float y = gl_FragCoord.y - mouse.y;
    fragmentColor.a = (x*x + y*y)/500.;
 }
diff --git a/shader-vertex.glsl b/shader-vertex.glsl
 #version 300 es

 precision highp float;

 out vec2 texCoord;

 void main(void) {
    float x = float((gl_VertexID & 1) << 2);
    float y = float((gl_VertexID & 2) << 1);
    texCoord.x = x * 0.5;
    texCoord.y = y * 0.5;
    gl_Position = vec4(x - 1.0, y - 1.0, 0, 1);
 }
	var canvas = document.body.appendChild(document.createElement('canvas'));
	var gl = canvas.getContext('webgl2');
	gl.viewport(0, 0, canvas.width = window.innerWidth, canvas.height = window.innerHeight);

	var program = createProgram(glsl('shader-vertex'), glsl('shader-fragment'));
	var mouse = program.createUniform('2f', 'mouse');
	gl.useProgram(program);

	render();

	listen("mousemove");

	listen("touchstart");

	function listen(eventType){
	window.addEventListener(eventType, function (e) {
	mouse(e.x, canvas.height - e.y);
	render();
	});
	}

	function render(){
	gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);
	}

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

	function createProgram(vertex, fragment) {
	var program = gl.createProgram();
	gl.attachShader(program, createShader(vertex, gl.VERTEX_SHADER));
	gl.attachShader(program, createShader(fragment, gl.FRAGMENT_SHADER));
	gl.linkProgram(program);

	program.createUniform = function (type, name) {
	var location = gl.getUniformLocation(program, name);
	return function (v1, v2, v3, v4) {
	gl['uniform' + type](location, v1, v2, v3, v4);
	}
	};

	return program;
	}

	function glsl(name) {
	var xhr = new XMLHttpRequest();
	xhr.open('get', name + '.glsl', false);
	xhr.send();
	return xhr.responseText;
	}
	<!DOCTYPE html>
	<html lang="en">
	<body style="margin: 0; overflow: hidden;">
	<script src="full-screen-triangle.js"></script>
	</body>
	</html>
	#version 300 es

	precision highp float;

	uniform vec2 mouse;

	in vec2 texCoord;

	out vec4 fragmentColor;

	void main(void) {
	fragmentColor = vec4(mouse.x/1000., mouse.y/1000., 0.0, 1.0);
	float x = gl_FragCoord.x - mouse.x;
	float y = gl_FragCoord.y - mouse.y;
	fragmentColor.a = (xx + yy)/500.;
	}
	#version 300 es

	precision highp float;

	out vec2 texCoord;

	void main(void) {
	float x = float((gl_VertexID & 1) << 2);
	float y = float((gl_VertexID & 2) << 1);
	texCoord.x = x * 0.5;
	texCoord.y = y * 0.5;
	gl_Position = vec4(x - 1.0, y - 1.0, 0, 1);
	}