Basics of building 3D games on the Web

[jordicuevas]

https://hacks.mozilla.org/2016/06/basics-of-building-3d-games-on-the-web/

[SoftwareRVG]

Hola Jordi. He visto que este artículo lleva un tiempo por aquí. Normalmente trabajo con Jorge Villalobos. Pero realmente , me interesan los temas 3D animation. ¿ Me puedes asignar la traducción de este artículo ?

Saludos. Rober Villar

[SoftwareRVG]

Conceptos básicos sobre la construcción de juegos 3D en la Web

por Andrzej Mazur

Publicado el 2 Junio, 2016 en Featured Article, Games, MDN, WebGL, y WebVR

Podrías pensar que los juegos 3D son más difíciles de desarrollar que en 2D,debido a la dimensión extra que hay que tener en cuenta,pero es más facil de lo que pudieras creer. Recientemente hemos actualizado la Sección de Juegos en MDN con una colección de tutoriales que incluyen el desarrollo 3D , con un enfoque en las estructuras que ofrece un acceso alternativo para los desarrolladores que han conseguido comenzar a construir y desarrollar juegos para la web y no están familiarizados con WebGL.

WebVR y desarrollo de juegos 3D

La realidad Virtual en el navegador ha hecho grandes progresos este año, y la API de JavaScript conocida como WebVR está en desarrollo. La especificación WebVR está en camino de alcanzar la version 1.0. Esto será un gran hito para la tecnología de la realidad virtual en el navegador . A medida que la API WebVR vaya madurando,irá llegando el momento para moverse desde las demostraciones “experimentales” hasta la fase de aplicaciones y juegos comerciales “preparados para la producción”.

La estructura A-Frame construida sobre Three.js está evolucionando rapidamente. Ya esixten casos de estudio de interesantes proyectos VR como mazmorra de cartón y SECVRITY. La estructura por si misma ha alcanzado la version 0.2.0 y rápidamente se está ganando el interés de la comunidad. Este sencillo pero poderoso acceso utiliza markup para crear experiencias VR que funcionan en todas las plataformas y dispositivos. El resultado: La creación diaria de nuevos tutoriales,demostraciones y plugins.

[SoftwareRVG]

Conceptos básicos sobre la construcción de juegos 3D en la Web

por Andrzej Mazur

Publicado el 2 Junio, 2016 en Featured Article, Games, MDN, WebGL, y WebVR

Podrías pensar que los juegos 3D son más difíciles de desarrollar que en 2D,debido a la dimensión extra que hay que tener en cuenta,pero es más facil de lo que pudieras creer. Recientemente hemos actualizado la Sección de Juegos en MDN con una colección de tutoriales que incluyen el desarrollo 3D , con un enfoque en las estructuras que ofrece un acceso alternativo para los desarrolladores que han conseguido comenzar a construir y desarrollar juegos para la web y no están familiarizados con WebGL.

WebVR y desarrollo de juegos 3D

La realidad Virtual en el navegador ha hecho grandes progresos este año, y la API de JavaScript conocida como WebVR está en desarrollo. La especificación WebVR está en camino de alcanzar la version 1.0. Esto será un gran hito para la tecnología de la realidad virtual en el navegador . A medida que la API WebVR vaya madurando,irá llegando el momento para moverse desde las demostraciones “experimentales” hasta la fase de aplicaciones y juegos comerciales “preparados para la producción”.

La estructura A-Frame construida sobre Three.js está evolucionando rapidamente. Ya esixten casos de estudio de interesantes proyectos VR como mazmorra de cartón y SECVRITY. La estructura por si misma ha alcanzado la version 0.2.0 y rápidamente se está ganando el interés de la comunidad. Este sencillo pero poderoso acceso utiliza markup para crear experiencias VR que funcionan en todas las plataformas y dispositivos. El resultado: La creación diaria de nuevos tutoriales,demostraciones y plugins.

Estos son tiempos excitantes para experimentos de vanguardia con la realidad virtual , pero si eres un entusiasta de los juegos 2D ,como yo, el salto a las tres dimensiones podría ser un reto. Vamos a explorar juntos los conceptos básicos de las tres dimensiones, y veremos como algunas conocidas estructuras pueden ayudarte a alcanzar tus objetivos más rapidamente, y crear impresionantes demostraciones y juegos.

El concepto de juegos 3D en la web es fundamentalmente interpretación WebGL en Canvas , para crear hardware-acelerado rico en animaciones interactivas. La teoría básica gira alrededor del canal de interpretación, que gestiona la información sobre tus creaciones, y las muestra en la pantalla.

Una visión general de las estructuras para el desarrollo de los juegos 3D

Puedes hacerlo todo tu mismo en WebGL puro, o puedes hacerte la vida más fácil, acelerar el desarrollo, y centrarte unicamente en la parte importante de tu idea del juego , con una gran variedad de estructuras disponibles. Los tutoriales de juegos de Mozilla Developer Network incluyen:

• La creación de una demostración básica con Three.js
• La creación de una demostración básica con PlayCanvas
• La creación de una demostración básica con Babylon.js
• La creación de una demostración básica con A-Frame
• Sombreado GLSL

Three.js es la herramienta más popular para las animaciones de WebGL , mientras que PlayCanvas te ofrece la posibilidad de utilizar el motor PlayCanvas o el editor en linea para crear un juego o una demostración. Babylon.js es escogido con frecuencia por su API sencilla y características potentes . Las estructuras A-Frame también pueden ser utilizadas para crear prototipos rápidos de mundos en 3D visibles de inmediato en la realidad virtual. También hemos incluido tutoriales para cubrir conceptos fundamentales como el sombreado. La comprensión de lo que está ocurriendo detrás de las escenas de la estructura te da un gran control sobre como se verá tu juego cuando todo el post-procesamiento sea aplicado.

[SoftwareRVG]

Conceptos básicos sobre la construcción de juegos 3D en la Web

por Andrzej Mazur

Publicado el 2 Junio, 2016 en Featured Article, Games, MDN, WebGL, y WebVR

Podrías pensar que los juegos 3D son más difíciles de desarrollar que en 2D,debido a la dimensión extra que hay que tener en cuenta,pero es más facil de lo que pudieras creer. Recientemente hemos actualizado la Sección de Juegos en MDN con una colección de tutoriales que incluyen el desarrollo 3D , con un enfoque en las estructuras que ofrece un acceso alternativo para los desarrolladores que han conseguido comenzar a construir y desarrollar juegos para la web y no están familiarizados con WebGL.

WebVR y desarrollo de juegos 3D

La realidad Virtual en el navegador ha hecho grandes progresos este año, y la API de JavaScript conocida como WebVR está en desarrollo. La especificación WebVR está en camino de alcanzar la version 1.0. Esto será un gran hito para la tecnología de la realidad virtual en el navegador . A medida que la API WebVR vaya madurando,irá llegando el momento para moverse desde las demostraciones “experimentales” hasta la fase de aplicaciones y juegos comerciales “preparados para la producción”.

La estructura A-Frame construida sobre Three.js está evolucionando rapidamente. Ya esixten casos de estudio de interesantes proyectos VR como mazmorra de cartón y SECVRITY. La estructura por si misma ha alcanzado la version 0.2.0 y rápidamente se está ganando el interés de la comunidad. Este sencillo pero poderoso acceso utiliza markup para crear experiencias VR que funcionan en todas las plataformas y dispositivos. El resultado: La creación diaria de nuevos tutoriales,demostraciones y plugins.

Estos son tiempos excitantes para experimentos de vanguardia con la realidad virtual , pero si eres un entusiasta de los juegos 2D ,como yo, el salto a las tres dimensiones podría ser un reto. Vamos a explorar juntos los conceptos básicos de las tres dimensiones, y veremos como algunas conocidas estructuras pueden ayudarte a alcanzar tus objetivos más rapidamente, y crear impresionantes demostraciones y juegos.

El concepto de juegos 3D en la web es fundamentalmente interpretación WebGL en Canvas , para crear hardware-acelerado rico en animaciones interactivas. La teoría básica gira alrededor del canal de interpretación, que gestiona la información sobre tus creaciones, y las muestra en la pantalla.

Una visión general de las estructuras para el desarrollo de los juegos 3D

Puedes hacerlo todo tu mismo en WebGL puro, o puedes hacerte la vida más fácil, acelerar el desarrollo, y centrarte unicamente en la parte importante de tu idea del juego , con una gran variedad de estructuras disponibles. Los tutoriales de juegos de Mozilla Developer Network incluyen:

• La creación de una demostración básica con Three.js
• La creación de una demostración básica con PlayCanvas
• La creación de una demostración básica con Babylon.js
• La creación de una demostración básica con A-Frame
• Sombreado GLSL

Three.js es la herramienta más popular para las animaciones de WebGL , mientras que PlayCanvas te ofrece la posibilidad de utilizar el motor PlayCanvas o el editor en linea para crear un juego o una demostración. Babylon.js es escogido con frecuencia por su API sencilla y características potentes . Las estructuras A-Frame también pueden ser utilizadas para crear prototipos rápidos de mundos en 3D visibles de inmediato en la realidad virtual. También hemos incluido tutoriales para cubrir conceptos fundamentales como el sombreado. La comprensión de lo que está ocurriendo detrás de las escenas de la estructura te da un gran control sobre como se verá tu juego cuando todo el post-procesamiento sea aplicado.

Ventajas de las estructuras

¿Cuales son las ventajas de utilizar una estructura para el desarrollo de un juego? Las estructuras proporcionan beneficios y accesos directos . Aqui hay algunos ejemplos:

Puedes descargar trabajo que parece repetitivo en comparación con otras partes de la creación del juego: Cargar activos, reproducir la escena, o dibujar cualquier cosa en la pantalla. No tendrás que ocuparte de la configuración específica de cámaras, luces, y demás. En su lugar, puedes crear alguna geometría, añadir animación, y olvidarte de todo lo demás; simplemente trabajarás y veras tu creación inmediatamente.

No tendrás que preocuparte por la diferencia de la implementación de carácteristicas por los navegadores; que esta a cargo de la estructura , y expuesto para el nucléo de tu juego. Algunas veces unas pocas lineas de código específico de la estructura hacen exactamente lo mismo que docenas de lineas de javascript puro implementado. (Recuerda que no siempre es el caso.)

Diferentes estructuras ofrecen diferentes experiencias: Three.js generalmente se utiliza para crear animaciones; Babylon.js, por otro lado, se centra en la creación de juegos. También puede ocuparse como anti-distorsion en tu lugar. Ambas estructuras pueden emplearse con éxito para la creación de juegos, por lo tanto la elección realmente dependerá de tus preferencias y de los objetivos de tu proyecto.

Algunas estructuras añaden incluso una capa extra de características y se ofrecen construidos motores físicos,detección de colisión, o sistemas de partículas. Toda esa infraestructura está disponible para utilizar en tu proyecto sin los problemas de compatibilidad por los que era necesario utilizar plugins personalizados o escribir estas funcionalidades desde cero.

Es más fácil iniciar y rápidamente prototipar una escena utilizando estructuras ; ofrecen pocas complicaciones para construir creaciones complejas. Mira como el código fuente de un simple desbloqueo de un juego 2D en javascript puro es más extenso y complicado que el mismo juego en Phaser. Utilizando una estructura ahorras tiempo, por lo que realmente puedes centrarte unicamente en la construcción.

[SoftwareRVG]

Traducción lista .

Aquí os dejo el enlace de edición de Google-Docks: https://docs.google.com/document/d/12fPBSpt59DjOVgqYP2Z5gH0f30TLvUh7pv_I_mrYnLA/edit#heading=h.70xsom63buwy

Saludos a todos: Rober villar @SoftwareRVG

---

Conceptos básicos sobre la construcción de juegos 3D en la Web

por Andrzej Mazur

Publicado el 2 Junio, 2016 en Featured Article, Games, MDN, WebGL, y WebVR

Podrías pensar que los juegos 3D son más difíciles de desarrollar que en 2D,debido a la dimensión extra que hay que tener en cuenta,pero es más facil de lo que pudieras creer. Recientemente hemos actualizado la Sección de Juegos en MDN con una colección de tutoriales que incluyen el desarrollo 3D , con un enfoque en las estructuras que ofrece un acceso alternativo para los desarrolladores que han conseguido comenzar a construir y desarrollar juegos para la web y no están familiarizados con WebGL.

WebVR y desarrollo de juegos 3D

La realidad Virtual en el navegador ha hecho grandes progresos este año, y la API de JavaScript conocida como WebVR está en desarrollo. La especificación WebVR está en camino de alcanzar la version 1.0. Esto será un gran hito para la tecnología de la realidad virtual en el navegador . A medida que la API WebVR vaya madurando,irá llegando el momento para moverse desde las demostraciones “experimentales” hasta la fase de aplicaciones y juegos comerciales “preparados para la producción”.

La estructura A-Frame construida sobre Three.js está evolucionando rapidamente. Ya esixten casos de estudio de interesantes proyectos VR como mazmorra de cartón y SECVRITY. La estructura por si misma ha alcanzado la version 0.2.0 y rápidamente se está ganando el interés de la comunidad. Este sencillo pero poderoso acceso utiliza markup para crear experiencias VR que funcionan en todas las plataformas y dispositivos. El resultado: La creación diaria de nuevos tutoriales,demostraciones y plugins.

Estos son tiempos excitantes para experimentos de vanguardia con la realidad virtual , pero si eres un entusiasta de los juegos 2D ,como yo, el salto a las tres dimensiones podría ser un reto. Vamos a explorar juntos los conceptos básicos de las tres dimensiones, y veremos como algunas conocidas estructuras pueden ayudarte a alcanzar tus objetivos más rapidamente, y crear impresionantes demostraciones y juegos.

El concepto de juegos 3D en la web es fundamentalmente interpretación WebGL en Canvas , para crear hardware-acelerado rico en animaciones interactivas. La teoría básica gira alrededor del canal de interpretación, que gestiona la información sobre tus creaciones, y las muestra en la pantalla.

Una visión general de las estructuras para el desarrollo de los juegos 3D

Puedes hacerlo todo tu mismo en WebGL puro, o puedes hacerte la vida más fácil, acelerar el desarrollo, y centrarte unicamente en la parte importante de tu idea del juego , con una gran variedad de estructuras disponibles. Los tutoriales de juegos de Mozilla Developer Network incluyen:

• La creación de una demostración básica con Three.js
• La creación de una demostración básica con PlayCanvas
• La creación de una demostración básica con Babylon.js
• La creación de una demostración básica con A-Frame
• Sombreado GLSL

Three.js es la herramienta más popular para las animaciones de WebGL , mientras que PlayCanvas te ofrece la posibilidad de utilizar el motor PlayCanvas o el editor en linea para crear un juego o una demostración. Babylon.js es escogido con frecuencia por su API sencilla y características potentes . Las estructuras A-Frame también pueden ser utilizadas para crear prototipos rápidos de mundos en 3D visibles de inmediato en la realidad virtual. También hemos incluido tutoriales para cubrir conceptos fundamentales como el sombreado. La comprensión de lo que está ocurriendo detrás de las escenas de la estructura te da un gran control sobre como se verá tu juego cuando todo el post-procesamiento sea aplicado.

Ventajas de las estructuras

¿Cuales son las ventajas de utilizar una estructura para el desarrollo de un juego? Las estructuras proporcionan beneficios y accesos directos . Aqui hay algunos ejemplos:

Puedes descargar trabajo que parece repetitivo en comparación con otras partes de la creación del juego: Cargar activos, reproducir la escena, o dibujar cualquier cosa en la pantalla. No tendrás que ocuparte de la configuración específica de cámaras, luces, y demás. En su lugar, puedes crear alguna geometría, añadir animación, y olvidarte de todo lo demás; simplemente trabajarás y veras tu creación inmediatamente.

No tendrás que preocuparte por la diferencia de la implementación de carácteristicas por los navegadores; que esta a cargo de la estructura , y expuesto para el nucléo de tu juego. Algunas veces unas pocas lineas de código específico de la estructura hacen exactamente lo mismo que docenas de lineas de javascript puro implementado. (Recuerda que no siempre es el caso.)

Diferentes estructuras ofrecen diferentes experiencias: Three.js generalmente se utiliza para crear animaciones; Babylon.js, por otro lado, se centra en la creación de juegos. También puede ocuparse como un anti-distorsion en tu lugar. Ambas estructuras pueden emplearse con éxito para la creación de juegos, por lo tanto la elección realmente dependerá de tus preferencias y de los objetivos de tu proyecto.

Algunas estructuras añaden incluso una capa extra de características y se ofrecen construidos motores físicos,detección de colisión, o sistemas de partículas. Toda esa infraestructura está disponible para utilizar en tu proyecto sin los problemas de compatibilidad por los que era necesario utilizar plugins personalizados o escribir estas funcionalidades desde cero.

Es más fácil iniciar y rápidamente prototipar una escena utilizando estructuras ; ofrecen pocas complicaciones para construir creaciones complejas. Mira como el código fuente de un simple desbloqueo de un juego 2D en javascript puro es más extenso y complicado que el mismo juego en Phaser. Utilizando una estructura ahorras tiempo, por lo que realmente puedes centrarte unicamente en la construcción.

En conclusión

Por otro lado, es bueno aprender primero el lenguaje para saber como están construidas las estructuras, porque este es el modo y no otro, si no están haciendo exáctamente lo que quieres que hagan. Las estructuras tienden a estar o no estar de moda, y esto puede ser un esfuerzo añadido para aprender su síntasix. Despues de todo, siempre puedes escribir una sencilla característica por ti mismo en JavaScript puro - Que es una técnica de gran alcance.

Echa un vistazo a mi repositorio GitHub para ver una colección de demostraciones que muestran como construir una sencilla escena 3D con las herramientas proporcionadas , o tambien las puedes ver en linea.

Recuerda:No tienes que utilizar ninguna estructura específica, y puedes lograr resultados comparables en JavaScript puro con WebGL. Las demostraciones que se muestran arriba fueron seleccionadas para ilustrar como utilizar las herramientas más populares de este momento. Si crees que falta algo, puedes escribir sobre ello y lo añadire a la colección de demostraciones anterior en GitHub; todas las contribuciones son bienvenidas. Y si no he incluido tu estructura favorita , puedes sugerirlo en los comentarios a pie de página o escribir una presentación tu mismo, para que más gente la conozca.

No dudes en utilizar el código fuente como tu quieras — por ejemplo, como un código repetitivo para tu nuevo proyecto 3D — ¡ Y recuerda mostrarnos lo que has construido encima !.Nos encantaría escuchar aquí tus comentarios o en el repositorio de Github.

Acerca de Andrzej Mazur

Desarrollador de juegos HTML5, fundador del estudio independiente Enclave Games ,editor de boletines semanales en Gamedev.js , y creador de la competición js13kGames . Locutor técnico apasionado con las nuevas tecnologías sobre la Web abierta, y emocionado con la WebVR.

```

• end3r.com
• @end3r

Más artículos de Andrzej Mazur…

```

---

No hay comentarios todavía

```

```

Publica tu comentario

Cancel Reply

Tu nombre _

Tu correo electrónico _

Spam robots, please fill in this field. Humans should leave it blank.

Tu comentario

Enviar comentario

Avisarme de los siguientes comentarios via correo electrónico. También puedes subscribirte sin comentarios.

[jvillalobos]

Publicado: https://www.mozilla-hispano.org/conceptos-basicos-para-construir-juegos-3d-en-la-web/

Gracias!