taller uma

WebGL y la web 3Dun taller de verold

Ross McKegney & Carlos Sánchez

WebGLAPI JAVASCRIPT

WebGLAPI JAVASCRIPT

Tu web o app

Librería Renderizado 3D

Navegador Web

Open GL (Drivers)

Tarjeta Gráfica

WebGL

three.jsLIBRERIA JAVASCRIPT

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();

¿Es Javascript suficientemente potente?

Gráficos WebGL

Procesamiento WebCL / Workers / Emscripten

Audio Web Audio

Networking WebRTC

Tiempo real + Dispositivos Web Sockets

Leap Motion

Oculus Rift

Neurosky

Neurosky

Herramientas

● 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

Compatibilidad

Maya, 3D Studio Max, ZBrush, Mudbox, Blender, SketchUp, 123D Catch

Formatos

FBX, OBJ, DAE, STL, PLY, 3DS

Verold Studio

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