Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Webgl Canvas

    Enviado por

    GomesGilzamir
    114 visualizações3 páginas
    Introdução ao Canvas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Introdução ao Canvas

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    114 visualizações3 páginas

    Webgl Canvas

    Enviado por

    GomesGilzamir
    Introdução ao Canvas

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 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

    Você também pode gostar