WebGL only supports triangular polygons. As a result, you have to make sure that objects have been optimized if they originally had polygons with more than 3 vertices.
Optimize load time
The more polygons, the heavier the animation – and heavy animations take longer to load, which in turn creates lag. To avoid that situation, you have to find a balance between the number of polygons and the amount of detail or the sharpness of the scene. This is a very delicate step, especially when the capability of average devices is taken into account (not to mention network quality).
Similarly, any useless polygon – that is under the surface, for example - has to be systematically eliminated. In WebGL, the way an object is structured matters: any polygon that is inside an object, even if it isn’t visible, will be taken into account by the browser and will add to the weight of the scene.
When rendering a scene, you have to pay attention to the size of the object in relation to the camera. The size ratio of a scene in WebGL isn’t necessarily the same as in the 3D software used. The object then has to be of the size used by the WebGL library.
It is recommended to use multiples of 1024 for the number of pixels in your textures: 206, 512, etc. The reason is simple: the web shares an affinity with these multiples, and using them helps with load time optimization. It should be noted that 4096px is the maximum size for an image.
Optimize vertex normals
Don’t forget to optimize vertex normals so that faces appear as smooth as possible: then, the final result won’t look rough and irregular.
Keep an eye on hidden surfaces
Polygons have only one visible side in WebGL. Because of that, you have to be cautious when exporting data that the correct side is displayed. Otherwise, you may end up with a missing surface and a full view of the rest of the object.
If the scene is static (no object or light moving), lighting, shading, and color data can be baked in the same texture in order to optimize the weight of the scene (because it reduces the number of textures to be imported afterwards).
And finally, believe in OBJ
OBJ is the most frequently used format in WebGL importation. It is recognized by any WebGL online editor.