Otimização de gêmeo digital de ponte rolante no edge: 12fps a 58fps

Já abordámos a arquitetura de Gêmeo Digital, o modelo de dados AAS e a calibração por simulação. Neste artigo, vamos diretos ao problema mais prático: como fazer o Gêmeo Digital funcionar sem travamentos num computador industrial.

A cena 3D do Gêmeo Digital de uma ponte rolante não é executada numa estação de trabalho de alta gama, mas sim num computador industrial da oficina (i5-8500, gráficos integrados, 4GB de memória compartilhada). Com esta configuração, renderizar fluentemente um modelo de ponte rolante com 200.000 triângulos mais o ambiente do edifício industrial é inviável sem otimização. Nos testes, obtivemos 12fps antes da otimização e 58fps depois — essa diferença de 46fps é exatamente o que vamos explorar neste artigo.

Redução de malha: de 500.000 para 50.000 faces

O modelo 3D da ponte rolante no Gêmeo Digital provém normalmente de modelos CAD exportados do BOM de projeto ou de ficheiros STEP, atingindo facilmente 500.000 a 1.000.000 de triângulos. Este nível de precisão é aceitável em simulações estruturais, mas é um desastre quando renderizado num navegador Web. A redução de malha é o primeiro passo obrigatório.

1.1 Estratégia de Redução de Polígonos

O princípio central da redução é "priorizar superfícies planas" — áreas extensas e planas do modelo (alma da viga principal, placa de cobertura, laterais da cabeceira) são fundidas com detecção planar, preservando os contornos das arestas; já superfícies curvas e cordões de solda exigem uma taxa de redução menor para evitar deformação. Fluxo de trabalho recomendado: primeiro, use a decimação planar para reduzir as áreas planas ao mínimo de polígonos; depois, aplique a decimação por colapso para uma segunda otimização nas regiões restantes, com a meta de manter o modelo abaixo de 50.000 polígonos.

1.2 Ferramentas Recomendadas

• Blender Decimate Modifier: gratuito, suporta decimação planar e por colapso, com controle preciso da taxa de redução.
• Simplygon: ferramenta industrial de redução automática, com geração automática de cadeias LOD; o custo é elevado, mas o resultado é excelente.
• MeshLab: open-source, adequado para processamento em lote.

1.3 Limites da Redução

Menos polígonos nem sempre é melhor. Uma redução excessiva deforma o contorno do modelo, algo facilmente percetível. A regra prática é: após a redução, a diferença visual entre o modelo reduzido e o original, em estado estático, deve ser impercetível a olho nu. Na prática, sobreponha o modelo original e o reduzido, ative a visualização semitransparente e verifique se o desvio de contorno é inferior a 1 pixel.

2. Carregamento por Níveis LOD

LOD (Level of Detail) é a técnica de otimização mais consolidada em renderização 3D — detalhe à distância próxima, contorno à distância. No cenário de Gêmeo Digital, o operador raramente analisa os detalhes do cordão de solda de uma ponte rolante específica; a maior parte do tempo é dedicada à observação do funcionamento de várias pontes rolantes em vista panorâmica.

2.1 Conceção dos Níveis LOD

Os níveis LOD são divididos em 4 com base na distância de visualização: LOD0 (detalhe fino, 0–50 m), LOD1 (médio, 50–200 m), LOD2 (aproximado, 200–500 m), LOD3 (vista distante, 500 m+). A contagem de polígonos e a resolução de textura para cada nível são definidas conforme abaixo:

Compressão de Texturas

As texturas são a principal fonte de ocupação de memória gráfica. Um conjunto completo de materiais PBR (baseColor + roughness + metallic + normal + AO) com resolução 2048×2048 não comprimida pode consumir cerca de 200MB de memória gráfica por ponte rolante. Com 5 pontes rolantes exibidas simultaneamente, a memória gráfica esgota-se rapidamente.

Recomendações:

• ASTC 6×6: formato de compressão de texturas desenvolvido pela ARM, com taxa de compressão de aproximadamente 4:1 e perda de qualidade aceitável. Suportado pelo WebGL2.
• KTX2 + Basis Universal: compressão de texturas multiplataforma, descomprimida diretamente pela GPU sem intervenção da CPU. O Three.js possui um loader pronto.
• Redução de resolução de texturas: baseColor com 1024×1024 é suficiente; roughness/metallic com 512×512; normal com 1024×1024; AO com 256×256.

Após a otimização, a ocupação de memória gráfica por texturas de uma única ponte rolante reduz de 200MB para 45MB.

Oclusão (Occlusion Culling)

Num cenário de Gêmeo Digital, pelo menos metade dos objetos não é visível na perspetiva atual — paredes traseiras, colunas do lado oposto, o Carro oculto pela Viga Principal. Enviar todos os objetos para a GPU é um desperdício de recursos.

O Three.js não inclui Occlusion Culling nativamente; é necessário implementá-lo ou recorrer a bibliotecas de terceiros:

• Portals: divide o Edifício industrial em várias salas/zonas; um objeto numa zona só é renderizado quando essa zona está visível. Adequado para cenários com estrutura de Edifício industrial fixa.
• Hardware Occlusion Queries: utiliza EXT_disjoint_timer_query ou Occlusion Query do WebGL2 para detetar se um objeto é visível. Alta Precisão, mas com 1 frame de atraso; indicado para grandes objetos estáticos.
• Frustum Culling: ativado por predefinição no Three.js, renderiza apenas objetos dentro do frustum de visão. É o básico, mas insuficiente — objetos dentro do frustum podem ainda estar ocultos por outros.

Em projetos reais, recomenda-se a abordagem Portals. Dividir o Edifício industrial em várias zonas ao longo da direção do Vão; cada ponte rolante pertence apenas à zona onde está atualmente, mais as zonas adjacentes. Se o operador estiver na zona A, as pontes rolantes das zonas B e C não são renderizadas — apenas o estado dos dados é atualizado em texto.

Otimização da Transmissão de Dados

A renderização não é apenas uma questão de front-end — como os dados são transmitidos do back-end para o front-end, a quantidade e a velocidade dessa transmissão afetam diretamente a experiência do utilizador.

5.1 Atualização Incremental

Os dados de estado da ponte rolante são atualizados a cada 100ms, mas 95% dos pontos de dados são idênticos ao frame anterior (por exemplo, a carga nominal, o Vão e outros Parâmetros Técnicos nunca mudam). O envio completo de todos os dados é um desperdício de largura de banda e de tempo de processamento da CPU.

Solução: o back-end envia apenas os atributos que mudaram. Cada envio inclui um bitmap que indica quais atributos foram alterados; o front-end atualiza apenas os estados dos objetos 3D correspondentes. Em testes, a largura de banda reduziu de 50KB/s para 8KB/s por ponte rolante.

5.2 Compressão de Dados

• JSON + gzip: taxa de compressão de aproximadamente 6:1
• JSON + Brotli (suporte nativo em Chrome/Firefox): taxa de compressão de aproximadamente 8:1, descompressão ligeiramente mais lenta que gzip, mas aceitável
• Protocol Buffers (recomendado): codificação binária, com volume de apenas 1/5 do JSON e velocidade de parsing 10 vezes superior. Existe a biblioteca protobuf.js pronta, com integração simples no Three.js.

5.3 WebSocket vs SSE

• WebSocket: duplex total, menor latência, ideal para streaming de dados em tempo real.
• SSE (Server-Sent Events): unidirecional, suporte nativo do navegador, com mecanismo de reconexão integrado.
• Recomenda-se WebSocket com reconexão automática (intervalo de heartbeat de 15s); se a rede no local for instável, usar SSE como alternativa.

Otimização da Thread de Renderização

O núcleo da otimização da thread de renderização é separar o processamento de dados da thread principal:

Recomendações de Hardware para Pontes Rolantes

Otimização de renderização no edge para o Gêmeo Digital da ponte rolante

A configuração padrão do computador industrial na maioria das fábricas situa-se entre o nível "básico" e o "standard". Após a implementação completa do plano de otimização acima, a taxa de quadros média do i5-8500 com gráficos integrados a processar 5 pontes rolantes aumentou de 12fps para 58fps. Se o local tiver apenas 1 a 2 pontes rolantes, a configuração básica é totalmente suficiente.

Conclusão

A otimização de renderização no edge não é nenhuma ciência oculta; o essencial resume-se a três aspetos: transmitir menos dados, desenhar menos modelos e aproveitar melhor a GPU. Ao reduzir a largura de banda de transmissão de cada ponte rolante de 50KB/s para 8KB/s, o número de polígonos de 500.000 para 50.000 e a ocupação de memória de 1.8GB para 480MB, o Gêmeo Digital funciona a 60fps mesmo num computador industrial.

A série sobre o Gêmeo Digital termina aqui por agora. Os quatro artigos cobriram os quatro elos técnicos centrais para a implementação do Gêmeo Digital de pontes rolantes: arquitetura do sistema, modelo de dados, calibração da simulação e otimização de renderização. Se houver novos desenvolvimentos técnicos no futuro, a série será retomada.

Perguntas Frequentes