Public
Edited
Feb 12
{
let canvas = html`<canvas width=${width} height=400/>`;
let projection = glm.mat4.create();
let model = glm.mat4.create();
let view = glm.mat4.create();
let ident = glm.mat4.create();
let objects = [];
glm.mat4.perspective(projection,(45*Math.PI)/180,width/400,0.1,100);
gl_utils.viewHandler(canvas, (x,y,z) => {
glm.mat4.lookAt(view,[x,y,z],[0,0,0],[0,1,0]);
});
async function setup(gl) {
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.4,0.4,0.4,1.0);
await gl_utils.textures.texturaP2(gl);
objects.push(geometriaPiramide(gl));
}
function draw(gl) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for(let obj of objects) {
obj.draw({model, view, projection});
}
}
return gl_utils.appLoop(canvas,{setup,draw});
}
vertexShader = `
in vec3 a_posicao;
in vec2 a_textura;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
out vec2 v_texcoord;
void main(void) {
v_texcoord = a_textura;
gl_Position = projection * view * model * vec4(a_posicao,1.0f);
}
`
fragmentShader = `
out vec4 color;
in vec2 v_texcoord;
uniform sampler2D u_texture;
void main(void) {
color = texture(u_texture, v_texcoord);
}
`
function geometriaPiramide(gl) {
let A = [ 0.0, 0.5, 0.0 ];
let B = [ -0.5, -0.5, 0.5 ];
let C = [ 0.5, -0.5, 0.5 ];
let D = [ 0.0, -0.5, -0.5 ];
let posicao = new Float32Array([
...A, ...B, ...C,
...A, ...C, ...D,
...A, ...D, ...B,
...B, ...C, ...D
]);
let textura = new Float32Array([
0.5, 1, 0, 0, 1, 0,
0.5, 1, 0, 0, 1, 0,
0.5, 1, 0, 0, 1, 0,
0, 1, 1, 1, 1, 0,
0, 0
]);
let index = new Int16Array([
0, 1, 2,
3, 4, 5,
6, 7, 8,
9, 10, 11
]);
let prog = createProgram(gl, vertexShader, fragmentShader, [["a_posicao",0], ["a_textura",1]]);
let vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
let posicao_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posicao_vbo);
gl.bufferData(gl.ARRAY_BUFFER, posicao, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
let textura_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, textura_vbo);
gl.bufferData(gl.ARRAY_BUFFER, textura, gl.STATIC_DRAW);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
let ind_vbo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ind_vbo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW);
function draw(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.uniform1i(gl.getUniformLocation(prog, "u_texture"), 0);
gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
}
return { draw };
}
function createProgram(gl, vertexShaderSource, fragmentShaderSource, attrLocation) {
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();
gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertexShaderSource));
gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragmentShaderSource));
for(let [attrName, index] of attrLocation) {
gl.bindAttribLocation(program,index,attrName);
}
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("cannot link program");
return program;
}
glm = import("gl-matrix")
import {gl_utils} from "@gabriel-padrao/utilitarios"
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.
