WebGL com Three.js

Pequeno lembrete, o que é WebGL?

WebGL é uma API gráfica HTML5 que permite para exibir 3D diretamente no navegador por meio da tag canvas. Vem de o OpenGL ES 2.0, éSuportado por todos os navegadores modernos.
suporte ao navegador webgl
 

Como fazer WebGL? Ou como começar bem

Três.js, “Uma biblioteca JavaScript 3D que torna o WebGL mais simples”

  • A biblioteca de código aberto mais usada e documentada para fazer WebGL
  • Criado por Ricardo Cabello aka senhor Doob
  • github: v74 (v1 > 2010); assistir 1 / estrela 572 / garfo 23
  • Renderizado em WebGL… + CSS3D & SVG para navegadores/celulares “antigos”.
  • Características: Cenas, Câmeras, Geometria, Carregadores de Modelos 3D, Luzes, Materiais, Partículas, Animação, Shaders…

shaders ? Kesako?

Shaders são como “efeitos especiais” que criam ou modificam materiais e cores (realmente incríveis). Está escrito em glsl (OpenGL Shading Language, parece C).
 

Three.js em produção

Podemos ver que three.js é usado principalmente em produção para sites de eventos, locais experimentais, mostre sites com produtos e jogos 360°:
[youtube https://www.youtube.com/watch?v=toHboGrzjO4&w=560&h=315]  
[youtube https://www.youtube.com/watch?v=DgPv6IIVDFQ&w=560&h=315]  
 

Três.js na prática

mapa de nó threejs
Observe que a luz, assim como as malhas (objetos) e a câmera serão incluídas na cena e esta última será incluída no "motor de renderização" com a câmera. No código, isso dará, por exemplo, para um cubo simples que liga sozinho:


//using jade ;)
doctype html // html5 doctype
html
    head
        title Basic Three.js App
        style
            html, body { margin: 0; padding: 0; overflow: hidden; }
    body
        script(src="js/three.min.js")
        script
            // Init scene & camera
            var scene = new THREE.Scene();
            var aspect = window.innerWidth / window.innerHeight;
            var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            // Add cube
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshNormalMaterial();
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
            camera.position.z = 5;
            // Add animation
            var render = function () {
              requestAnimationFrame( render );
              cube.rotation.x += 0.1;
              cube.rotation.y += 0.1;
              renderer.render( scene, camera );
            };
            render();

 
 

Alguns links para three.js

 
PS: Você sabia que usamos three.js para o calendário adiante 🙂
Hervé Chaissac, cientista de UX @UXRepublic

 

(fotos de David Scottlyons)