Juegos 3D
multijugador en tiempo real
three.js
Nosotros
Miguel Angel García
@miguelagg
magarcia@extremanet.com
Daniel Pallarés
@dani_extremanet
dpallares@extremanet.com
three.js
¿Y esto qué es ?
three.js
Informática es la
carrera con más salida
three.js
Los videojuegos
generan
1.900 millones
en España
three.js
Innovación
y aprendizaje
contínuos.
three.js
Sal de tu
zona de confort
three.js
Lo que aprendiste
ayer ya está obsoleto
three.js
¿De dónde venimos ?
Web estáticas
Web dinámicas
Lenguajes de servidor, php .net , jsp, netbeans, webservice
“Lenguaje” de etiquetas html
three.js
¿Qué había en el pasado?
three.js
<script language=javascript>
function AbrirVentana (que_url){
window.open(que_url,”v1","width=120,height=300,scrollbar
}
</script>
…..<a href=“javascript:AbrirVentana(‘http://www.extremanet.com')"> Pincha para abrir</a>
El pasado era Javascript
three.js
¿Qué tenemos en el pres
three.js
$.ajax({
url: “pagina.aspx",
type: "GET",
success: function(respuesta){
$(‘#lblResultado’).html(‘Esto me llega: ‘+respuesta);
},
error: function(){
$(‘#lblResultado).html(‘Error en la petición’)
}
El presente es Javascript
three.js
¿Cuál es el futuro?
three.js
var http = require('http')
, fs = require('fs')
, request1 = require(‘request’)
, fs = require(‘fs'), url = require("url");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end();
}).listen(9000);
console.log("Servidor escuchando en el 9000....");
El futuro es Javascript
three.js
¿Esto es para mi ?
three.js
¿Qué tengo que saber?
three.js
HTML5
javascript
CSS3
three.js
¿Qué necesito ?
Editor de Texto
Browser web WebGL
Google Chrome y Mozilla Firefox tienen excelente soporte WebGL
Sublime para Mac y Notepad++ para Windows
* chromeexperiments.com/webgl API para gráficos 3D.
three.js
¿Qué más necesito ?
Diseño gráfico
Imaginación
Modelado 3D con Blender
Esto no se aprende
three.js
HTML5 y CSS3
el HTML con
superpoderes
Cientos de etiquetas nuevas y mejor
organización de la web
three.js
Node JS
three.js
Qué es NodeJS
Javascript de Servidor
Creado por Ryan Dahl en 2009 para facilitar los procesos multitarea
Basado en V8
Entorno Javascript de Google para us navegador Chrome
Javascript
Lenguaje de programación orientado a objetos.
- Tipado dinámico
- Prototípico
- Arrays base formato JSON
- Javascript <> Java
ThreeJS
Librería para renderizar entornos 3D en navegadores web a través de la etiqueta
canvas de HTML5 (WebGL). No necesita instalación de plugins en el navegador.
NodeJS
Entorno de programación en el lado de servidor en lenguaje Javascript
Blender
Programa para el renderizado, iluminación y creación de gráficos 3D
2006 20112009
Canvas
3D
WebGL
WebGL
1.0
Mozilla
Opera
Mozilla
Opera
Chrome
Safari
Flash 3D
API
Adobe
Navegadores que soportan WebGL
Conceptos básicos del 3D
Geometry
Material + Textures
Mesh
Escena y cámara
https://www.ludei.com/cocoonjs/
Exportación a dispositivos móviles
https://nodejs.org
Instalación de módulos
$ npm install nombre_modulo
$ npm install engine.io
$ npm install express
$ npm install eureca.io
client.js
server.js
$ node server.js
EurecaServer
.onConnect
.onDisconnect
client.js client.js

Programacion juegos 3d combinada