Libros Noticias

Diseño de juegos 3D para WEB – Libro uno (DESCARGAR)

Los navegadores web a lo largo de los años han ido incorporando nuevas tecnologías, convirtiéndose de simples visores de páginas con texto plano y alguna imagen a plataformas que permiten la creación de juegos en tres dimensiones.

La revolución empezó  con la mejora de los estilos CSS, para continuar con la incorporación de bases de datos relacionales y documentales, y la posibilidad de crear aplicaciones que funcionan en modo offline sin conexión a Internet. Los avances han continuado con la incorporación de tecnologías audiovisuales, la posibilidad del visionado de películas, la gestión del audio de forma nativa, incluso el reconocimiento de voz y la síntesis de voz para la lectura de textos. Finalmente la incorporación de la tecnología 3D (WebGL) con aceleración por hardware, la detección del movimiento, o la tecnología de realidad virtual, han hecho que la programación para WEB no tenga nada que envidiar al resto de plataformas y lenguajes tradicionales.

Por todo ello, he decidido empezar una colección de libros que nos permita explorar estos avances y convertirnos en verdaderos expertos. Para distinguir la colección del resto de libros existentes en el mercado me he centrado en enseñar cómo realizar un juego de rol en primera persona (“THE FIVE PLANETS”), únicamente como excusa para introducir las tecnologías WEB paulatinamente.

¿QUE CUBRE EL PRIMER LIBRO DE LA COLECCIÓN?

El libro está dirigido a aquellos que desean explorar cómo crear animaciones 3D, ya sea para  añadir elementos visuales a sus páginas WEB o de empresa, como aquéllos que quieran probar suerte en el diseño de juegos. En él aprenderemos a:

·         Usar la librería THREE.JS para crear y animar una escena básica.
·         A preparar el entorno de desarrollo y a solucionar los principales problemas que nos encontremos.
·         A usar las geometrías y materiales que ofrece la librería por defecto.
·         A crear texturas avanzadas y transparencias.
·         A iluminar la escena y crear  sombras.
·         A cargar objetos realizados con terceras plataformas y animarlos con distintas técnicas.
·         A usar el teclado, el ratón e incluso el movimiento del cuerpo para controlar la cámara.

Finalmente crearemos nuestra primera localización del juego. Una bonita aldea medieval con su castillo y cementerio, llena de aldeanos con sus rutinas de paseo y quehaceres diarios, y un bosque espeso lleno de peligrosos monstruos.

¿CÓMO ES EL JUEGO?

El juego abarca desde la creación de las escenas en 3D, hasta la gestión de la música y efectos sonoros, la inteligencia artificial, la animación de los personajes y monstruos, el guardado de la partida en curso y su recuperación posterior y finalmente el empaquetado.

¿QUÉ CONOCIMIENTOS PREVIOS SON NECESARIOS?

Este libro es adecuado para cualquiera con conocimientos básicos de JavaScript y HTML. No se necesitan conocimientos de matemática avanzada ni de WebGL. Todos los materiales y ejercicios pueden ser descargados libremente en la página www.TheFivePlanets.org

IMAGEN CONTRAPORTADA Y PORDA Y LATERAL

 

DESCARGAR LA PREVIEW DEL LIBRO

descargar-libro-pdf

ÍNDICE DE CONTENIDOS

INTRODUCCIÓN.. 13— Para quien es este libro. 13

— Objetivo de la colección. 13

— Creemos nuestro juego de rol 14

—– ¿Por qué un juego de rol?. 14

—– ¿Cómo es el juego que crearemos?. 15

— Tecnologías a usar. 18

—– Three.js. 18

—– Detección de colisiones y leyes de la física. 18

———- Ammo.js. 19

———- Cannon.js. 19

———- Physijs. 19

———- Oimo.js. 19

—– JQuery. 20

—– Blender 20

—– Adobe Photoshop. 20

C1 – THREE.JS: PRIMEROS PASOS. 23

— Hola mundo. 23

—– Escena. 26

—– Mesh. 26

—– Geometría. 27

—– Material 29

—– Camera. 30

———- Camera en perspectiva (THREE.PrespectiveCamera) 31

—– Render. 33

———- WebGL (THREE.WebGLRender) 35

———- Canvas (THREE.CanvasRender) 35

———- CSS3D (THREE.CSS3DRender) 35

—– Ejes, Posición, Escala y Rotación. 36

———- Ejes. 36

———- Posición y Escala. 37

———- Posición relativa. 38

———- Rotación. 39

———- Rotación sobre su eje. 40

———- Rotación respecto a un punto de referencia. 40

—– Convertir grados a radianes. 41

—– Animación de la escena. 42

—– Clock. 43

C2 – TREEJS: PREPARANDO EL ENTORNO DE DESARROLLO.. 45

— Solucionar el error “cross-origin-domain”. 45

—– Chrome. 46

—– Firefox. 47

— Instalar un servidor web local 48

—– Servidores portables. 49

——– PWS (Apache + MySQL + PHP) 49

——– UwAmp (Apache + MySQL + PHP) 49

——– Mongose. 49

—– Servidores no portables. 50

——– XAMPP. 50

——– MAMP. 50

——– Web server para Node.js. 51

— Estadísticas (stats.js). 52

— Control ui 54

—– Tipos de campos a usar en la interfaz. 57

—– Carpetas. 59

—– Eventos. 59

— Detectar soporte WEBGl 60

C3 – THREEJS: GEOMETRÍAS, MATERIALES, LUCES Y SOMBRAS. 61

— GeometrÍas. 61

—– Geometrías 3D predefinidas. 61

——– Cubo (THREE.BoxGeometry) 61

——– Esfera (THREE.Sphere) 62

——– Poliedro (THREE. IcosahedronGeometry, THREE.DodecahedronGeometry,  THREE.OctahedronGeometry, THREE.TetrahedronGeometry) 62

——– Cilindro (THREE.CylinderGeometry) 63

——– Cono (THREE.ConeGeometry) 64

——– Torus (THREE.TorusGeometry) 64

——– TorusKnot (THREE.TorusKnotGeometry) 64

—– Geometrías 2D predefinidas. 65

——– Plano (THREE.Plane) 65

——– Círculo y polígono (THREE.Circle) 65

——– Ring (THREE.Ring) 65

—– Geometrías personalizadas. 66

——– Figura 2D libre (THREE.Shape y THREE.ShapeGeometry) 66

——– Dar volumen a una figura plana (THREE.ExtrudeGeometry) 69

——– Texto en 3D (THREE.TextGeometry) 69

— Materiales. 72

—– THREE.MeshBasicMaterial 73

—– THREE.MeshNomalMaterial 74

—– THREE.MeshDepthMaterial 75

—– THREE.MeshLambertMaterial 75

—– THREE.MeshPhongMaterial 76

—– THREE.MultiMaterial 77

— Texturas. 79

—– Texturas múltiples – Mapeado UV.. 81

—– Repetir la textura. 88

—– Transparencias. 91

— Luces. 94

—– Iluminación de ambiente (THREE.AmbientLight) y direccional (THREE.DirectionalLight) 94

—– Luz Hemisférica (THREE.HemisphereLigh) 98

—– Punto de luz (THREE.PoinLight) y Luz focal (THREE.SpotLight) 100

— Sombras. 105

C4 THREEJS: CREANDO NUESTRO MUNDO.. 109

— Cargar modelos externos (loaders) 109

—– Formato  .OBJ (THREE.OBJLoader y THREE.MTLLoader) 111

——– Activar sombras y cambiar propiedades del objeto. 114

——– Solucionando problemas. 116

———– Escala. 116

———– Solucionar problema del servidor WEB.. 116

———– El objeto no muestra la textura. 117

———– Tiempo de carga demasiado lento o reducción de frames durante la ejecución. 118

———– Texturas, gama, colores. 119

—– Formato collada .DAE (THREE.ColladaLoader)  y animaciones de objetos. 119

——– Activación animación del objeto. 123

——– Activar sombras y cambiar propiedades del objeto. 124

——– Solucionar problemas. 125

———– Escala. 125

———– Solucionar problema del servidor WEB.. 125

———– El objeto no muestra la textura. 126

———– Tiempo de carga demasiado lento o lentitud de ejecución. 126

—– Formato nativo de three.js. 127

— Niebla. 131

—– Niebla lineal – THREE.Fog (color, inicio, fin) 131

—– Niebla exponencial – THREE.FoxExp2 (color, densidad) 132

— Crear la base del juego. 134

—– Mejorando bucle de animación (world_v01.js) 139

——– Métodos de $WORLD.. 139

——– Propiedades de $WORLD.. 140

—– Crear un suelo básico (ground_v01.js) 143

——– Mover un objeto por un camino trazado (controls_path_v01.js) 145

— Crear un cielo. 148

—– Crear un cielo con un cubo (Skybox) 148

—– Crear un cielo con una esfera (Skydome) 154

—– Crear un cielo con una esfera y con un degradado. 158

— Crear vegetación y elementos naturales. 161

—– Usar THREE.Sprite para crear hierva y arboles. 162

—– Crear hierva usando planos. 165

— Crear el mapa del juego. 168

—– Cargar varios modelos no animados simultáneamente. 172

—– Crear una barra de progreso y una pantalla de carga. 173

—– Clonar objetos. 174

— Añadir aldeanos y crear sus rutinas de la vida diaria. 178

—– Crear una Inteligencia Artificial básica mediante rutas preestablecidas. 178

—– Clonar objetos animados. 179

— Añadir monstruos y moverlos. 179

—– Crear una Inteligencia Artificial básica mediante movimiento errático. 179

C5 THREEJS: EXPLORAR E INTERACTUAR.. 181

— Controlador básico en primera persona – movimiento por teclado y ratón. 181

— Controladores THREE.JS. 186

—– FirstPersonControler 186

—– Flycontrols. 187

—– OrbitControls. 188

—– PathControls. 188

—– PointerLockControls. 189

— Control de movimiento via webcam (WebRTC) 190

—– Acceso a la webcam (HTML5 getUserMedia API) 191

—– Creando la interfaz 192

—– Captura de las dos imágenes 193

—– Comparar los dos últimos frames de la cámara 194

—– Determinar los botones o zonas de la pantalla que presentan movimiento 195

—– Aplicar el control por movimiento al juego 196

C6 THREEJS: PROXIMOS LIBROS DE LA COLECCIÓN.. 206

— Gestión de la detección de colisiones. 207

— Motor de las leyes físicas. 207

— Creación de una interfaz rica para el juego. 208

— Gestión de los efectos de sonido y música de fondo. 208

— Como almacenar y recuperar los datos de las partidas. 209

— Como empaquetar y distribuir nuestra aplicación. 210

— Como mejorar la Inteligencia Artificial de los monstruos y aldeanos  210

  1. Alguien sabe como hacer para tener autocompletado de texto en algun IDE con THREE.JS intente pero no logro hacerlo y aunque pregunto por todos lados nadie me contesta.

  2. when you will post the next book part 2 of “how to design 3d games ..” ?
    i bought part 1 it is super!
    love to read more..
    thx. michel

  3. Gracias por tu grana aporte! ya estoy estudiando tu libro me preguntaba cuando publicaras los próximos libros???

  4. Pretty section of content. I just stumbled upon your weblog and in accession capital to
    assert that I acquire actually enjoyed account your blog posts.
    Any way I’ll be subscribing to your augment and even I achievement you access consistently
    quickly.

  5. la nota que publicaste me fue demasiado util, voy a aprovecharla y mandarsela a un amigo por fb que estaba buscando lo mismo, muchas gracias por compàrtir la data 😀

  6. Es genial poder contar con una guía paso a paso para que podamos hacer nosotros mismos un juego en 3D de alta calidad. Una oportunidad única.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *