mirror of
https://github.com/gpujs/gpu.js.git
synced 2025-12-08 20:35:56 +00:00
ed1cd94448
...it kind of snowballed from some needs Fixes #521 - If `tactic` is not set, check precision allowed from WebGL, and automatically change based off needs, otherwise use value from `tactic`. Fixes #535 - Internally check if texture from argument is the same as output, if so, clone this texture, and then clean it up after the kernel runs. Fixes #536 - Normalize all declarations to non-destructured, and then parse Fixes #537 - Change logic Fixes #538 - Found the GL script that would work, and reduced the methods to use it Fixes #539 - Found a better way of testing random, and this gives me an error for 1 in 10 runs, acceptable Some refactoring for less duplicate code and documentation
70 lines
2.0 KiB
HTML
70 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Cat image with GPU.js</title>
|
|
<script src="../../dist/gpu-browser.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Image to GPU.js from <a href="https://observablehq.com/@fil/image-to-gpu">https://observablehq.com/@fil/image-to-gpu</a></h1>
|
|
<div id="log-fps"></div>
|
|
</body>
|
|
<script>
|
|
const gpu = new GPU();
|
|
function imageToArray(image) {
|
|
const kernel = gpu.createKernel(function(image) {
|
|
const pixel = image[this.thread.y][this.thread.x];
|
|
this.color(pixel.r, pixel.g, pixel.b, pixel.a);
|
|
}, {
|
|
output: [image.width, image.height],
|
|
graphical: true,
|
|
pipeline: true,
|
|
});
|
|
kernel(image);
|
|
const result = kernel.getPixels(true);
|
|
kernel.destroy();
|
|
return result;
|
|
}
|
|
const kernel = function(data, wobble) {
|
|
let x = this.thread.x,
|
|
y = this.thread.y;
|
|
|
|
//var data = this.constants.data;
|
|
// wouldn't be fun if the kernel did _nothing_
|
|
x = Math.floor(x + wobble * Math.sin(y / 10));
|
|
y = Math.floor(y + wobble * Math.cos(x / 10));
|
|
|
|
const n = 4 * (x + (this.constants.w * y));
|
|
this.color(data[n]/256, data[n+1]/256,data[n+2]/256,1);
|
|
};
|
|
|
|
const logFps = document.querySelector('#log-fps');
|
|
const image = new Image();
|
|
image.src = './cat.jpg';
|
|
image.onload = () => {
|
|
const array = imageToArray(image);
|
|
const render = (new GPU({mode: "gpu"}))
|
|
.createKernel(kernel)
|
|
.setConstants({ w: image.width, h: image.height })
|
|
.setOutput([image.width, image.height])
|
|
.setGraphical(true);
|
|
const canvas = render.canvas;
|
|
document.body.appendChild(canvas);
|
|
let lastCalledTime;
|
|
let fps;
|
|
function callRender() {
|
|
const wobble = 14 * Math.sin(Date.now() / 400);
|
|
render(array, wobble);
|
|
const delta = (Date.now() - lastCalledTime)/1000;
|
|
lastCalledTime = Date.now();
|
|
fps = 1 / delta;
|
|
logFps.innerHTML = fps.toFixed(0) + ' FPS';
|
|
window.requestAnimationFrame(() => {
|
|
callRender();
|
|
});
|
|
}
|
|
callRender();
|
|
};
|
|
</script>
|
|
</html>
|