I would like to create WebGL applications and use Blender as a modelling tool. I don't necessarily need to translate game engine functionality to WebGL but I would like to retain as much of the UV mapping, vertex colors, materials, etc. info as possible.

I already know I should keep the polygon count low. What are the other things I should keep an eye on? (Such as don't use feature X because you won't be able to export it)

What tools do I need to learn? (WebGL framework specific plugins, generic tools like OBJ exporter)

  • 5
    $\begingroup$ Blend4Web natively supports many Blender-specific features - node editor, NLA animation, particle system, Bullet physics and others $\endgroup$
    – user3515
    May 17 '14 at 15:31
  • $\begingroup$ Page 414 in this book. Its easy to use your Blender models in WebGL. sites.google.com/site/webglbook $\endgroup$ Feb 28 '16 at 15:50
  • $\begingroup$ Blend4Web development was abandoned in favor of Blend4Web Studio which won't be based on Blender anymore. Check out Verge3D framework created by former B4W developers instead. $\endgroup$ Apr 4 '19 at 17:22

The answer is somewhat dependent on what file format the WebGL viewer ingests. And how good the Blender exporter is. But the most common format is probably the ASCII Obj format, for which Blender has a pretty decent exporter for.

So, things to watch out for:

Geometry: Avoid Ngons, or at least, triangulate before exporting. The exporter might produce unexpected results. Also, make sure the face normals are all oriented correctly. Blender renders both side of a polygon by default, many other 3D viewers don't. You can recalculate normals with Ctrl + N.

Mesh Modifiers: Even though the exporter probably applies the modifiers. It's better to be explicit than implicit. Also, it is a good idea to apply the transforms (Ctrl + A).

Materials and Textures: Avoid the Blender material panel(except basic colors). Use UV-mapped textures. Blender-specific features like procedural textures are not going to migrate properly. Image textures dimensions should be power of 2 square. (1024x1024, 512x512, etc)

  • 2
    $\begingroup$ All good points, You could also add that one should also remember to recalculate normals and make sure no duplicate verts are present. $\endgroup$
    – iKlsR
    May 28 '13 at 5:30
  • 4
    $\begingroup$ On the WebGL side I'd recommend looking into Three.js It supports the Obj and other format and is very often used for all kinds of projects $\endgroup$
    – Maccesch
    May 28 '13 at 7:28
  • 1
    $\begingroup$ Thanks, iKlsR, I added the bit about normals. Feel free to edit my answer next time. $\endgroup$
    – Mike Pan
    May 28 '13 at 17:51
  • $\begingroup$ +1 for apply modifiers. Also, don't forget to apply transforms. $\endgroup$
    – Exilyth
    May 31 '13 at 0:30
  • 4
    $\begingroup$ Three.js comes with its own Blender import / export addon! github.com/mrdoob/three.js/tree/master/utils/exporters/blender $\endgroup$
    – CodeManX
    Nov 6 '13 at 19:56

Blend4Web can do most of the work for you. It exports Blender models correctly and also sets up the WebGL page. It's free and open source.


June 2020 - blend4web does not appear to support the current version of Blender (v2.82) It is not clear whether this product is even still available after it was reworked to support Maya and other environments,


It seems you can now use the Three.js Blender Exporter plugin and export your model into a WebGL compatible JSON file and load it into your 3D scene using Three.js.


Not the answer you're looking for? Browse other questions tagged or ask your own question.