Locaweb - Edição 50

60 / 68

CODE/
WEBGL
60
gl.getUniformLocation(g.
program, "u_
modelViewProjMatrix");
g.mvpMatrix = new
J3DIMatrix4();
// Habilita todos
os atributos de arrays dos
vértices.
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
// Ajusta todos os
atributos para vértices,
normais e cores
gl.bindBuffer(gl.
ARRAY_BUFFER, g.box.
vertexObject);
gl.vertexAttribPointer(2, 3,
gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.
ARRAY_BUFFER, g.box.
normalObject);
gl.vertexAttribPointer(0, 3,
gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.
[SAIBA SE SEU BROWSER SUPORTAWEBGL EMGET.WEBGL.ORG]
ARRAY_BUFFER, g.box.
colorObject);
gl.vertexAttribPointer(1,
4, gl.UNSIGNED_BYTE, false,
0, 0);
// Vincula o array
dos índices
gl.bindBuffer(gl.
ELEMENT_ARRAY_BUFFER, g.box.
indexObject);
return gl;
}
width = -1;
height = -1;
var requestId;
function reshape(gl)
{
var
canvas = document.
getElementById('example');
var windowWidth =
window.innerWidth - 20;
var windowHeight =
window.innerHeight - 40;
if (windowWidth ==
width && windowHeight ==
height)
return;
width = windowWidth;
height =
windowHeight;
canvas.width =
width;
canvas.height =
height;
// Define a matriz
da janela de exibição e
projeção para a cena
gl.viewport(0, 0,
width, height);
g.perspectiveMatrix
= new J3DIMatrix4();
g.perspectiveMatrix.
perspective(30, width/
height, 1, 10000);
g.perspectiveMatrix.
lookat(0, 0, 7, 0, 0, 0, 0,
1, 0);
}
function drawPicture(gl)
{
//Certifica que
o element canvas tem as
dimensões corretas
reshape(gl);
// Limpa o element
canvas
gl.clear(gl.COLOR_
BUFFER_BIT | gl.DEPTH_
BUFFER_BIT);
// Cria um modelo
de matrix
g.mvMatrix.
makeIdentity();
g.mvMatrix.
rotate(20, 1,0,0);
g.mvMatrix.
rotate(currentAngle, 0,1,0);
// Constrói a matriz
normal a partir da matriz
modelo e passa a função
g.normalMatrix.
load(g.mvMatrix);
g.normalMatrix.
invert();
g.normalMatrix.
transpose();
g.normalMatrix.
setUniform(gl, g.u_
normalMatrixLoc, false);
//Constróio o modelo
de projeção de view e passa
a função
g.mvpMatrix.load(g.
perspectiveMatrix);
g.mvpMatrix.
multiply(g.mvMatrix);
g.mvpMatrix.
setUniform(gl, g.u_
modelViewProjMatrixLoc,
false);
// Desenha o cubo
gl.drawElements(gl.
TRIANGLES, g.box.numIndices,
gl.UNSIGNED_BYTE, 0);
// Apresenta o
framerate
framerate.
snapshot();
currentAngle +=
incAngle;
if (currentAngle >
360)
currentAngle -=
360;
Em clara.io, você pode
usar uma ferramenta que
atua com o WebGL
REVISTA LOCAWEB