Clever Geek Handbook

针对WebGL优化3D图形（PLANT-SIM体验）

本文将重点介绍如何优化Plantsim 1.0项目的Unity场景。：在Unity 2017.1.1f1上实现的田纳西州伊士曼过程数字副本的可视部分。



图片



MAI IT中心的合作伙伴和“ VR / AR＆AI ”硕士课程PHYGITALISM的组织者的笔记。



在第一个版本中，工作是使用功能强大的计算机以及第三方计算设备PLC进行的。新版本的区别在于，它现在是一个使用WebGL实现的WEB应用程序，并且仅需要便携式计算机即可运行。



平台 统一 命令 做什么的
PlantSim 1.0 基于PC：英特尔i7 Nvidia GTX 1070ti 2017.3.0f3默认管​​道 几位3D艺术家 热情塑造和创造美丽
PlantSim 2.0 笔记本电脑：Intel i5 Nvidia 1050ti Google Chrome 2019.2.15f1 LWPR 一位3D艺术家 更加热情地战胜了可怕的挑战


项目开发比较表



与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.



, , .



:





More articles:


All Articles