Published
Edited
Jan 8, 2020
md`# Reusing same texture in GPU.js, without errors
This causes:
1. Dynamic recompilation
2. Diffferent argument type handling
3. On the fly copying of texture into new value
4. Easy and convienient API
`
GPU=require("gpu.js@latest/dist/gpu-browser.js")
n=2**9
dims=[n,n]
{
let Xa=new GPU.Input(
new Array(dims.reduce((a, b) => a * b, 1)).fill(0).map(()=>Math.random()),
dims
)
const copyKernel = gpu.createKernel(function(value) {
return value[this.thread.y][this.thread.x];
})
.setOutput(dims)
.setPipeline(true)
const computeKernel = gpu.createKernel(function(X,t) {
const ix = this.thread.x
const iy = this.thread.y
let x = X[ix][iy]
let xf0 = X[ix+1][iy]
let x0f = X[ix][iy+1]
let xb0 = X[ix-1][iy]
let x0b = X[ix][iy-1]
let lpl = (xf0+xb0+x0f+x0b-4*x)
return x+lpl
}, { output: dims, pipeline: true });
const viewKernel = gpu.createKernel(function(input) {
this.color(input[this.thread.x][this.thread.y],0,0,0)
}, { output: dims, graphical: true });
let X = copyKernel(Xa);
let frame;
(function tick() {
let t = (Date.now()-performance.timeOrigin)/1000.
const newX = computeKernel(X,0)
X.delete()
X = newX
viewKernel(X)
frame = requestAnimationFrame(tick);
})();
invalidation.then(() => cancelAnimationFrame(frame));
return viewKernel.canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
