Public
Edited
Apr 15
simpleCubeCanvas = {
let projection = glm.mat4.create();
let model = glm.mat4.create();
let view = glm.mat4.create();
let canvas = createWebGLCanvas(width,400,gl=>{
let cube = cubeGeometry(gl);
glm.mat4.lookAt(view,[3,3,3],[0,0,0],[0,1,0]);
glm.mat4.perspective(projection,(45*Math.PI)/180,width/400,0.1,100);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.4,0.4,0.4,1.0);
return () => {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
cube({model, view, projection});
}
});
canvas.updateView = (x,y,z) => {
glm.mat4.lookAt(view,[x,y,z],[0,0,0],[0,1,0]);
};
viewHandler(canvas,canvas.updateView);
return canvas;
}
function cubeGeometry(gl) {
const RED = [ 1.0, 0.0, 0.0 ];
const YELLOW = [ 1.0, 1.0, 0.0 ];
const GREEN = [ 0.0, 1.0, 0.0 ];
const CYAN = [ 0.0, 1.0, 1.0 ];
const BLUE = [ 0.0, 0.0, 1.0 ];
const PURPLE = [ 1.0, 0.0, 1.0 ];
const [ A,B,D,C,E ] = [
[ -1.0, 1.0, -1.0 ],
[ 1.0, 1.0, -1.0 ],
[ -1.0, -1.0, -1.0 ],
[ 1.0, -1.0, -1.0 ],
[ 0.0, 0.0, 1.0 ],
];
const position = new Float32Array([
...A, ...B, ...C, ...D, ...E
]);
const color = new Float32Array([
...RED, ...RED, ...RED, ...RED,
...GREEN, ...GREEN, ...GREEN,
...BLUE, ...BLUE, ...BLUE,
...PURPLE, ...PURPLE, ...PURPLE,
...CYAN, ...CYAN, ...CYAN
]);
const index = new Uint16Array([
0, 1, 4,
1, 2, 4,
2, 3, 4,
3, 0, 4,
0, 1, 2,
0, 2, 3
]);
const prog = createProgram(gl, [
[ gl.VERTEX_SHADER, vertexShader ],
[ gl.FRAGMENT_SHADER, fragmentShader ]
]);
let a_position = gl.getAttribLocation(prog,"a_position");
let a_color = gl.getAttribLocation(prog,"a_color");
let vao = gl.createVertexArray()
gl.bindVertexArray(vao)
gl.enableVertexAttribArray(a_position);
gl.enableVertexAttribArray(a_color);
let position_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,position_vbo);
gl.bufferData(gl.ARRAY_BUFFER,position,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);
let color_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,color_vbo);
gl.bufferData(gl.ARRAY_BUFFER,color,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);
let index_vbo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,index_vbo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,index,gl.STATIC_DRAW);
return (uniforms) => {
gl.bindVertexArray(vao);
gl.useProgram(prog);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"model"),false,uniforms.model);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"view"),false,uniforms.view);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"projection"),false,uniforms.projection);
gl.drawElements(gl.TRIANGLES,index.length,gl.UNSIGNED_SHORT,0);
}
}
function createWebGLCanvas(width, height, drawFactory) {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const gl = canvas.getContext("webgl2");
if (!gl) throw new Error("WebGL unsupported");
const draw = drawFactory(gl);
const f = () => {
draw();
window.requestAnimationFrame(f);
};
window.requestAnimationFrame(f);
return canvas;
}
glm = import("gl-matrix")
import {viewHandler} from "50b7fcdf42c9c5c9"
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.
