Optimizing 3D graphics for WebGL (PLANT-SIM experience)

This article will focus on optimizing the Unity scene of the Plantsim 1.0 project .: The visual part of a digital copy of the Tennessee Eastman Process, implemented on Unity 2017.1.1f1.

Note from the partner of the MAI IT-center and the organizer of the master's program “ VR / AR & AI ” - PHYGITALISM .

, — PLC. , WEB-, WebGL, .

PlantSim 1.0, . PlantSim 2.0.

PlantSim 2.0

WebGL — 3D Google Chrome, Mozilla, Safari. , 30FPS+. .

Unity: WebGL Build

.

WebGL , . , , / 3D .

, 3D, , .

, :

• OutPutTank — 2
• Reactor — 1 ,
• ReactorExplosion — 1 ,
• Condenser — 1
• Separator — 1
• PipesSystem —
• Stripper — 1
• Valve — 6
• Tank — 4
• Refrigerator — 1
• Compressor — 3
  
  PlantSim 1.0 189 736 , 60%. 75 895 , .
  
  
  
  

, , , , . :

Reactor (PlantSim 1.0) —

Reactor 21998 . , 8800 . , , : OutPutTank, Reactor Striper — . , .

, Reactor ( , ), 7258 . , 8000. , UV , — , , , .

Reactor (PlantSim 2.0) —

ReactorExplosion , — . FPS , , 1000 Particle System. , : ? Unity , WebGL , , 5 ( FlipBook ). Unity.

FlipBook — , . , , . , , . , 5 , 1000.

, Reactor — WebGL FPS. Unity , Mesh renderer Skinned mesh renderer. transform points transform points (Origin ). , FPS 3–5 15–20 , 0,5 . , ReactorExplosion 41220 , , , , , .

. , 189736 ( ReactorExplosion, 148516 ). 60% , 59403 ( ). 61064 , , , . ReactorExplosion 102284 , .

, .

. , , :

• Base Color/Albedo — RGBA , , . Alpha .
• Ambient Occlusion — / .
• Metallness — / , .
• Smoothness — / , .
• Normal Map — RGB , .
• Height Map — / , . Normal Map.
• Emission — RGB , . Global Illumination , .
  
  
  
  Striper PlantSim 2.0

. — RGB - . ?

, R G B, A - . RGB . :

/

Combine texture Unity.

Normal Map. — , .

Compressor

, . :

1. , Substance Painter, .
2. HighPoly ( , , ) LowPoly , . Substance Painter, Blender .

— UV , . .

. —

, . , , UV . , , UV .

.

WebGL , . , . — .

, Unity, Global Illumination. “” . Unity — Dynamic Static .

, .

, , . Lightmap . Realtime , .



Lightmap

PlantSim 2.0 , .

WebGL

FPS , Google Chrome. — FPS c i7 GTX 1070ti 30, , . , .

, , (, ), FPS, .

- . FPS .

Windows Apple MacBook PRO, , 3D . RTX 2080ti (, FPS 60). FPS .

, . , Google Chrome :

1. ? , , .
2. (, )?

, — . Google Chrome, , . NVIDIA — NVIDIA control panel. Google Chrome , .

Nvidia Control Panel —

, Google Chrome, FPS 70–90 — , 3D (), - .

, , WebGL — 3D WEB.

, , .

:

• WebGL — Wikipedia
• WebGL three.js
• Unity —
• Unity — WebGL Builds
• Unity — WebGl Development
• UV — Wikipedia
• Texturing mapping — Wikipedia
• PBR — Habr
• 3D modeling — Wikipedia
• PlantSim 1.0
• PlantSim 2.0