Keynote utilizado en el evento EmPlasencia en el taller de Introducción a la programación de juegos 3D Multijugador con javascript, three.js y nodejs.

1. Juegos 3D
multijugador en tiempo real

2. three.js
Nosotros
Miguel Angel García
@miguelagg
magarcia@extremanet.com
Daniel Pallarés
@dani_extremanet
dpallares@extremanet.com

3. three.js
¿Y esto qué es ?

4. three.js
Informática es la
carrera con más salida

5. three.js
Los videojuegos
generan
1.900 millones
en España

6. three.js
Innovación
y aprendizaje
contínuos.

7. three.js
Sal de tu
zona de confort

8. three.js
Lo que aprendiste
ayer ya está obsoleto

9. three.js
¿De dónde venimos ?
Web estáticas
Web dinámicas
Lenguajes de servidor, php .net , jsp, netbeans, webservice
“Lenguaje” de etiquetas html

10. three.js
¿Qué había en el pasado?

11. 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

12. three.js
¿Qué tenemos en el pres

13. 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

14. three.js
¿Cuál es el futuro?

15. 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

16. three.js
¿Esto es para mi ?

17. three.js
¿Qué tengo que saber?
three.js
HTML5
javascript
CSS3

18. 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.

19. three.js
¿Qué más necesito ?
Diseño gráfico
Imaginación
Modelado 3D con Blender
Esto no se aprende

20. three.js
HTML5 y CSS3
el HTML con
superpoderes
Cientos de etiquetas nuevas y mejor
organización de la web

21. three.js
Node JS

22. 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

23. 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

24. 2006 20112009
Canvas
3D
WebGL
WebGL
1.0
Mozilla
Opera
Mozilla
Opera
Chrome
Safari
Flash 3D
API
Adobe

26. Navegadores que soportan WebGL

27. Conceptos básicos del 3D
Geometry
Material + Textures
Mesh

28. Escena y cámara

29. https://www.ludei.com/cocoonjs/
Exportación a dispositivos móviles

30. https://nodejs.org

31. Instalación de módulos
$ npm install nombre_modulo
$ npm install engine.io
$ npm install express
$ npm install eureca.io

32. client.js
server.js
$ node server.js
EurecaServer
.onConnect
.onDisconnect
client.js client.js