html http://gbrlgrct.com/gists/deec0c0c12e63a94515b/burn.html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html http://gbrlgrct.com/gists/deec0c0c12e63a94515b/burn.html相关的知识，希望对你有一定的参考价值。
<style>
body {
margin: 0;
}
</style>
<script>
'use strict';
function main() {
const SCRW = document.body.clientWidth;
const SCRH = document.body.clientHeight;
const canvas = document.createElement('canvas');
canvas.width = SCRW;
canvas.height = SCRH;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
function fillScreen(color) {
ctx.save();
ctx.fillStyle = color;
ctx.fillRect(0, 0, SCRW, SCRH);
ctx.restore();
}
function sleep(t) {
return new Promise(resolve => {
setInterval(resolve, t);
})
}
function frame() {
return new Promise(resolve => {
requestAnimationFrame(resolve);
});
}
const colors = ['#F00', '#0F0', '#00F'];
async(function* loop() {
for (let c of ['#F00', '#0F0', '#00F', '#0F0', '#F00']) {
fillScreen(c);
yield sleep(300);
}
for (let wp of [0.8, 0.2, 0.1, 0.2, 0.8]) {
let w = SCRW * wp;
for (let x = 0; x > -SCRW; x -= 25) {
yield frame();
for (let i = 0; i < 2 * SCRW / w; ++i) {
ctx.fillStyle = colors[i % 3];
ctx.fillRect(x + w * i, 0, w, SCRH);
}
}
}
yield* loop();
})();
}
window.addEventListener('load', main);
function runAsync(gen) {
return new Promise((resolve, reject) => {
function accept(result) {
if (result.done) {
return resolve(result.value);
}
var value = result.value;
if (isPromise(value)) {
value.then(function(result) {
accept(gen.next(result));
}, function(error) {
try {
accept(gen.throw(error));
} catch (ex) {
reject(ex);
}
});
}
}
accept(gen.next());
});
}
function isPromise(p) {
return !!p.then;
}
function async(f) {
return function() {
return runAsync(f.apply(this, arguments));
};
}
</script><!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>以上是关于html http://gbrlgrct.com/gists/deec0c0c12e63a94515b/burn.html的主要内容，如果未能解决你的问题，请参考以下文章
html http://gbrlgrct.com/gists/0ec9f597e2c9b37fc868/pi.html
html http://gbrlgrct.com/gists/08640e24c907cc627eca/webgl-mandelbrot.html
html http://gbrlgrct.com/gists/a48a2a7ddb6b38d52194/starry.html
html http://gbrlgrct.com/gists/deec0c0c12e63a94515b/burn.html
html http://gbrlgrct.com/gists/53e9405a69ad5922c3ed/mandelbrot.html
html http://gbrlgrct.com/gists/cc5ea4bf19838a41e527/cardiod.html