Práctica de optimización y desarrollo interactivo en 3D a gran escala

fondo de desarrollo

Gracias a la explosión del concepto "Metaverso" hace un tiempo, diversas empresas han lanzado actividades o canales utilizando escenas 3D.

En comparación con la página 2D tradicional, la escena 3D tiene una dimensión más y se puede mostrar más contenido en la misma pantalla, que puede mostrar completamente la información de objetos y productos.

La desventaja correspondiente es que el método de uso del usuario cambia y el usuario necesita costos de aprendizaje adicionales. Además, la cantidad de desarrollo, recursos de arte y equipos para generar modelos 3D requeridos en la etapa inicial también aumentan los costos.

En este contexto, nuestro equipo recibió una solicitud de desarrollo para un proyecto interactivo de Food Channel. Esperamos que a través de la visualización e interacción de escenas 3D, como un intento y exploración de compras futuras, podamos satisfacer las necesidades de los usuarios de una hermosa y futuro de novela. . Cree escenarios de compras y entretenimiento, y brinde a los usuarios una experiencia de compra maravillosa.

Selección de marco frontal

En comparación con los proyectos 2D anteriores, el proyecto 3D ha cambiado principalmente en el rendimiento del cliente. Con la esperanza de no depender del soporte del cliente de la aplicación y poder ejecutarse en tantos entornos como sea posible, nuestra primera solución es realizar la realización del proyecto 3D en el lado web.

kit de desarrollo

En primer lugar, consideramos kits de desarrollo maduros, como unity/egret, etc., pero estos kits de desarrollo tienen algunos problemas que no podemos evitar, como:

El uso comercial requiere una tarifa
Necesita ser desarrollado en otros lenguajes (como C#), lo que le costará mucho al equipo aprender
El tamaño del archivo de la salida empaquetada es demasiado grande
Los documentos oficiales no son lo suficientemente detallados y la curva de aprendizaje es inestable.

Nombre del motor/dimensiones de comparación	Precio de uso (peso 50%	Primeros pasos con la creación de scripts (peso 30%	Construcción de escena (peso 20%	Formato de modelo de soporte (peso 10%	La riqueza de la información comunitaria (peso 30%	Apoyar la publicación web (un voto de veto
unidad 3d	3	7	10	8	10	Y
Laya	4	9	7	7	7	Y
Garceta	10	8	7	7	6	Y
Cocos2d-js						norte
Godot	10	7	7	8	7	Y

Debido a las razones anteriores, no hay una opción satisfactoria para el equipo en el kit de desarrollo y buscamos herramientas de desarrollo en otras direcciones.

Biblioteca de renderizado de código abierto

Además, se comparan dos bibliotecas de renderizado 3D que son ampliamente utilizadas por el front-end web:

◦Los componentes provistos por three.js son pequeños en granularidad y relativamente básicos, y pueden hacer un alto grado de desarrollo secundario personalizado, pero si necesita desarrollar un proyecto interactivo, necesita desarrollar más componentes

◦babylon.js no solo proporciona componentes básicos de grano pequeño, sino que también encapsula componentes listos para usar. Y viene con herramientas de medición del rendimiento, que brindan métodos de depuración convenientes y estrategias de optimización.

Después de probar varios kits de desarrollo/bibliotecas de representación en el equipo, finalmente se seleccionó babylon.js como la biblioteca de capa de representación del proyecto, y se volvió a desarrollar la lógica empresarial en los componentes proporcionados por ella.

Construcción de la escena del proyecto.

jerarquía de procesamiento

El nivel de representación del proyecto generalmente se divide en dos capas: capa de escena 3D y capa HUD

La capa de escena 1.3D, como su nombre indica, representa escenas en 3D, que consisten en modelos interactivos como modelos de personajes, modelos de construcción y cofres del tesoro.

2. La capa HUD representa el contenido de la interfaz de usuario en 2D, como botones interactivos, ventanas emergentes y listas de productos requeridas por la empresa.

Originalmente, babylonjs admite la representación mixta de contenido 3D y 2D, pero si usa babylonjs para ambas, debe usar una resolución uniforme al configurar los dos contenidos, pero en los dispositivos móviles actuales, puede admitir la resolución de píxeles (como el iPhone 14). La resolución de píxeles es 1170x2532) solo una pequeña parte de la representación no se tartamudea. En la mayoría de los dispositivos, solo puede admitir un funcionamiento fluido a una resolución lógica (como la resolución lógica del iPhone 14 es 390x844), pero configurar dicha resolución hará que la representación de la capa 2D sea borrosa, así que use un método de capas para la representación.

La capa de escena 3D es renderizada por babylonjs, mientras que la capa HUD se renderiza utilizando el método DOM tradicional a través del marco de reacción.

Segunda capa de renderizado 3D

La capa de renderizado se divide en capa de escena 3D y capa HUD, lo que trae un problema.Cuando es necesario renderizar contenido 3D en la capa HUD, como mostrar modelos 3D, es necesario agregar otra capa de capa de renderizado 3D, y la capa de representación 3D no se detiene. El método de representación responde a las operaciones del usuario y reproduce animaciones, lo que consume una gran cantidad de recursos informáticos de la CPU y la GPU, y también ocupa el espacio de memoria para almacenar información de vértice del modelo y texturas de mapas. Por lo tanto, cuando coexisten múltiples capas de renderizado 3D, se requiere cierta gestión para optimizar el rendimiento. Empleamos la siguiente estrategia para administrar múltiples capas de representación 3D:

◦ Reinstalación al mostrar otra capa de representación 3D y suspensión de la representación de la capa de representación 3D original

◦ Destruir cuando no se necesita visualización, restaurar la llamada al método de renderizado de la capa de renderizado 3D original

Con el fin de minimizar la ocupación de recursos y mejorar el rendimiento de renderizado del proyecto.

Desarrollo de componentes interactivos

Comprobación de impacto

babylonjs viene con un método para detectar colisiones entre modelos, pero si usa el modelo de alta precisión provisto por el diseñador para llamar directamente al método de detección de colisiones, la cantidad de cálculo será muy grande. Aunque no hay un fenómeno de retraso serio en el equipo de prueba, ha sido Caliente el dispositivo.

Por lo tanto, es necesario utilizar un modelo invisible de "pared de aire" de cara delgada que rodee al modelo para la detección de colisiones. En la etapa inicial del proyecto, el diseñador debe proporcionar el modelo de "pared de aire", y se crea un modelo envolvente de baja precisión en el software de modelado basado en el modelo original. En el desarrollo iterativo posterior, nuestro equipo desarrolló una herramienta de "generación de paredes de aire con un solo clic", que genera automáticamente modelos de baja precisión, reduce la cantidad de recursos entregados por los diseñadores y reduce la posibilidad de errores al actualizar los modelos.

Evitación de obstáculos de la lente

Debido a que el proyecto utiliza una lente en tercera persona, la lente está a cierta distancia del modelo del personaje. Cuando el personaje camina o el usuario controla el ángulo, la lente puede chocar con el modelo arquitectónico o el modelo de escena, lo que resulta en el fenómeno de "lente que pasa a través del modelo".

La lente incorporada de babylonjs no tiene la función de evitar el modelo.Cuando el producto no tiene experiencia de procesamiento, hicimos las siguientes dos soluciones:

La periferia de la lente está rodeada por un modelo invisible, y la detección de colisión se realiza con los modelos de edificios y escenas al igual que los personajes, de modo que la lente no entre en el modelo.

La ventaja de este enfoque es que se puede utilizar el método de detección de colisiones incorporado y no se requiere desarrollo adicional. Pero las deficiencias también son obvias: el usuario no tiene expectativas de la colisión entre la lente y el modelo, y el usuario siempre siente que la lente no es natural y está fuera de control.

La cámara y el personaje están conectados por un modelo de palo, y la detección de colisión con los modelos de edificio y escena también se llama en el modelo de palo.Cuando ocurre una colisión en una cierta posición del modelo de palo, la cámara se moverá a la posición entre el personaje y el punto de colisión.Al tiempo que evita que la lente entre en el modelo, también evita que el modelo se intercale entre el personaje y la lente, causando el problema de que el usuario no puede encontrar el personaje.

El efecto que se logra con este método está en línea con la lógica de movimiento de lente de algunos juegos 3D que también son perspectivas en tercera persona, el usuario se siente más natural y no perderá el control. La cantidad de desarrollo adicional introducido también está dentro de un rango controlable.

Entrega de recursos con el equipo de diseño

formato de modelo

Entre los muchos formatos de modelos 3D, elegimos el formato .gltf. En comparación con otros formatos de modelo, .gltf puede reducir los datos redundantes en formatos 3D que no están relacionados con la representación, lo que garantiza un tamaño de archivo más pequeño.

En la actualidad, los materiales 3D son relativamente grandes, lo que sin duda es fatal para la experiencia de carga del terminal móvil. Por lo tanto, un formato con un tamaño más pequeño también tiene un mayor peso de preferencia.

Además, .gltf es un resumen de varios formatos 3D en las últimas dos décadas. Utiliza la estructura de datos óptima para garantizar la máxima compatibilidad y escalabilidad, y admite más expansión mientras tiene una gran capacidad. , como soporte para múltiples texturas, múltiples animaciones, etc

Así que .gltf se convirtió en el único formato de material que acordamos con el visual.

Proceso de salida del modelo

Originalmente, el software de modelado utilizado por el flujo de trabajo del diseñador era C4D, pero en el proceso de transferencia de recursos, encontramos varios problemas:

1. Falta de función de archivo gltf de exportación. Algunas versiones de C4D no pueden exportar modelos en formato gltf; algunas versiones pueden exportar, pero hay un problema con la exportación. Y debido a algunos problemas de compatibilidad con el renderizador utilizados por el diseñador, la versión C4D no se puede actualizar fácilmente.

2. El tamaño del modelo exportado no es uniforme. Tal vez debido a alguna versión de los problemas de exportación de C4D, o algunas configuraciones en C4D no pudieron exportarse al archivo gltf, el tamaño del modelo exportado por el diseñador varias veces no es uniforme, por ejemplo, el modelo de personaje es varias veces más grande que el modelo arquitectónico.

3. Se pierde la información del material de exportación. Cuando el diseñador está modelando, debido a que el modelo se puede usar en múltiples canales, como renderizar imágenes promocionales, la mayoría de los casos usará un renderizador de terceros para renderizar. En este momento, los materiales únicos de estos renderizadores se pueden usar en el modelo. Cuando estos materiales se exporten a archivos gltf, la información de estos materiales únicos se perderá. Al importarlo a la escena en la página, los diseñadores encontrarán que el efecto mostrado está lejos de lo que vieron en el software de modelado.

Después de muchas discusiones con los diseñadores, hemos establecido un flujo de trabajo para exportar modelos:

Después de completar el modelado C4D, exporte el archivo en formato FBX y luego impórtelo en el software blender que admite gltf mejor. Los diseñadores pueden obtener una vista previa de si sus materiales se pierden durante el proceso de transferencia. El modelo en el archivo gltf exportado por blender Can también mantener un tamaño constante.

iluminación preestablecida

En la configuración de renderizado predeterminada, colocamos la salida del modelo desde el lado del diseño en la escena, y con la fuente de luz, solo hay cambios en la luz y la sombra, no hay sombras y faltan algunos efectos tridimensionales.

Durante nuestros intentos de incorporar sombras, se descubrió que el rendimiento se vio gravemente afectado. Después de consultar el principio de renderizado, descubrí que cada vez que se agrega una sombra en un plano, es equivalente a renderizar la escena una vez más, y la presión de renderizado se duplica.

Después de comunicarse con el lado del diseño, se decidió agregar previamente la proyección del edificio en la textura del piso. Este método puede tener un mejor efecto en la mayoría de las escenas con modelos fijos, y las sombras de los personajes se pueden simular moviéndose con el modelo usando imágenes estáticas.

optimización de renderizado

textura comprimida

Durante el período de desarrollo, se descubrió que es fácil que se produzcan flashbacks en dispositivos iPhone más antiguos. Debería ser que la memoria utilizada por la página supera el límite superior.

El recurso más grande utilizado en el proyecto es el archivo modelo gltf. Verifique el contenido del archivo. El mapa de textura representa una gran parte del volumen. Después de analizar los recursos, se encuentra que el tamaño de muchas texturas es 3K (3072x3072 De acuerdo con el principio de representación WebGL, no importa cuál sea el formato original del recurso de la textura, y finalmente debe descomprimirse antes de la representación, lo que significa que una textura debe ocupar 3072 x 3072 x 3 Byte = 27 MB en memoria, y debe transmitirse a la GPU después de la descompresión, lo cual es muy probable cuando se procesan varias texturas al mismo tiempo. Ocupa mucha memoria.

Después de comunicarse con el lado del diseño, se acordó reemplazar las texturas de menor resolución en algunos modelos cuya distancia de visualización no puede ser muy cercana.

Además, por lo general, las imágenes en formato png/jpg utilizadas en proyectos 2D no son adecuadas para la renderización 3D. Deben pasar por el proceso de descompresión antes mencionado antes de que la GPU pueda leerlas.

En el campo del renderizado 3D, existen otros formatos adecuados para la lectura de GPU, como ETC compatible con Android, PVRTC compatible con iOS y una nueva generación de formato de textura comprimida estándar ASTC, que pueden ser leídos por GPU sin descompresión, lo que puede reducir en gran medida el intermedio La capacidad de memoria ocupada por la descompresión.

En el proyecto, usamos la herramienta gltf-transform para reducir la resolución de la textura y convertir el formato.

reducción de modelo

El proceso de representación de un modelo en WebGL consiste en usar primero la información de vértice del modelo para determinar las caras triangulares y luego calcular el color que se mostrará en cada cara triangular. Por lo tanto, si se puede reducir el número de caras del modelo, se puede reducir la cantidad de cálculo para cada representación y se puede reducir el tiempo de representación requerido para cada fotograma.

Como se mencionó anteriormente, cuando el diseñador está modelando, puede encontrarse con la necesidad de generar renderizados, sin optimizar el renderizado en tiempo real, por lo que se pueden usar demasiadas superficies en algunos lugares.

Haciendo referencia a la experiencia de optimización 1 de otros estudiantes del equipo, la herramienta de transformación gltf se utiliza para reducir automáticamente la superficie del modelo. Después de una comunicación repetida con el probador de diseño, determinamos la relación de parámetros = 0, error = 0.0001

procesamiento por lotes

Hay un concepto de llamada de dibujo en el renderizado 3D. Una llamada de dibujo es una instrucción de dibujo de la CPU a la GPU. En una instrucción, la CPU transmitirá la información del triángulo que se dibujará a la GPU y cómo calcular el color en el triángulo.Este método se denomina material en un lenguaje que los humanos entienden. Entonces, una llamada de sorteo solo puede dibujar superficies del mismo material.

Debido a que cada sorteo tiene estas acciones de preparación, por lo general, dos sorteos llevarán más tiempo que uno.

En el archivo del modelo, es posible que las superficies del mismo material no estén definidas en el mismo modelo, por lo que la CPU dividirá estas superficies en diferentes instrucciones de dibujo, aumentando el número de llamadas de dibujo.

Hay un método de optimización para esta situación llamado procesamiento por lotes, que puede fusionar estas caras del mismo material para que puedan dibujarse en una sola llamada.

No hay ninguna herramienta que nos ayude a procesar los archivos del modelo en este trabajo, pero cuando cargamos los archivos del modelo en el front-end, podemos atravesar la malla del modelo y combinarlos usando el mismo material.

Cabe señalar que la malla con animación no se puede manejar de esta manera, porque el centro del objeto fusionado cambiará, por ejemplo, después de fusionar dos bolas autogiratorias, girarán alrededor del punto medio de las dos bolas.

Iteraciones posteriores

Modele la carga diferida y la carga jerárquica

Aunque la escena que muestra el proyecto temporal no es muy grande, y la carga y el renderizado simultáneos no ejercen demasiada presión sobre el dispositivo, pero cuando la escena crece hasta cierto punto, es necesario introducir la carga diferida y la carga jerárquica de el modelo.

◦Estrategia de carga diferida: cargue e inserte el modelo en la escena cuando la cámara se acerque lo suficiente y destruya el modelo lo suficientemente lejos de la cámara.

◦Estrategia de carga gradual: cuando la cámara esté lejos, cargue un modelo de menor precisión y luego cambie a un modelo de mayor precisión cuando esté más cerca.

Las dos estrategias anteriores son las estrategias de carga utilizadas por los juegos 3D más grandes ahora, que pueden reducir la cantidad de caras dibujadas en la misma pantalla y reducir la presión de representación.

Representación graduada

En la actualidad, existe una gran brecha en el rendimiento de los dispositivos para acceder a proyectos 3D.Algunos pueden ejecutarse sin problemas con efectos especiales y otros básicamente solo pueden ejecutarse en la resolución del dispositivo.

babylonjs viene con una función de renderizado jerárquico, que puede detectar la velocidad de fotogramas en ejecución en tiempo real para determinar si se debe degradar. En iteraciones posteriores, se puede agregar una estrategia de renderizado jerárquico desde resolución de píxeles más efectos especiales hasta renderizado básico de resolución de dispositivo.

iluminación en tiempo real

Después de usar la estrategia de representación jerárquica anterior, puede agregar efectos de luz y sombra en tiempo real en dispositivos con mejor rendimiento y reemplazar dinámicamente las texturas precocidas.

constructor de escena

En el proceso de desarrollo del proyecto anterior, los diseñadores, los productos y las operaciones necesitaban generar demostraciones a través del front-end para experimentar aproximadamente el efecto de la escena 3D y decidir cómo ajustar en el siguiente paso. Para resolver este problema, nuestro equipo ha desarrollado una herramienta de creación de escenas en 3D. Los usuarios pueden crear escenas en 3D cargando archivos gltf y obtener una vista previa del efecto de representación en tiempo real.

Y agregó componentes interactivos depositados en el proyecto para generar rápidamente proyectos de escena 3D.

Fuente de referencia:

Hable sobre la compresión de archivos glTF https://jelly.jd.com/article/61057292df18aa019e8a2967

Autor: JD Retail Hu Junwen

Fuente: Comunidad de desarrolladores de JD Cloud