Código fuente panorámico de Webgl
Empaqueteé mi motor 3D en ActiveX de IE en 2004. Desafortunadamente, los usuarios son muy reacios a los complementos del navegador, lo que dificulta seriamente el desarrollo de páginas web en 3D.
Exposición. Aunque durante este período algunos juegos web 3D han logrado buenos resultados a través de complementos de navegador, siempre he creído que no se diferencian de los juegos de PC. A las personas que quieran jugar no les importará descargar el cliente, pero la página web es 3D.
Se utiliza para algo más que juegos.
Hasta hace poco, los principales fabricantes de navegadores han anunciado que ya no admiten la instalación de complementos de navegador. Unity también afirma que WebGL reemplazará a WebPlayer y Flash como la única forma de publicar en páginas web. Es demasiado pronto para decir si esto presagia la llegada de la era web 3D, pero al menos técnicamente, la brecha que alguna vez fue insuperable ha desaparecido silenciosamente.
El año pasado mi equipo recibió un proyecto para crear un software de simulación de decoración similar a 91 Home. En ese momento, solo quería crear un Unity4 útil y de extremo a extremo. Después de todo, este tipo de software es más adecuado para páginas web.
En la actualidad, la plataforma WebGL de Unity5 es solo una versión de experiencia (versión preliminar), con funciones incompletas y algunos problemas. Aquí compartimos parte de la experiencia que acumulamos durante el proceso de trasplante del proyecto para su referencia.
Uno: eficiencia de js
Esto era lo que más me preocupaba antes. Nuestros productos se benefician de la súper eficiencia de PhysX, lo que permite una rápida creación de escenas dinámicas (cálculo previo de luz indirecta). ¿Qué tan eficiente es PhysX después de codificarlo en js? Los resultados experimentales son los siguientes:
El tiempo de horneado de las dos escenas en diferentes plataformas. Unidad (segunda)
Resultados de horneado de los dos escenarios
La eficiencia de ejecución de Firefox es satisfactoria. Sabemos que Unity utiliza asm.js propuesto por Mozilla para mejorar la eficiencia de ejecución de js, pero otros navegadores aún no han optimizado asm.js. Es solo cuestión de tiempo. A excepción de la función de horneado, no hay mucha brecha de rendimiento en otras funciones en diferentes navegadores.
Dos: tamaño del paquete js
Esto también me preocupa. Si el contenido no se puede representar inmediatamente después de cargar la página, el usuario perderá la paciencia y cerrará la página. Después de configurar todas las opciones de optimización, el tamaño del paquete exportado por nuestro producto es el siguiente (después de la compresión):
Programa principal (nombre del proyecto. jsgz): 5,1 m
Paquete de inicialización de memoria ( nombre del proyecto.html.memgz): 2,7 m.
Recursos integrados (nombre del proyecto. Datagz): 1m
Hay que decir que todavía es muy grande. Las fuentes constituyen una gran proporción de los recursos integrados. En el futuro, todas las interfaces podrán convertirse en páginas web, de modo que se puedan utilizar las fuentes del navegador. Dicho esto, el paquete principal es que todo el tiempo de ejecución de Unity y nuestro propio código se compilan juntos, razón por la cual es tan grande. Escribí varias cartas al equipo de Unity y les pregunté si podían compilar sin algunos módulos inútiles. Dijeron que lo considerarían, pero que sería difícil debido al acoplamiento y otras razones. No sé mucho sobre el paquete de inicialización de memoria. asm.js puede ser necesario, espero que Unity lo lance.
Este problema se podrá mejorar cuando WebGL se lance oficialmente.
El proyecto de salida contiene dos carpetas, Release y Compressed, que simplemente permanecen comprimidas. Generado. El archivo htaccess transferirá automáticamente la dirección a esta versión comprimida del paquete y agregará un encabezado de compresión a la solicitud HTTP. El navegador lo descomprimirá automáticamente después de la descarga.
Tres: Plataforma móvil
Este es un tema que preocupa a mucha gente.
Como parte de HTML5, WebGL debería poder ejecutarse en todas las plataformas, ¿verdad? Pero el hecho es que el soporte para WebGL en plataformas móviles no es muy bueno en este momento y quiero abordarlo.
WeChat es aún más difícil. En este sentido, nuestra solución es guardar una serie de panorámicas de 360 grados para cada habitación modelo creada por el usuario. Después de compartir en WeChat, puedes desplazarte pero no puedes editar. Parece importante pensar en tal escenario.
Es cierto que la pequeña pantalla de los teléfonos móviles no es adecuada para una edición 3D compleja. Una vez que las plataformas móviles sean totalmente compatibles con WebGL, aparecerán más aplicaciones 3D adecuadas para teléfonos móviles.
Cuarto: Adaptación de la interfaz gráfica
Unity5 finalmente admite la extensión.
Sombreado, el anterior sólo se puede llamar iluminación retardada. Sin embargo, en el WebGL actual
todavía no funciona en 1.0, solo se puede usar iluminación diferida. Sabemos que WebGL
1.0 corresponde a OpenGL ES 2.0 y WebGL 2.0 corresponde a OpenGL ES.
3.0, por lo que adaptar el proyecto a la plataforma WebGL es básicamente lo mismo que adaptarlo a la plataforma móvil. El estándar WebGL
para WebGL 2.0 acaba de formularse y no sabemos cuándo se lanzarán los navegadores compatibles, por lo que el trabajo de adaptación actual se basa en WebGL.
1.0 es la plataforma de destino. Además de no utilizar MRT, también necesitamos lograr textura y profundidad 3D uniendo cortes 2D.
Las texturas deben codificarse manualmente en formato RGBA, que es muy familiar. Parece haber sido hecho hace 10 años. No puedo evitar lamentar que el desarrollo del 3D en tiempo real haya sido tan lento en los últimos años. Parece que realmente no hay buenas aplicaciones excepto los juegos.
Cinco: Materiales e Iluminación Global
El nuevo sistema de materiales de Unity5 no tiene muchos parámetros ajustables, por lo que seguimos usando nuestros materiales originales, que también son materiales unificados. La nueva sonda de reflexión
se siente muy básica, es solo un AABB en coordenadas mundiales y no se puede rotar. De hecho, BPCEM (Block Projection Cube Mapping)
Environment
Mapping) se puede rotar, pero aún no puede manejar tipos de casas complejos y la reflexión fuera del límite rectangular es muy incorrecta. . Nuestro esquema de reflexión se basa en BPCEM, con un poco de trazado de rayos agregado. Aunque todavía hay algunos problemas, todavía estoy satisfecho con los resultados. Lo más importante es que su velocidad de fotogramas es mucho mayor que la SSR (Screen Space Reflection).
Esquema de reflexión mejorado
Dado que las salas de muestra son creadas por los propios usuarios, no podemos utilizar el sistema de horneado propio de Unity (Enlighten). La capacidad del mapa de luz generado por el método de horneado tradicional. es demasiado grande y no es adecuado para aplicaciones web. Nuestro propio sistema de horneado divide el espacio 3D en cuadrados de 128x16x128 y luego utiliza un 3D.
La textura guarda la información de iluminación de cada malla y luego le agrega mapas de luz 3D a través de una ruta de renderizado personalizada.
Seis: edición del fondo de gestión integral
El fondo de gestión debe realizar las funciones de gestión y carga de modelos, por lo que está puramente unificado.
En el editor. Aquí podemos realizar CruncherPlugin en el modelo, ajustar el material, nombrar, clasificar y poner precio a los productos correspondientes al modelo, y finalmente exportar el Assetbundle y cargarlo. La poderosa API del editor de Unity hace que esto sea muy fácil.
La plataforma de simulación de decoración es sólo un ejemplo de aplicación de web 3D. A medida que WebGL continúa estandarizándose y madurando, aparecerán cada vez más aplicaciones prácticas y no relacionadas con juegos.