Published
Edited
Nov 25, 2021
1 star
Insert cell
Insert cell
Insert cell
{
return tf.engine().findBackend("webgl").getGPGPUContext().gl;
}
Insert cell
canvas = {
const canvas = html`<canvas width=800 height=200></canvas>`;
yield canvas;
}
Insert cell
//canvas.getContext("webgl2")
Insert cell
Insert cell
{
//const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2");

let backend = tf.engine().findBackend("webgl");
if (backend === null) {
throw Error("WebGL backend is not available");
}
let gpgpu = backend.getGPGPUContext(gl);

tf.registerBackend("custom-webgl", () => {
return new tf.webgl.MathBackendWebGL(gpgpu);
});

tf.setBackend("custom-webgl");

function getTex(gl) {
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
return texture;
}

// some careless webgl calls
gl.clearColor(0.4, 1.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.viewport(0, 0, canvas.width, canvas.height);

// Squaring a tensor with a custom context.
return tf.square(4).dataSync();
}
Insert cell
Insert cell

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.
Learn more