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.
Table of Contents
|
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