JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/gh/gpujs/gpu.js@2.0.4/dist/gpu-browser.js"></script>
<button onclick="start()">
Start
</button>
<canvas id="gpu-canvas"></canvas>
JavaScript
const canvas = document.querySelector('#gpu-canvas');
const gl = canvas.getContext('webgl2');
const gpu = new GPU({
mode: 'webgl',
canvas: canvas,
context: gl
});
window.start = function start() {
const kernel = gpu.createKernel(
function main(data) {
return data[this.thread.x % 4];
},
{
output: [1000, 500],
pipeline: true,
dynamicOutput: true,
dynamicArguments: true,
argumentTypes: {
data: 'Array1D(2)'
}
}
);
let frame = 0;
setInterval(() => {
frame++;
console.log(frame);
for (let i = 0; i < 180; i++) {
const result = kernel([[1, 2], [3, 4], [5, 6], [7, 8]]);
}
}, 1000);
}