58 / 68
CODE/
WEBGL
PRO-
GRAMAÇÃO WEBGL
2 HORAS
58
DICAS PARA PROGRAMAR DE UMA
MANEIRA FÁCIL E DESCOMPLICADA
W
ebGL (Web Graphics
/LEUDU\ « XPD $3, HP
JavaScript. Derivada
do elemento canvas
da HTML5, ela oferece
suporte para renderização
GH JU£ëFRV ' H ' &RPR
pode ser implementado em
uma aplicação web sem a
necessidade de plug-ins no
navegador, é uma API muito
interessante para criar
animações de forma rápida
H FRQë£YHO
WebGL é acessada por
meio de interfaces DOM
(Document Object Model), com
gerenciamento automático de
memória, que é fornecida como
parte da linguagem JavaScript.
PRIMEIRO TESTE
Para saber se seu navegador
suporta WebGL, basta acessar
o link
KWWSV JHW ZHEJO RUJ
.
Se a imagem dinâmica de um
cubo aparecer em rotação, seu
navegador tem suporte à API
e pode ser usado para acessar
qualquer renderização criada
com ela.
Embora seja uma ferramenta
HíFLHQWH Q¥R « I£FLO GH SURJUDPDU
diretamente. Por isso, diversos
frameworks surgiram para auxiliar
R XVR GD $3, FRPR XQLW\ G
com, goocreate.com, clara.io,
SOD\FDQYDV FRP HQWUH RXWURV
Para este tutorial, a ideia é usar
R 3OD\&DQYDV TXH WHP XP SODQR
gratuito para desenvolvimento.
O CUBO QUE GIRA
Antes de usar o framework
3OD\&DQYDV R REMHWLYR « FULDU XP
cubo com animação rotacional,
acessando diretamente a API.
A FORÇA
DOWEBGL
Primeiro, é preciso referenciar as
bibliotecas necessárias da API.
Abra um arquivo de texto e
digite estas linhas:
<!DOCTYPE html>
<html lang="en" dir="ltr"
class="client-nojs">
<head>
<meta charset="UTF-8" />
<title>Tutorial – Cubo que
gira</title>
<script type="text/
javascript" src="https://
www.khronos.org/registry/webgl/sdk/demos/common/
webgl-utils.js"></script>
<script type="text/
Aprenda a usar esta
API, derivada do
canvas da HTML5,
com suporte para
renderização de
gráficos 2D e 3D
Por Homero Ottoni
O PlayCanvas é
um framework
que permite
trabalhar mais
facilmente
com o WebGL
javascript" src="https://
www.khronos.org/registry/webgl/sdk/debug/webgl-debug.
js"></script>
<script src=
"https://www.
khronos.org/registry/webgl/
sdk/demos/webkit/resources/
J3DI.js"></script>
<script src=
"https://www.
khronos.org/registry/webgl/
sdk/demos/webkit/resources/
J3DIMath.js" type="text/
javascript"> </script>
A biblioteca principal está
contida no arquivo webgl-utils.js. As
bibliotecas J3DI e J3DIMath trazem
recursos de matrizes necessários
REVISTA LOCAWEB