When rendering 3D objects in WebGL, you have to keep in mind several important steps in order to produce fluid and functional experiences. WebGL elements share a lot of similarities with 3D elements; however, there are a few notable differences that can affect the rendering of a 3D scene in WebGL.



Triangulate faces

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.


Think ‘’camera’’

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.


Use multiples

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.




Baking textures

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.