Public
Edited
Feb 12
Importers
function appLoop(canvas, app) {
const gl = canvas.getContext("webgl2");
if (!gl) throw new Error("WebGL unsupported");
Promise.resolve(app.setup ? app.setup(gl) : null)
.then(()=>{
const flistExec = () => {
app.draw(gl);
window.requestAnimationFrame(flistExec);
}
window.requestAnimationFrame(flistExec);
})
;
return canvas;
}
function createProgram(gl, shaders, location) {
location = location || {}
function createShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, "#version 300 es\nprecision highp float;\n"+source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
const program = gl.createProgram();
for(let [shaderType, shaderSource] of shaders) {
gl.attachShader(program, createShader(shaderType, shaderSource));
}
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("cannot link program");
const numAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
for (let i=0; i < numAttribs; i++) {
const attribInfo = gl.getActiveAttrib(program, i);
const index = gl.getAttribLocation(program, attribInfo.name);
location[attribInfo.name] = index;
}
return program;
}
function loadTexture(gl, img) {
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
gl.generateMipmap(gl.TEXTURE_2D);
return texture;
}
async function diceTexture(gl) {
let img = await (await FileAttachment("texture_2.jpg")).image();
return loadTexture(gl, img);
}
import {viewHandler} from "@rmauro/webgl-util-viewhandler"
textures = ({ load: loadTexture, texturaP2: diceTexture })
gl_utils = {
return { appLoop, createProgram, viewHandler, textures }
}
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.
