Ampliando Unity WebGL con Javascript

Rate this content
Bookmark

Unity puede construir juegos para ejecutarse en un navegador web utilizando herramientas como Emscripten, Web Assembly y WebGL. Proporciona integración con el navegador, utilizando las APIs del navegador para simular APIs nativas. A veces es útil interactuar con el navegador de formas que Unity no proporciona soporte de forma nativa. En esta charla, discutiré cómo Unity construye juegos para la web y cómo ampliar Unity utilizando Javascript para habilitar el soporte de características que de otra manera no se proporcionan.

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Todo el código fuente para este proyecto de WebXR se encuentra disponible en el proyecto de GitHub mencionado en el texto, y puede utilizarse para cualquier propósito.

Se puede interactuar con WebXR desde C sharp llamando a las funciones declaradas como funciones estáticas externas en C sharp, las cuales están etiquetadas para ser codificadas desde la DLL interna en Unity.

Si Unity crea el contexto WebGL sin el atributo compatible con XR, se puede interceptar la función de contexto de WebGL de Emscripten con una función personalizada que inyecte el atributo necesario para que WebXR funcione correctamente.

La memoria asignada en el lado de C sharp es visible desde JavaScript, lo que permite leer y escribir en esta memoria desde JavaScript usando las variables del montón de la inscripción.

Unity necesita interceptar cuando intenta dibujar en el búfer de cuadros del lienzo y reemplazarlo con el búfer de cuadros de WebXR, asegurándose de que Unity dibuje sobre la vista de la cámara incluida en el búfer de cuadros de WebXR.

Sí, existe una hoja de ruta pública de Unity donde se pueden agregar votos y sugerencias para la integración de WebXR y otras funcionalidades, evidenciando el interés y la planificación hacia una integración más completa de WebXR.

El soporte móvil para la exportación web en Unity ha mejorado significativamente desde la versión 2021.2, con características adicionales y compatibilidad mejorada implementadas en las versiones subsiguientes.

Brendan Duncan
Brendan Duncan
32 min
08 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Unity se enfoca en más de 25 plataformas y tecnologías, incluyendo escritorio, móvil y realidad virtual. Utilizan Emscripten para compilar el motor y la lógica del juego en WebAssembly para el desarrollo web. Unity se puede ampliar con complementos para acceder a características del navegador como el modo de realidad aumentada de WebXR. El orador demuestra cómo interceptar las llamadas de Unity al navegador para modificar su comportamiento. Unity está trabajando activamente en el soporte móvil para la exportación web y en mejorar la documentación para ampliar Unity con complementos web.

1. Building for Web and Extending Unity

Short description:

We target over 25 different platforms and technologies, including desktop, mobile, and virtual reality. When building for the Web, we use Emscripten to compile the engine and game logic into WebAssembly. Unity supports different graphics patterns and can be extended with plugins to access browser features. One example is integrating WebXR's augmented reality mode into Unity, which is not supported by Unity's built-in APIs.

One of the things that we do to support this idea is target over 25 different platforms and technologies from desktop, PC, Mac, Linux, to mobile, iPhone, Android, PlayStation, Xbox, Virtual Reality, Augmented Reality and one my favorites, the Web. When we build for the Web, we build like for any other platform where we compile the engine and the game logic together into a final executable. In this case, the final executable is WebAssembly and we use different tools to achieve this.

We use this Emscripten which is a C++ compiler that can generate WebAssembly in JavaScript. All the libraries for the engine and the built-in libraries are written in C++ and all the user code and public APIs are written in .NET C Sharp. We have to compile the .NET C Sharp code into C++ in order for it to be compiled with Emscripten. So we use another tool called iotcp to do this. It takes the .NET assemblies and does some stripping and massaging of those assemblies to reduce the code size and then generates C++ code from there. The C++ code can then be compiled with Emscripten to WebAssembly.

For the graphics side of things, Unity has different graphics patterns that it supports from DirectX, Vulkan, Metal, and OpenGL. On the web, graphics are defined by WebGL, which is a variant of OpenGL. So when we build for the web we tell Unity to use the OpenGL graphics device. And when it does this, Emscripten and the compilation processes will generate WebGL calls for all the OpenGL calls that Unity are making. And for shaders, they're typically written in a shading language, a DirectX shading language in Unity, but those aren't directly supported by WebGL so we have to convert those into GLSL to be used by WebGL. To do this, we have shader compilers that will translate HLSL into GLSL.

We can extend Unity with plugins that provide new APIs to Unity written either in C++ or in this case we'll use JavaScript. With the JavaScript plugins for WebGL, we can extend Unity to access browser features that aren't available in the regular Unity API. We can call these JavaScript functions directly from C-sharp and vice versa you can call C-sharp functions from JavaScript. When you define a JavaScript plugin, you put it into the Assets Plugins folder for WebGL and there's two different types of files from the JavaScript function. The main type of file is a JSLib file. This is where your public APIs from JavaScript will be and define the functions that will be callable from C-sharp. A JSPri file is just arbitrary JavaScript that you can include with your plugin. This will get compiled before the JSLib files so that it can provide JavaScript objects and functions that can be used and shared between your JSLib files. This is just a way to keep your projects clean so that your JSLib files can be your public APIs and you put all the rest of your code in JSPri. There's no requirement to do this. You could just use a single JSLib file. I like to keep things separate. The example of plugin I'll be talking about today is integrating WebXR's augmented reality mode into Unity. Unity currently does not support WebXR with its built-in APIs, but we can extend Unity using plugins to do this. This is not an official plugin.

2. Implementando WebXR y Compartiendo Datos

Short description:

Esta es una implementación mínima de WebXR, que demuestra cómo usarlo. El código fuente está disponible en GitHub. El archivo JSLib declara la API pública para el complemento, permitiendo llamadas directas desde C sharp. La función merge into expone las funciones declaradas a C++ o C sharp. El archivo JSPRE contiene los objetos principales y los métodos para interactuar con WebXR. También se puede llamar a C sharp desde JavaScript utilizando tipos de delegado y funciones de devolución de llamada. Los datos se pueden compartir entre C sharp y JavaScript asignando memoria en el montón de scripting final.

Esto es solo para fines de demostración, y es una implementación muy mínima de WebXR. No estoy implementando todas las características divertidas de WebXR. Solo te estoy mostrando cómo hacer esto. Todo el código fuente para este proyecto se puede encontrar en el proyecto de GitHub aquí, y puedes usarlo para cualquier propósito. El archivo JSLib es donde declaramos la API pública para nuestro complemento. Y aquí proporcionaremos funciones que podemos llamar desde C sharp para inicializar WebXR y obtener su información en su estado actual. Estas funciones se pueden llamar directamente desde C sharp, y esta es la API pública que estamos proporcionando. Y la función merge into aquí es parte de el script, y lo que hace es tomar todas las funciones que estamos declarando en el sujeto y exponerlas a C++ o C sharp. Para llamar a JavaScript desde C sharp, declaramos las funciones como funciones estáticas externas en C sharp, y también las etiquetamos para que se codifiquen desde la DLL interna en Unity. Lo que esto hace es decirle a C sharp que estas funciones no están definidas en el lugar, sino que provienen de una fuente externa, y debido a que WebGL no proporciona soporte para DLL externas, todo se empaqueta junto y el nombre de la DLL interna define que provienen de la DLL incorporada.

Aquí también implemento versiones MTEW de las funciones para plataformas no-WebGL, porque las plataformas no-WebGL no admiten JavaScript. Queremos llamar a versiones ficticias de estas funciones para mantener contento a C sharp y evitar que el editor se queje de que no tienes implementaciones para estas funciones. El archivo JSPRE es donde pongo la mayor parte del código para mantener el archivo JSO simple, y aquí es donde defino todos los objetos principales y métodos para interactuar con WebXR, y aquí puedes poner todas las funciones que se pueden llamar desde tu JSO y gestionar el estado de tu complemento. Nuevamente, no es obligatorio usar un archivo JSPRE. Lo encuentro conveniente. A veces quieres llamar a C sharp desde JavaScript. En algunos casos, tienes una función asíncrona en JavaScript que se llamará en algún momento posterior y quieres llamar a una función de C sharp cuando ese proceso asíncrono haya terminado. Puedes hacer esto declarando un tipo de delegado en C sharp que luego se puede activar desde JavaScript. Puede pasar ese puntero de función de ese tipo de delegado a la función de JavaScript, que puede retenerlo como un puntero, y luego puede llamar a esa función de C sharp cuando haya terminado. Y luego definimos la función de devolución de llamada en C sharp como una función estática. JavaScript no tiene noción de objetos de C sharp, por lo que lo declaramos como una función estática, y desde allí puedes usar variables globales o acceso a singleton para cualquier estado de C sharp que desees. Y desde el lado de JavaScript, podemos usar la función dyne call de la inscripción para llamar la devolución de llamada de C sharp. Esto también puede ser una devolución de llamada de C++. Por lo tanto, el argumento vi para dyne call define el tipo de retorno como void y toma un solo argumento entero y esto puede definir la declaración de función que tienes. Y la devolución de llamada de cambio de estado es la función de puntero que pasé desde C sharp, y estos son los argumentos que estoy pasando a la función de devolución de llamada de C sharp, que es un estado entero. También puedes compartir data entre C sharp y JavaScript. Si asignamos memoria en el lado de C sharp, se asigna en el montón de scripting final y ese montón de scripting final es visible desde JavaScript. Podemos leer y escribir en ese montón de scripting desde JavaScript. Aquí estoy asignando 16 flotantes que se utilizan para almacenar la matriz de vista de WebXR para que pueda actualizar la matriz de vista de la cámara en Unity. Puedo pasar ese data a JavaScript como un simple puntero de función data y luego ahora JavaScript tendrá acceso a ese data.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
31 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Abrazando WebGPU y WebXR con Three.js
JSNation 2024JSNation 2024
27 min
Abrazando WebGPU y WebXR con Three.js
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.