mirror of
https://github.com/gpujs/gpu.js.git
synced 2026-01-18 16:04:10 +00:00
21b9e3b759
fix: Update typescript definitions fix: `GPU.createKernel`'s `onRequestFallback` to switch kernels entirely so the fallback doesn't continue to happen over and over fix: `GPU.createKernel`'s `onRequestFallback` to use `argumentTypes` fix: Minification fix: examples to use minification fix: Fix kernel string to support `Array1D(2|3|4)` and `Array3D(2|3|4)` fix: `lookupKernelValueType` to as well get type, to make lookup easier for `Texture`s fix: `Kernel` to properly build `this.kernelArguments` and `this.kernelConstants` fix: `KernelValue` to get its type from `value.type` if it exists fix: `@returns` keyword in favor of `@return` in some places fix: DoxDox documentation issue fix: Remove old reference to "Automatically-built Documentation", no longer applicable fix: Bump and build
125 lines
3.1 KiB
HTML
125 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<script src="../dist/gpu-browser.min.js"></script>
|
|
<style>
|
|
body {
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
canvas {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
div {
|
|
position: absolute;
|
|
color: white;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div>Left click to zoom in, right click to zoom out.</div>
|
|
</body>
|
|
<script>
|
|
function f(x, c) {
|
|
return [
|
|
(x[0] * x[0]) - (x[1] * x[1]) + c[0],
|
|
(x[0] * x[1]) + (x[0] * x[1]) + c[1],
|
|
];
|
|
}
|
|
|
|
function palette(t, a, b, c, d) {
|
|
return [
|
|
a[0] + b[0] * Math.cos(6.28318 * (c[0] * t + d[0])),
|
|
a[1] + b[1] * Math.cos(6.28318 * (c[1] * t + d[1])),
|
|
a[2] + b[2] * Math.cos(6.28318 * (c[2] * t + d[2]))
|
|
];
|
|
}
|
|
|
|
function vectorLength(vector) {
|
|
return Math.sqrt(vector[0]*vector[0]+vector[1]*vector[1]);
|
|
}
|
|
|
|
const gpu = new GPU();
|
|
|
|
gpu
|
|
.addFunction(f)
|
|
.addFunction(palette)
|
|
.addFunction(vectorLength);
|
|
|
|
const calculateMandelbrotSet = gpu.createKernel(function(zoomCenter, zoomSize, maxIterations) {
|
|
let x = [0, 0];
|
|
let c = [
|
|
zoomCenter[0] + ((this.thread.x / this.output.x) * 4 - 2) * (zoomSize / 4),
|
|
zoomCenter[1] + ((this.thread.y / this.output.y) * 4 - 2) * (zoomSize / 4)
|
|
];
|
|
let escaped = false;
|
|
let iterations = 0;
|
|
for (let i = 0; i < maxIterations; i++) {
|
|
iterations = i;
|
|
x = f(x, c);
|
|
if (vectorLength(x) > 2) {
|
|
escaped = true;
|
|
break;
|
|
}
|
|
}
|
|
if (escaped) {
|
|
const pixel = palette(iterations / maxIterations, [0, 0, 0], [.59, .55, .75], [.1, .2, .3], [.75, .75, .75]);
|
|
this.color(pixel[0], pixel[1], pixel[2], 1);
|
|
} else {
|
|
this.color(.85, .99, 1, 1);
|
|
}
|
|
})
|
|
.setGraphical(true)
|
|
.setDebug(true)
|
|
.setOutput([800, 800]);
|
|
|
|
let targetZoomCenter = [0, 0],
|
|
zoomFactor = 1,
|
|
zoomCenter = [0, 0],
|
|
zoomSize = 4,
|
|
maxIterations = 500,
|
|
stopZooming = true;
|
|
|
|
calculateMandelbrotSet(zoomCenter, zoomSize, maxIterations);
|
|
const canvas = calculateMandelbrotSet.canvas;
|
|
document.body.appendChild(canvas);
|
|
|
|
canvas.onmousedown = (e) => {
|
|
let x = e.offsetX / canvas.width,
|
|
y = e.offsetY / canvas.height;
|
|
targetZoomCenter[0] = zoomCenter[0] - zoomSize / 2.0 + x * zoomSize;
|
|
targetZoomCenter[1] = zoomCenter[1] + zoomSize / 2.0 - y * zoomSize;
|
|
stopZooming = false;
|
|
zoomFactor = e.buttons & 1 ? 0.99 : 1.01;
|
|
render();
|
|
return true;
|
|
};
|
|
canvas.oncontextmenu = () => { return false; };
|
|
canvas.onmouseup = () => { stopZooming = true; };
|
|
|
|
function render() {
|
|
calculateMandelbrotSet(zoomCenter, zoomSize, maxIterations);
|
|
if (!stopZooming) {
|
|
maxIterations -= 10;
|
|
if (maxIterations < 50) {
|
|
maxIterations = 50;
|
|
}
|
|
|
|
zoomSize *= zoomFactor;
|
|
|
|
zoomCenter[0] += 0.1 * (targetZoomCenter[0] - zoomCenter[0]);
|
|
zoomCenter[1] += 0.1 * ( targetZoomCenter[1] - zoomCenter[1]);
|
|
|
|
window.requestAnimationFrame(render);
|
|
} else if (maxIterations < 500) {
|
|
maxIterations += 10;
|
|
window.requestAnimationFrame(render);
|
|
}
|
|
}
|
|
window.requestAnimationFrame(render);
|
|
</script>
|
|
</html>
|