26
$\begingroup$

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)

$\endgroup$
  • 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$ – Jacob Badran 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$ – Michael Buchman Apr 4 at 17:22
16
$\begingroup$

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)

$\endgroup$
  • 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
  • 3
    $\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
10
$\begingroup$

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.

https://www.blend4web.com/en/

$\endgroup$
0
$\begingroup$

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.

$\endgroup$

protected by Community Jul 31 at 15:29

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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