{
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.load(gl,pedra);
objects.push(diceGeometry(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 diceGeometry(gl) {
// Geometria **********************************************************************************
//let A = [ -0.5, -0.5, 0.5 ];
//let B = [ 0.5, -0.5, 0.5 ];
//let C = [ 0.5, 0.5, 0.5 ];
//let D = [ -0.5, 0.5, 0.5 ];
//let E = [ -0.5, -0.5, -0.5 ];
let A = [ 0.0, 1.0, 0.0 ];
let B= [-1.0, 0.0, 1.0 ];
let C= [ 1.0, 0.0, 1.0 ];
let D= [ 1.0, 0.0, -1.0 ];
let E= [-1.0, 0.0, -1.0 ];
const posicao = new Float32Array([
...A, ...B, ...C, // Frente
...A, ...C, ...D, // Direita
...A, ...D, ...E, // Trás
...A, ...E, ...B, // Esquerda
...B, ...C, ...D, // Base 1
...B, ...D, ...E // Base 2
]);
let textura = new Float32Array([
// Faces Triangulares
0.5, 1, 0, 0, 1, 0, // Frente
0.5, 1, 0, 0, 1, 0, // Direita
0.5, 1, 0, 0, 1, 0, // Trás
0.5, 1, 0, 0, 1, 0, // Esquerda
// Quadrado dividido em 2 triangulos para mapear
0, 1, 1, 1, 1, 0, // Base 1
0, 1, 1, 0, 0, 0 // Base 2
]);
let index = new Uint16Array([
0, 1, 2, // Frente
3, 4, 5, // Direita
6, 7, 8, // Trás
9, 10, 11, // Esquerda
12, 13, 14, // Base 1
15, 16, 17 // Base 2
]);
// Shader **************************************************************************************
let prog = createProgram(gl,vertexShader,fragmentShader,[["a_posicao",0],["a_textura",1]]);
// Buffers OpenGL ******************************************************************************
let vao = gl.createVertexArray()
gl.bindVertexArray(vao)
gl.enableVertexAttribArray(0) // a_posicao no shader
gl.enableVertexAttribArray(1) // a_textura no shader
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;
}
pedra = FileAttachment("textura_pedra.png").image()
glm = import("gl-matrix")
import {gl_utils} from "@rmauro/webgl-utils"
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.
