Public
Edited
Jan 14
2 forks
{
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.dice(gl);
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 F = [ 0.5, -0.5, -0.5 ];
let G = [ 0.5, 0.5, -0.5 ];
let H = [ -0.5, 0.5, -0.5 ];
let posicao = new Float32Array([
...A, ...B, ...C, ...D,
...B, ...F, ...G, ...C,
...F, ...E, ...H, ...G,
...E, ...A, ...D, ...H,
...D, ...C, ...G, ...H,
...E, ...F, ...B, ...A,
]);
let textura = new Float32Array([
0, 1/2, 1/3, 1/2, 1/3, 0, 0, 0, // 1
1/3, 1/2, 2/3, 1/2, 2/3, 0, 1/3, 0, // 2
2/3, 1/2, 1, 1/2, 1, 0, 2/3, 0, // 3
0, 1, 1/3, 1, 1/3, 1/2, 0, 1/2, // 4
1/3, 1, 2/3, 1, 2/3, 1/2, 1/3, 1/2, // 5
2/3, 1, 1, 1, 1, 1/2, 2/3, 1/2, // 6
]);
let index = new Int16Array([
0, 1, 2,
0, 2, 3,
4, 5, 6,
4, 6, 7,
8, 9, 10,
8, 10, 11,
12, 13, 14,
12, 14, 15,
16, 17, 18,
16, 18, 19,
20, 21, 22,
20, 22, 23
]);
// 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;
}
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.
