1. WebGL y la web 3D
un taller de verold
Ross McKegney & Carlos Sánchez

2. WebGL
API JAVASCRIPT

3. WebGL
API JAVASCRIPT

4. Tu web o app
Librería Renderizado 3D
Navegador Web
Open GL (Drivers)
Tarjeta Gráfica
WebGL

5. three.js
LIBRERIA JAVASCRIPT

6. var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({ color:0x00ff00, wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
cube.rotation.x += 0.01;
cube.position.z += 0.01;
}
render();

7. ¿Es Javascript suficientemente potente?

10. Gráficos WebGL
Procesamiento WebCL / Workers / Emscripten
Audio Web Audio
Networking WebRTC
Tiempo real + Dispositivos Web Sockets

11. Leap Motion

12. Oculus Rift

13. Neurosky

14. Neurosky

15. Herramientas

16. ● Online y con colaboración en tiempo real
● Importar modelos 3D o usar primitivas
● Componentes predefinidos
COMPORTAMIENTOS, APIs DE DISPOSITIVOS FÍSICOS, ETC.
● Recursos
MATERIALES, TEXTURAS, ANIMACIONES, ILUMINACIÓN, SKYBOXES, ETC.
● Editor de código
HTML, CSS, JAVASCRIPT
Verold Studio

17. Compatibilidad
Maya, 3D Studio Max, ZBrush, Mudbox, Blender, SketchUp, 123D Catch
Formatos
FBX, OBJ, DAE, STL, PLY, 3DS
Verold Studio

18. Motor
Brazo Robótico (animado)
Ventiladores Industriales (animados)
Tuberia (animada)
Pisicina (animada e interactiva)
Verold Studio para Diseño Industrial y
Arquitectura
Vivienda
Vivienda Interior
Pieza escaneada
Latin Grammy Awards