Taller UMA

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

Transcript of Taller UMA

Page 1: Taller UMA

WebGL y la web 3Dun taller de verold

Ross McKegney & Carlos Sánchez

Page 2: Taller UMA

WebGLAPI JAVASCRIPT

Page 3: Taller UMA

WebGLAPI JAVASCRIPT

Page 4: Taller UMA

Tu web o app

Librería Renderizado 3D

Navegador Web

Open GL (Drivers)

Tarjeta Gráfica

WebGL

Page 5: Taller UMA

three.jsLIBRERIA JAVASCRIPT

Page 6: Taller UMA

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

Page 7: Taller UMA

¿Es Javascript suficientemente potente?

Page 9: Taller UMA
Page 10: Taller UMA

Gráficos WebGL

Procesamiento WebCL / Workers / Emscripten

Audio Web Audio

Networking WebRTC

Tiempo real + Dispositivos Web Sockets

Page 11: Taller UMA

Leap Motion

Page 12: Taller UMA

Oculus Rift

Page 13: Taller UMA

Neurosky

Page 14: Taller UMA

Neurosky

Page 16: Taller UMA

● 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

Page 17: Taller UMA

Compatibilidad

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

Formatos

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

Verold Studio

Page 20: Taller UMA