simpleCubeCanvas = {
let a = 0;
let projection = glm.mat4.create();
let model = glm.mat4.create();
let view = glm.mat4.create();
let canvas = createWebGLCanvas(width,400,gl=>{
let p = prismaGeometry(gl,6);
glm.mat4.lookAt(view,[0,0,5],[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);
glm.mat4.fromTranslation(model,[-3.0,0.0,0.0]);
glm.mat4.rotateY(model,model,a);
p({model, view, projection});
glm.mat4.fromTranslation(model,[3.0,0.0,0.0]);
glm.mat4.rotateX(model,model,a);
p({model, view, projection});
a += 0.01;
}
});
canvas.updateView = (x,y,z) => {
glm.mat4.lookAt(view,[x,y,z],[0,0,0],[0,1,0]);
};
return canvas;
}
function prismaGeometry(gl, n) {
const radius = 1.5;
const height = 2;
const angleStep = 2 * Math.PI / n;
let aux_position = [];
let aux_color = [];
// Base inferior (z = 0)
for (let i = 0; i < n; i++) {
aux_position.push(radius * Math.cos(i * angleStep));
aux_position.push(radius * Math.sin(i * angleStep));
aux_position.push(0.0);
aux_color.push(1.0, 0.0, 1.0); // cor base inferior
}
// Base superior (z = height)
for (let i = 0; i < n; i++) {
aux_position.push(radius * Math.cos(i * angleStep));
aux_position.push(radius * Math.sin(i * angleStep));
aux_position.push(height);
aux_color.push(0.0, 1.0, 1.0); // cor base superior
}
const position = new Float32Array(aux_position);
const color = new Float32Array(aux_color);
let aux_index = [];
// Índices da base inferior
for (let i = 1; i < n - 1; i++) {
aux_index.push(0, i, i + 1);
}
// Índices da base superior (relativo ao offset de n)
for (let i = 1; i < n - 1; i++) {
aux_index.push(n, n + i + 1, n + i); // sentido horário invertido
}
// Laterais (ligando base inferior à superior)
for (let i = 0; i < n; i++) {
let next = (i + 1) % n;
let base1 = i;
let base2 = next;
let top1 = n + i;
let top2 = n + next;
// Cada face lateral = 2 triângulos
aux_index.push(base1, base2, top2);
aux_index.push(base1, top2, top1);
}
const index = new Uint16Array(aux_index);
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")
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.
