WebGL model simplification

Question

I'm currently planning a Web GL game and am starting to make the models for it, I need to know if anyone knows if say my model is 1X scale, my camera zooms/pans out from the object and my models becomes 0.1X scale, what kind of simplification happens by the WGL engine to the models in view?

I.E if I use a triangle as an example, here is it at 1X scale

And here is the triangle at 10% of the original size while keeping all complexity (sorry it's so faint)

While the triangle looks the same, the complexity isn't entirely necessary and could be simplified into perhaps into 4 triangles for performance.

I understand that WebGL is a state machine and perhaps nothing happens; the complexity of the model remains the same, regardless of scale or state but how do I resolve this for the best performance possible?

Since at 1X scale there could be only one or very few models in view but when zoomed to 0.1X scale there could be many hundreds. Meaning, if the complexity of the model is too high then performance takes a huge hit and the game becomes unresponsive/useless.

All advice is hugely appreciated.

Answer 1

WebGL doesn't simplify for you. You have to do it yourself.

Generally you compute the distance away from the camera depending on the distance display a different hand made model. Far away you display a low detail model, close up you display a high detail model. There are lots of ways to do this, which way you choose is up to you. For example

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

   This is the easiest and most common method. The problem with this method is you often see popping when the engine switches from using the low poly model to the high poly model. The three.js sample linked in another answer uses this technique. It creates a LOD object who's job it is to decide which of N models to switch between. It's up to you to supply the models.

2. Use low-poly far away, fade in the high poly one over it. Once the high poly one is completely obscuring the low poly one stop drawing the low-poly.

   Grand Theft Auto uses this technique

3. Create low poly from high poly and morph between them using any 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 and Daxter and Crash Team Racing (old games) use the structure above. Far away only points 1,4,12,15 are used. Close up all 16 points are used. Points 2, 3, 4, 5, 6, 8, 9, 10, 11, 13, 14 can be placed anywhere. Between the far and near distances all the points are morphed so the 16 point mesh becomes the 4 point mesh. If you play Jak and Daxter #1 or Ratchet and Clank #1 you can see this morphing going on as you play. By the second version of those games the artists got good at hiding the morphing.

4. Draw high poly up close, render high poly into a texture and draw a billboard in the distance. Update the billboard slowly (ever N frames instead of every frame). This is a technique used for animated objects. It was used in Crash Team Racing for the other racers when they are far away.

I'm sure there are many others. There are algorithms for tessellating in real time to auto generate low-poly from high or describing your models in some other form (b-splines, meta-balls, subdivision surfaces) and then generate some number of polygons. Whether they are fast enough and produce good enough results is up to you. Most AAA games, as far as I know, don't use them