Webgl

Api em Javascript que permite o manuseio de OpenGL em páginas Web. A versão mais atual (2) se baseia em OpenGL ES 3.0, utiliza-se da funcionalidade do Canvas, elemento introduzido no HTML5 para desenho em páginas Web e está sendo padronizada.

Apesar de ser ainda um esboço já se encontram diversos sites/links referentes a webGL. Até mesmo até jogos já foram lançadas com tal tecnologia. Para meis recursos sobre webGL dê uma olhada na seção links, logo abaixo.

Exemplo simples em WebGL

<html>
    <head>
        <title> testes com WebGL </title>
    </head>
    <body onload="initGL();">
        <div id="conteudo">
            <canvas id="tela"  width="800" height="600">
            </canvas>
        </div>
    </body>
 
    <script type="text/javascript">
        var gl;
        var canvas;
 
        function initGL(){
            canvas = document.getElementById( 'tela' );
            try{
                // tenta carregar o contexto webGL - funciona no chrome
                gl = canvas.getContext( "experimental-webgl" );
            } catch( e ){
            }
 
            if(!gl){ 
                try { 
                    // tenta carregar o contexto webGL - funciona no Firefox
                    gl=canvas.getContext("moz-webgl"); 
                } catch(e){
                }
            }
 
            if( !gl ){
                alert( "Could not initialize webGL, sorry :-(" );
                return;
            }
 
            // configura o viewport
            gl.viewport( 0, 0, canvas.width, canvas.height );
 
            gl.clearColor( 0, 0, 0, 1 );
 
            // limpa a tela (coloca o plano de fundo para vermelho)
            gl.clear( gl.COLOR_BUFFER_BIT );
        }
    </script>
 
</html>

Navegadores compatíveis

Atualmente todos os principais navegadores suportam WebGL. Para versões mais antigas do IE há plugins. Dois destes são o Chrome Frame do Google e o IEWebGL.
Abaixo há algumas considerações a respeito do WebGL em versões de navegadores mais antigas

Firefox

Para fazer funcionar WebGL no firefox, você precisa baixar um nightly build do Firefox 4 e digitar na barra de endereções

about:config

Vai abrir uma lista de configurações que podem ser alteráveis. Navegue até o registro webgl-enabled ou algo assim e altere o valor de false para true.

Chrome

Se você tiver uma versão antiga do chrome que suporta WebGL vai ter que inicializar o Chrome pela linha de comando adicionando a opção -enable-webgl. A linha de comando irá ser algo como:

C:\Users\Foreba\AppData\Local\Google\Chrome\Application\chrome.exe -no-sandbox -enable-webgl

WebGL 2.0

A Khronos elaborou a segunda versão do WebGL, baseado na API OpenGL ES 3.0. No momento os únicos navegadores que suportam oficialmente WebGL 2 é o Firefox 51 e o Chrome 56.

Segue abaixo um excerto de como fazer para desenvoler usando WebGl2

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');
let isWebGL2 = !!ctx;
if (!isWebGL2) { // try to fallback to webgl 1
    ctx = canvas.getContext('webgl') ||
          canvas.getContext('experimental-webgl');
}
if (!ctx) {
    console.log('your browser does not support WebGL');
}

Ferramentas

WebGL Inspector

Ferramenta para auxílio na depuração de código JavaScript.
Link: https://github.com/benvanik/WebGL-Inspector/blob/master/readme.md

ShaderToy

Editor interativo de shaders para WebGL. Visualize os resultados simultaneamente à programação do shader em questão.
Link: http://www.iquilezles.org/apps/shadertoy/

VertexShaderArt

Crie vertex shaders em WebGL.
Link: http://www.vertexshaderart.com/

WebGL playground

Ferramenta como o ShaderToy em que você pode editar shaders WebGL e visualizar os resultados imediatamente
Link: http://webglplayground.net/

Outras

Uma lista de ferramentas pode ser encontrada neste post do site realtimerendering:
http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/

Exemplos em WebGL

Para mais exemplos veja exemplos WebGL

Bibliotecas para auxiliar o desenvolvimento de páginas webGL

threejs: Biblioteca criada pelo google e das mais usadas para o auxílio no desenvolvimentos de páginas WebGL
PlayCanvas: Engine de código-fonte aberto. Conta com um site para auxiliar no desenvolvimento (http://playcanvas.com)
SpiderGL: xxx

Links

Notícias/Matérias de WebGL/Sobre a Tecnologia

WebGL: Why the Web Will Be More Than Just Pages
http://learningwebgl.com/ Aprenda WebGL junto com o autor do site. O autor está aprendendo programação gráfica com tutoriais tirados do Nehe e apresenta um site com muita informação e conteúdo
http://planet-webgl.org/ Um site dedicado a WebGL com muitos exemplos da tecnologia
Rápida visão geral sobre WebGL Um artigo que de forma sucinta fala sobre WebGL
https://developer.mozilla.org/en/WebGL Link da mozzila sobre WebGL
http://www.webglcamp.com/wiki/index.php?title=Main_Page Videos e links sobre o evento WebGL Camp
http://mrdoob.com/ Uma coletânea de exemplos sobre webGL
http://www.webgl.com/ Links interessantes sobre WebGL
http://alteredqualia.com/three/examples/webgl_shader_lava.html Coletâneas de WebGL demos
http://code.google.com/p/webglsamples/ vários exemplos WebGL
http://mortennobel.files.wordpress.com/2012/03/webgl-based-game-engine1.pdf Tese de mestrado sobre construir uma engine 3D que usa WebGL. LEITURA RECOMENDADA
https://fractalfantasy.net/ Vaŕios demos feitos com WebGL

Livros

Professional WebGL Programming: Developing 3D Graphics for the Web: http://www.wrox.com/WileyCDA/WroxTitle/Professional-WebGL-Programming-Developing-3D-Graphics-for-the-Web.productCd-1119968860.html

WebGL Beginner's Guide: http://www.packtpub.com/webgl-javascript-beginners-guide/book

WebGL: Up and Running - Building 3D Graphics for the Web: http://shop.oreilly.com/product/0636920024729.do

Jogos

http://triggerrally.com/drive?track=preview.json&car=car1.json
https://developer.mozilla.org/media/uploads/demos/a/z/azakai/3baf4ad7e600cbda06ec46efec5ec3b8/bananabread_1346106841_demo_package/index.html Demo de atirador em primeira pessoa em 3D via WebGL.

Especificação do padrão

http://www.khronos.org/webgl/ Página oficial do padrão, mantina pela Khronos, organização sem fins lucrativos para o fomento de padrões abertos. No site estão recursos como o esboço da especificação, Wiki e fóruns públicos

Bibliotecas

WebGL Made easy Uma biblioteca para auxiliar no manuseio da API WebGL
SPider GL Outra biblioteca auxiliar para WebGL
http://www.ambiera.com/copperlicht/index.html Engine 3D feita em WebGL
[http://mrdoob.github.com/three.js/]: Three js - uma biblioteca com diversas funcionalidades e muito utilizada para WebGL
[http://twgljs.org/]: Twgl - Biblioteca utilitária que automatiza algumas tarefas rotineiras em WebGL
[https://github.com/squarefeet/ShaderParticleEngine]: API de sistemas de parículas para Three.js

Utilitários

http://caniuse.com/webgl Exibe a estatística de suporte a webgl de diferentes versões do mesmo e de diferentes navegadores
http://doesmybrowsersupportwebgl.com/ Verifica se o navegador suporta webgl
http://analyticalgraphicsinc.github.com/webglreport/ Ainda outro site de estatística de WebGL
http://alteredqualia.com/tmp/webgl-maxparams-test/ Confere os parâmetros máximos que sua GPU pode suportar em termos de WebGL
http://webglstats.com/ Estatísticas sobre suporte a webgl e tecnologias correlatas adquiridas de diversos sites
http://www.geeks3d.com/20160127/webgl-caps-viewer-0-1-0-simple-webgl-test-and-capabilities-viewer/: (WebGLCapsViewer) Teste de webgl e exibição das capacidades da GPU (via WebGL).

Outros

http://www.webgljobs.com/ Site que lista empregos para programadores WebGL
https://github.com/KhronosGroup/WebGL Repositório WebGl da khronos no Github
https://developer.mozilla.org/en-US/demos/devderby/2012/june Competição da Mozilla DevDerby, explorando desta vez a tecnologia webGL
http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists Informações sobre versões de drivers gráficos que permitem o suporte a WebGL
http://webglfundamentals.org/: SIte dedicado a ensinar os fundamentos de WebGL
http://www.davevoyles.com/a-beginners-guide-to-webgl/: Site explicando sobre WebGL, uso e possibilidades. Recomendado (em inglês)
http://caniuse.com/#feat=webgl2 Lista dos navegadores que suportam WebGL2

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.