Locaweb - Edição 50

59 / 68

59
ao exemplo do cubo com rotação.
O código HTML (abaixo) cria o
elemento <canvas>, preparando,
inclusive, para navegadores que não
suportam o WebGL:
<canvas id="example"> Se
está vendo esta frase, seu
navegador não suporte o
elemento canvas. Que pena!</
canvas>
<div class="text">Texto
sobre o elemento canvas</
div>
<div id="framerate"></div>
Se o navegador não tiver
suporte para WebGL, não será
possível renderizar o cubo.
Dessa forma, a frase informativa
será exibida. Para posicionar os
elementos canvas e o texto, use
este código de estilo:
<style type="text/css">
canvas {
/* border: 2px solid
black; */
}
.text {
;
font ;
color: blue;
}
</style>
É um código CS simples,
que apenas posiciona os
elementos na tela.
O próximo código traz a
função init(), que inicializa a API
e variáveis, IDs e propriedades
utilizadas na construção do cubo
e da animação de rotação. Como
é um código longo, as explicações
para as linhas mais relevantes
estão acima delas:
<script>
var g = {}; // um array
para variáveis globais
function init() {
// Inicializa a API
var gl = initWebGL(
// O ID do
elemento Canvas
"example");
if (!gl) {
return;
}
g.program =
simpleSetup(
gl,
// Os IDs das
sombras dos lados
"vshader",
"fshader",
// Os atributos
usados nas sombras dos
lados.
[ "vNormal",
"vColor", "vPosition"],
// A cor base e
a profundidade das cores
[ 0, 0, 0, 1 ],
10000);
// Ajusta uma
variável para as sombras
gl.uniform3f(gl.
getUniformLocation(g.
program, "lightDir"), 0,
0, 1);
v3-v2 em baixo
0, 1, 1, 1,
0, 1, 1, 1, 0, 1, 1, 1,
0, 1, 1, 1 ] // v4-v7-
v6-v5 atras
);
// Ajusta o buffer
dos vértices para as cores
g.box.colorObject =
gl.createBuffer();
gl.bindBuffer(gl.
ARRAY_BUFFER, g.box.
colorObject);
gl.bufferData(gl.
ARRAY_BUFFER, colors,
gl.STATIC_DRAW);
// Cria matrizes
para usar e salvar a
localização das sombras das
cores
g.mvMatrix = new
J3DIMatrix4();
g.u_normalMatrixLoc
= gl.getUniformLocation(g.
program, "u_normalMatrix");
g.normalMatrix = new
J3DIMatrix4();
g.u_
modelViewProjMatrixLoc =
[WEBGL É MUITO EFICIENTE, MAS NÃO É FÁCIL PROGRAMAR DIRETAMENTE NELE]
Um framework que
também permite, de
forma simples,
usar o WebGL é o
goocreate.com
//Cria o cubo.
O valor 'gl' contém as
propriedades do cubo
// e BufferObjects
contém o array para os
vértices,
//coordenadas das
texturas e índices.
g.box = makeBox(gl);
// Ajusta o array de
cores para as faces do cubo
var colors = new
Uint8Array(
[ 0, 0, 1, 1,
0, 0, 1, 1, 0, 0, 1, 1,
0, 0, 1, 1, // v0-v1-
v2-v3 frente
1, 0, 0, 1,
1, 0, 0, 1, 1, 0, 0, 1,
1, 0, 0, 1, // v0-v3-
v4-v5 direita
0, 1, 0, 1,
0, 1, 0, 1, 0, 1, 0, 1,
0, 1, 0, 1, // v0-v5-
v6-v1 sobre
1, 1, 0, 1,
1, 1, 0, 1, 1, 1, 0, 1,
1, 1, 0, 1, // v1-v6-
v7-v2 esquerda
1, 0, 1, 1,
1, 0, 1, 1, 1, 0, 1, 1,
1, 0, 1, 1, // v7-v4-
REVISTA LOCAWEB