Ponto V!

Home WebGL Configurando o canvas
Vinícius Godoy de Mendonça
Configurando o canvasImprimir
Escrito por Vinícius Godoy de Mendonça

Neste primeiro artigo de webgl aprenderemos a iniciar o canvas utilizando como mecanismo de desenho a webgl. Além disso, iremos configurar a biblioteca responsável pelos cálculos matemáticos de matrizes e vetores, necessária para os próximos artigos.

A página HTML

O canvas do HTML5 representa uma área apropriada para o desenho. O HTML5 especifica uma série de comandos de pintura, que não utilizaremos. No lugar, iremos requisitar do canvas um contexto opengl, o que permitirá que desenhemos utilizando essa API gráfica diretamente.

Inicialmente, vamos criar um arquivo HTML contendo não mais do que a criação do canvas:

<html>
<head>
    <title>Abrindo o canvas</title>
    <script type="text/javascript" src="js/exemplo.js"></script>
</head>
<body onload="startWebGL();">
    <canvas id="gameCanvas" style="border: none;" width="800" height="600">
    Seu navegador não suporta HTML5! :(
    </canvas>
</body>
</html>

Todo o resto do código será feito por javascript contido no arquivo exemplo.js. Em nosso script, iremos criar uma função chamada startWebGL(); responsável por iniciar o nosso canvas. É ela quem está sendo chamada no evento onload do body da página. Por fim, observe que no interior da tag canvas colocamos a mensagem de erro, exibida caso essa tag não seja suportada.

Esse será todo código HTML dessa aplicação.

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 variável global, chamada gl, que irá conter o contexto criado. É com ela que daremos os comandos da opengl.  Como o contexto ainda não é parte do padrão oficial, iremos procurar pelo seu nome oficial, seguido do nome de implementações específicas de fabricantes.
  • Guardar informações relativas ao canvas na variável gl. Embora isso não seja obrigatório, simplificamos o trabalho.

 

'use strict';

var gl;
    
function createContext(canvasName) {
    //Testamos se o nome de canvas passado por parametro é válido    
    var canvas = document.getElementById(canvasName);
    if (canvas == null) {
        alert("The canvas '" + canvasName + "' does not exist!");
        return null;
    }
    
    //Tentamos inicializar a WebGL usando o nome padrao 
    //e o nome de cada navegador especifico    
    var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
    for (var i = 0; i < names.length; i++) {
        try {
            var context = canvas.getContext(names[i]);            
            
            //Armazenamos as dimensões do canvas para uso futuro
            context.width = canvas.width;
            context.height = canvas.height;
            return context;
        } catch (e) {}
    }
    
    //Caso não seja possível inicializar, retornamos uma mensagem de erro.
    alert("WebGL not available!");
    return null;
}

Note que inicializamos o viewport com a dimensão integral do canvas. Observe também que, nas duas últimas linhas do bloco try, criamos duas propriedades na variável gl chamadas viewportWidth e viewportHeight, onde deixamos armazenadas as dimensões do canvas criado. Essas propriedades são úteis para nós, porém, sua criação não é obrigatória para a inicialização da webgl.

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

O primeiro programa

Vamos ao código da função que efetivamente inicializa a WebGL. Nele, iremos fazer três tarefas:

  • Chamar a função createContext() previamente criada;
  • Definir algumas propriedades básicas de pintura (no caso desse exemplo, a cor do fundo e o tamanho do viewport);
  • Chamar a função drawScene, que será responsável por desenhar a cena;

A função drawScene, por enquanto, só conterá o código de limpeza da tela. Diferentemente do caso do pipeline fixo, é uma grande aventura simplesmente desenhar um triângulo na tela em webgl, por isso, deixaremos essa tarefa para nosso próximo artigo.

Note também que esse não é o local correto para essa função. O desenho normalmente ocorre no game loop ou, caso dos navegadores, em eventos de timer apropriados. Veremos esse detalhe em artigos futuros.

function startWebGL() {    
    gl = createContext("gameCanvas");    
    //Obtemos o contexto e inicializamos o viewport
    gl.viewport(0, 0, gl.width, gl.height);        
    //Definimos a cor de limpeza da tela
    gl.clearColor(0.0, 0.0, 0.0, 1.0);  
    //Desenhamos a cena    
    drawScene();
}

function drawScene() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);        
}

Observe alguns detalhes importantes:

  1. Na webgl, não se usa o prefixo gl antes dos nomes das funções. Por isso, chamamos a variável de contexto de gl, de modo a deixar a sintaxe mais similar a função em C. Entretanto, caso você precise procurar documentação sobre as funções na internet, precisará incluir o prefixo (por exemplo, procure por glClearColor ou glClear);
  2. Os canais de cor são 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 não é redimensionável e, embora ajustar o css altere seu tamanho, são necessários ajustes no viewport e na projeção para que isso funcione direito. Veremos isso no futuro também.
  4. A função glClear recebe como parâmetro quais buffers da OpenGL serão limpos. Nesse caso, estamos limpando o buffer de pintura, que contém a imagem que está na tela, e o buffer de profundidade, responsável pelos testes de colisão.

Download

Se você cometeu algum engano e o programa não rodou, não se preocupe, você pode baixar os fontes daqui:

Clique para baixar os fontes de exemplo

Concluindo

Nesse artigo, criamos uma janela webgl. Se você seguiu o tutorial corretamente, deve estar vendo uma janela preta no meio de sua página HTML. Essa janela é o canvas, já com a cor limpa através da função glClearColor.
No próximo artigo criaremos nosso primeiro triângulo. Até lá!


Comentários (6)
  • Summer
    avatar

    For me this blog is great, this blog contains a lot of important things ..
    Summer

  • suka chu
    avatar

    The article is very easy to understand, detailed and meticulous! I had a lot of harvest after watching this article from you! I find it interesting, your article gave me a new perspective! I have read many other articles on the same topic, but your article convinced me! atari breakout

Escrever um comentário
Your Contact Details:
Gravatar enabled
Comentário:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch::(:shock:
:X:side::):P:unsure::woohoo::huh::whistle:;):S:!::?::idea::arrow:
Security
Por favor coloque o código anti-spam que você lê na imagem.
LAST_UPDATED2  

Busca

Linguagens

Twitter