33
$\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)

Improve this question
$\endgroup$
3
  • 5
    $\begingroup$ Blend4Web natively supports many Blender-specific features - node editor, NLA animation, particle system, Bullet physics and others $\endgroup$
    – user3515
    Commented May 17, 2014 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
    Commented Feb 28, 2016 at 15:50
  • 1
    $\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
    Commented Apr 4, 2019 at 17:22

4 Answers 4

Reset to default
20
$\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)

Improve this answer
$\endgroup$
5
  • 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
    Commented May 28, 2013 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
    Commented May 28, 2013 at 7:28
  • 1
    $\begingroup$ Thanks, iKlsR, I added the bit about normals. Feel free to edit my answer next time. $\endgroup$
    – Mike Pan
    Commented May 28, 2013 at 17:51
  • $\begingroup$ +1 for apply modifiers. Also, don't forget to apply transforms. $\endgroup$
    – Exilyth
    Commented May 31, 2013 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
    Commented Nov 6, 2013 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/

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,

Improve this answer
$\endgroup$
4
$\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.

Improve this answer
$\endgroup$
2
$\begingroup$

You can do this 3 viable ways:

  1. Export with the built-in glTF addon bundled with Blender and then use a WebGL library which can load such assets, Three.js for example. This option requires some JavaScript coding skills to setup a web application and write basic logic to control the camera, setup lighting, etc. Tedious but completely free.

  2. Use Verge3D addon for Blender. This won't require any coding but will cost you $290. It implements various extensions to glTF standard which include more native information about Blender's datablocks, such as materials, cameras, lights, HDRIs, animations, etc. This tool is around since 2017 and keeps compatibility with latest Blender versions.

  3. If you just want to check out a model quickly and not anything else, there are bunch of drag-and-drop glTF viewers out there (e.g Google's Model Viewer). Basically once you upload a glTF asset, it will generate a code for embedding into a web page. Of course this is just a viewer, so no interactivity other than 360 rotating by mouse and basic animation playback.

Improve this answer
$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .