html5 - WebGL model simplification -

i'm planning web gl game , starting make models it, need know if knows if model 1x scale, camera zooms/pans out object , models becomes 0.1x scale, kind of simplification happens wgl engine models in view?

i.e if use triangle example, here @ 1x scale

and here triangle @ 10% of original size while keeping complexity (sorry it's faint)

while triangle looks same, complexity isn't entirely necessary , simplified perhaps 4 triangles performance.

i understand webgl state machine , perhaps nothing happens; complexity of model remains same, regardless of scale or state how resolve best performance possible?

since @ 1x scale there 1 or few models in view when zoomed 0.1x scale there many hundreds. meaning, if complexity of model high performance takes huge hit , game becomes unresponsive/useless.

all advice hugely appreciated.

webgl doesn't simplify you. have yourself.

generally compute distance away camera depending on distance display different hand made model. far away display low detail model, close display high detail model. there lots of ways this, way choose you. example

1. use different high poly models close, low poly far away

   this easiest , common method. problem method see popping when engine switches using low poly model high poly model. three.js sample linked in answer uses technique. creates lod object who's job decide of n models switch between. it's supply models.

2. use low-poly far away, fade in high poly 1 on it. once high poly 1 obscuring low poly 1 stop drawing low-poly.

   grand theft auto uses technique

3. create low poly high poly , morph between them using number of techniques.

   for example.

    1----2----3----4            1--------------4  |    |    |    |            |              |  |    |    |    |            |              |         4----5----6----7            |              |  |    |    |    |   <----->  |              |  |    |    |    |            |              |  8----9----10---11           |              |  |    |    |    |            |              |  |    |    |    |            |              |  12---13---14---15           12-------------15 

   jak , daxter , crash team racing (old games) use structure above. far away points 1,4,12,15 used. close 16 points used. points 2, 3, 4, 5, 6, 8, 9, 10, 11, 13, 14 can placed anywhere. between far , near distances points morphed 16 point mesh becomes 4 point mesh. if play jak , daxter #1 or ratchet , clank #1 can see morphing going on play. second version of games artists got @ hiding morphing.

4. draw high poly close, render high poly texture , draw billboard in distance. update billboard (ever n frames instead of every frame). technique used animated objects. used in crash team racing other racers when far away.

i'm sure there many others. there algorithms tessellating in real time auto generate low-poly high or describing models in other form (b-splines, meta-balls, subdivision surfaces) , generate number of polygons. whether fast enough , produce enough results you. most aaa games, far know, don't use them