61 / 68
61
WEBGL
}
function start()
{
var c = document.
getElementById("example");
var w = Math.
floor(window.innerWidth *
0.9);
var h = Math.
floor(window.innerHeight *
0.9);
c.addEventListe
ner('webglcontextlost',
handleContextLost, false);
c.addEventListener
('webglcontextrestored',
handleContextRestored,
false);
c.width = w;
c.height = h;
var gl = init();
if (!gl) {
return;
}
currentAngle = 0;
incAngle = 0.5;
framerate = new
Framerate("framerate");
var f = function() {
drawPicture(gl);
requestId =
window.requestAnimFrame(f,
c);
};
f();
function
handleContextLost(e) {
e.preventDefault();
if (requestId
!== undefined) {
window.
cancelAnimFrame(requestId);
requestId =
undefined;
}
}
function
handleContextRestored() {
init();
f();
}
}
</script>
Existem ainda dois scripts
necessários para renderizar o cubo:
vshader e fshader.
<script id="vshader"
type="x-shader/x-vertex">
uniform mat4 u_
modelViewProjMatrix;
uniform mat4 u_
normalMatrix;
uniform vec3 lightDir;
attribute vec3 vNormal;
attribute vec4 vColor;
attribute vec4
vPosition;
varying float v_Dot;
varying vec4 v_Color;
void main()
{
gl_Position =
u_modelViewProjMatrix *
vPosition;
v_Color = vColor;
vec4 transNormal
= u_normalMatrix *
vec4(vNormal, 1);
v_Dot =
max(dot(transNormal.xyz,
lightDir), 0.0);
}
</script>
PLAYCANVAS
Para desenvolver elementos
animados tridimensionais e
também scripts de animação, de
uma forma mais fácil e rápida,
XVDUHPRV R 3OD\&DQYDV 7UDWD VH
de um “game engine”, ou criador
de jogos, que pode ser usado
para acessar o Web3d e criar
animações e interatividade, que
faz uso do WebGL. Para iniciar,
é preciso acessar o link e criar
uma conta gratuita. Faça isso
ao acessar o endereço:
KWWSV SOD\FDQYDV FRP
<script id="fshader"
type="x-shader/x-fragment">
precision mediump float;
varying float v_Dot;
varying vec4 v_Color;
void main()
{
gl_FragColor =
vec4(v_Color.xyz * v_Dot,
v_Color.a);
}
</script>
O resultado desses códigos
todos é este:
Você pode conferir o
resultado animado no seguinte link:
KWWS OZJR WR W
.
[
WEBGL É ACESSADA PORMEIO DE INTERFACES DOMCOM
GERENCIAMENTO AUTOMÁTICO DE MEMÓRIA, FORNECIDA
COMO PARTE DA LINGUAGEM JAVASCRIPT
]
Em makemedia.info/teste/teste.htm, você pode conferir o cubo em 3D rodando
REVISTA LOCAWEB