<!DOCTYPE html>
<html>
<head>
<title>WebGL LCD Burn Fixer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
html, body {
height: 100%;
margin: 0;
}
</style>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
uniform float u_time;
uniform vec2 u_resolution;
void main(void)
{
float scene = mod(u_time, 8.0);
if (scene < 3.0) {
float z = mod(scene * 2.0, 3.0);
if (z < 1.0) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else if (z < 2.0) {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
} else if (z < 3.0) {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
} else {
float w = float(int(scene - 3.0));
float r = 1.50 / (1.0 + exp(-1.0 * (w - 2.0))) - 0.7;
float stripe = u_resolution.x * abs(r);
float px = gl_FragCoord.x + u_time * max(stripe * 3.0, u_resolution.x);
float z = mod(px / stripe, 3.0);
if (z < 1.0) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else if (z < 2.0) {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
} else if (z < 3.0) {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
}
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 a_position;
void main(void)
{
gl_Position = vec4(a_position, 1.0, 1.0);
}
</script>
<script>
'use strict';
let gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
} catch(e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var shader;
if (shaderScript.type === "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, shaderScript.textContent);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
let shaderProgram;
let u_time, u_resolution;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
u_time = gl.getUniformLocation(shaderProgram, 'u_time');
u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution');
gl.uniform2f(u_resolution, gl.canvas.clientWidth, gl.canvas.clientHeight);
}
function initBuffers() {
let buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var vertices = [
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
let a_position = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(a_position);
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
}
let dx = 0.0;
function drawScene(time) {
gl.uniform1f(u_time, time / 1000);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
function webGLStart(canvas) {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
initGL(canvas);
initShaders();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
initBuffers();
}
function canvasClicked() {
toggleFullScreen();
}
function windowResized() {
let canvas = document.getElementById('canvas');
webGLStart(canvas);
}
function loop(time) {
drawScene(time);
requestAnimationFrame(loop);
}
function main() {
let canvas = document.getElementById('canvas');
canvas.addEventListener('click', canvasClicked);
webGLStart(canvas);
loop();
}
window.addEventListener('load', main);
window.addEventListener('resize', windowResized);
</script>
<script>
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
</head>
<body>
<canvas id="canvas" style="position:absolute;top:0;left:0"></canvas>
</body>
</html>