Blender in Webgl

Blender documentation projects, tutorials, translation, learning & teaching Blender

Moderators: jesterKing, stiv

Post Reply
Posts: 0
Joined: Fri Nov 11, 2011 6:53 pm

Blender in Webgl

Post by Jena » Fri Nov 11, 2011 7:04 pm


I'm trying to export Blender models to Javascript.
With the aim to develop a simple webgl game.
Although, I'm new in Blender and have no idea how to export Blender models to Javascript. Any ideas?

Kind regards

Posts: 0
Joined: Fri Jan 13, 2012 8:08 pm

Re: Blender in Webgl

Post by tmpest » Fri Jan 13, 2012 8:23 pm

Jena wrote: Although, I'm new in Blender and have no idea how to export Blender models to Javascript. Any ideas?
Hello, Jena!

WebGL requires a "loader" to perform the loading of a model. There is no "JavaScript" format for 3D models, per se. WebGL, like the full OpenGL are basic frameworks and do not provide a "native" format for the 3D models they display. In fact, you will find yourself writing the actual code to turn each polygon into a GL instance to display it! You will also be writing libraries to do transformations on them to turn, twist, animate... blah, blah. Lots of work on your part!

Basically, in a Graphics Library environment nothing is built for you. You will need to look for things called "loaders" to interpret the 3D models into the GL language for you.

Luckily, you have many loaders in the open source domain but I would look for OBJ (also called wavefront) and COLLADA (which is owned by the WebGL defining body, but I may be mistaken).

In short, in WebGL you will either need to find an "engine" with a pre-built loader or you will have to build it yourself.

Once you have that hurdle over, its super simple to export from Blender what you need. Blender supports many, many formats.

Posts: 0
Joined: Fri Feb 03, 2012 4:58 pm
Location: Slovenia

Post by zidarsk8 » Sat Feb 04, 2012 2:59 am

I have had a project like that a while back and these are the things I have learned (it may be a bit outdated now)

One nice way of making models in WebGL is usign SpiderGL, a javascript library that can import collada files: All you have to do is export your blender model as a collada file.

I have had some problems wit this, cause it did not allow me to do all the stuff I wanted, so I came up with this (i's very limited but just what i wanted, vertices and faces and nothing more):
- export blender file as .obj
- convert .obj into a json presentation of the object (i used this script ... , and again ... it's limited and buggy, i just wrote this to learn)
- draw vertices as i see fit in javascript since i have a json where all my vertices normals and faces are stored. (in the bottom of this horrible mess, you'll find something that uses the json and actually draws it ... iWalker.js )

So, use SpiderGL if you want to get something done, Use the second method if you just want to learn more and see how stuff is actually made deep down.[/url]

Posts: 0
Joined: Sat Nov 01, 2008 8:23 pm
Location: New Zealand

Post by johngflower » Fri Feb 10, 2012 1:27 am

Thanks Zidarsk. I'd been thinking about using WebGL to show Blender models. Your explanation of what can and can't be done was useful.

Post Reply