Sei sulla pagina 1di 3

Configurando o canvas

Escrito por Vincius Godoy de Mendona

Curtir 28 pessoas curtiram isso. Seja o primeiro entre seus amigos.

Neste primeiro artigo de webgl aprenderemos a iniciar o canvas utilizando como mecanismo de desenho a webgl. Alm disso, iremos
configurar a biblioteca responsvel pelos clculos matemticos de matrizes e vetores, necessria para os prximos artigos.

A pgina HTML
O canvas do HTML5 representa uma rea apropriada para o desenho. O HTML5 especifica uma srie de comandos de pintura, que no
utilizaremos. No lugar, iremos requisitar do canvas um contexto opengl, o que permitir que desenhemos utilizando essa API grfica
diretamente.

Inicialmente, vamos criar um arquivo HTML contendo no mais do que a criao do canvas:

1 <html> ?
2 <head>
3 <title>Abrindo o canvas</title>
4 <script type="text/javascript" src="js/exemplo.js"></script>
5 </head>
6 <body onload="startWebGL();">
7 <canvas id="gameCanvas" style="border: none;" width="800" height="600">
8 Seu navegador no suporta HTML5! :(
9 </canvas>
10 </body>
11 </html>

Todo o resto do cdigo ser feito por javascript contido no arquivo exemplo.js. Em nosso script, iremos criar uma funo chamada
startWebGL(); responsvel por iniciar o nosso canvas. ela quem est sendo chamada no evento onload do body da pgina. Por fim,
observe que no interior da tag canvas colocamos a mensagem de erro, exibida caso essa tag no seja suportada.

Esse ser todo cdigo HTML dessa aplicao.

Criando um contexto webgl


Para criar corretamente o contexto precisaremos:

Solicitar ao navegador que utilize o contexto experimental webgl sobre o canvas: Iremos criar uma varivel global, chamada gl, que
ir conter o contexto criado. com ela que daremos os comandos da opengl. Como o contexto ainda no parte do padro
oficial, iremos procurar pelo seu nome oficial, seguido do nome de implementaes especficas de fabricantes.
Guardar informaes relativas ao canvas na varivel gl. Embora isso no seja obrigatrio, simplificamos o trabalho.

1 'use strict'; ?
2
3 var gl;
4
5 function createContext(canvasName) {
6 //Testamos se o nome de canvas passado por parametro vlido
7 var canvas = document.getElementById(canvasName);
8 if (canvas == null) {
9 alert("The canvas '" + canvasName + "' does not exist!");
10 return null;
11 }
12
13 //Tentamos inicializar a WebGL usando o nome padrao
14 //e o nome de cada navegador especifico
15 var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
16 for (var i = 0; i < names.length; i++) {
17 try {
18 var context = canvas.getContext(names[i]);
19
20 //Armazenamos as dimenses do canvas para uso futuro
21 context.width = canvas.width;
22 context.height = canvas.height;
23 return context;
24 } catch (e) {}
25 }
26 ^ voltar ao topo
27 //Caso no seja possvel inicializar, retornamos uma mensagem de erro.

28 alert("WebGL not available!");


29 return null;
30 }

Note que inicializamos o viewport com a dimenso integral do canvas. Observe tambm que, nas duas ltimas linhas do bloco try,
criamos duas propriedades na varivel gl chamadas viewportWidth e viewportHeight, onde deixamos armazenadas as dimenses do
canvas criado. Essas propriedades so teis para ns, porm, sua criao no obrigatria para a inicializao da webgl.

Por fim, inserimos um tratamento rudimentar de erro, onde exibimos um alert caso o contexto no consiga ser criado.

O primeiro programa
Vamos ao cdigo da funo que efetivamente inicializa a WebGL. Nele, iremos fazer trs tarefas:

Chamar a funo createContext() previamente criada;


Definir algumas propriedades bsicas de pintura (no caso desse exemplo, a cor do fundo e o tamanho do viewport);
Chamar a funo drawScene, que ser responsvel por desenhar a cena;

A funo drawScene, por enquanto, s conter o cdigo de limpeza da tela. Diferentemente do caso do pipeline fixo, uma grande
aventura simplesmente desenhar um tringulo na tela em webgl, por isso, deixaremos essa tarefa para nosso prximo artigo.

Note tambm que esse no o local correto para essa funo. O desenho normalmente ocorre no game loop ou, caso dos
navegadores, em eventos de timer apropriados. Veremos esse detalhe em artigos futuros.

1 function startWebGL() { ?

2 gl = createContext("gameCanvas");
3 //Obtemos o contexto e inicializamos o viewport
4 gl.viewport(0, 0, gl.width, gl.height);
5 //Definimos a cor de limpeza da tela
6 gl.clearColor(0.0, 0.0, 0.0, 1.0);
7 //Desenhamos a cena
8 drawScene();
9 }
10
11 function drawScene() {
12 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
13 }

Observe alguns detalhes importantes:

1. Na webgl, no se usa o prefixo gl antes dos nomes das funes. Por isso, chamamos a varivel de contexto de gl, de modo a
deixar a sintaxe mais similar a funo em C. Entretanto, caso voc precise procurar documentao sobre as funes na internet,
precisar incluir o prefixo (por exemplo, procure por glClearColor ou glClear);
2. Os canais de cor so informados no intervalo de 0 at 1 e na ordem (Vermelho, Verde, Azul, Alfa). Sendo (0,0,0,1) o preto e
(1,1,1,1) o branco.
3. O canvas ainda no redimensionvel e, embora ajustar o css altere seu tamanho, so necessrios ajustes no viewport e na
projeo para que isso funcione direito. Veremos isso no futuro tambm.
4. A funo glClear recebe como parmetro quais buffers da OpenGL sero limpos. Nesse caso, estamos limpando o buffer de
pintura, que contm a imagem que est na tela, e o buffer de profundidade, responsvel pelos testes de coliso.

Download
Se voc cometeu algum engano e o programa no rodou, no se preocupe, voc pode baixar os fontes daqui:

^ voltar ao topo
Concluindo
Nesse artigo, criamos uma janela webgl. Se voc seguiu o tutorial corretamente, deve estar vendo uma janela preta no meio de sua
pgina HTML. Essa janela o canvas, j com a cor limpa atravs da funo glClearColor.
No prximo artigo criaremos nosso primeiro tringulo. At l!

Comentrios (4) Adicionar novo


Escrever um comentrio
Your Contact Details:
Nome:
E-mail: no notificar Gravatar enabled
Website:

Comentrio:
Ttulo:
UBBCode: -cor- -tamanho-

Message:

Security

Por favor coloque o cdigo anti-spam que voc l na imagem.

ENVIAR

Joomla components by Compojoom

^ voltar ao topo