mirror of
https://github.com/gpujs/gpu.js.git
synced 2026-01-18 16:04:10 +00:00
46 lines
910 B
HTML
46 lines
910 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Slow Fade</title>
|
|
</head>
|
|
<body>
|
|
<h1>Slow Fade</h1>
|
|
<div>
|
|
<canvas id="c"></canvas>
|
|
</div>
|
|
</body>
|
|
<script src="../bin/gpu-browser.js"></script>
|
|
<script>
|
|
const canvas = document.getElementById("c");
|
|
const gpu = new GPU({
|
|
canvas: canvas,
|
|
mode: "gpu"
|
|
});
|
|
const dim = 512;
|
|
const kernel = gpu.createKernel(
|
|
function(x) {
|
|
this.color(
|
|
(x * (this.thread.y + this.thread.x)) / 1024.0,
|
|
(x * (this.thread.y * this.thread.x)) / (1024.0 * 1024.0),
|
|
(x * (this.thread.y * 2 * this.thread.x)) / (1024.0 * 2),
|
|
1
|
|
);
|
|
},
|
|
{
|
|
output: [dim, dim],
|
|
graphical: true
|
|
}
|
|
);
|
|
|
|
let param = 0.0;
|
|
const doDraw = () => {
|
|
kernel(param);
|
|
param += 0.001;
|
|
window.requestAnimationFrame(doDraw);
|
|
};
|
|
|
|
window.requestAnimationFrame(doDraw);
|
|
</script>
|
|
</html>
|