Exporting a model as a standalone html with webgl

Is is simple enough to export a model or even a complete scene from blender with
File -> Export -> glTF 2.0

This would give you a .glb or .gltf file but you would still need to create an html file with a bit of javascript in order to display it on your webpage.

The problem

Commercial solutions exist, like Verge3d and Blend4Web, but only Blend4Web offers a free community edition. The latter comes with a rather strange claim with regard to your models considering the code is GPL: you should open source them as well or maybe not if you do not use the whole framework but it is up to them to decide. Both issues are unacceptable to me: I am happy to share code, but not necessarily any models, and someone else having a say over anything I produce, whether code or models, is not even up for discussion.

The solution

So what to do? Create my own add-on of course  

Legal nonsense

The add-on I present here has an MIT license and if you use it to present your models on a website, you are under no obligation to open source those models. (You cannot prevent people from downloading the gltf version of your model, after all that is what their browser needs to display it, but you can certainly assert your copyright on your model and forbid them from doing anything else apart from viewing it and you certainly don't need to provide your .blend files anymore than Blender requires that: a model is not a derived work from this add-on. If you still uncertain, get legal advice because luckily I am not a lawyer). The add-on contains the three.js library which also has a MIT license and a draco decoder which has an Apache license.

Code availability

Enough license talk, where's the add-on?

The add-on is called webgl-one-click (which is a bit presumptuous, I know, you'll probably need four clicks or so) and can be found in my GitHub repository.
The add-on can be downloaded as a .zip file (right click / save as this link) that can be installed in the usual manner. The individual source files can be found in their own folder but you probably only need that if you want to make changes to the code.


I have uploaded an example on my site. Textures etc are quite big so it might take a while to load, the background typically shows up fast but the model will take some time as it is current a few tens of MB.

When/if I find the time this weekend I might draw up a quick tutorial, but it is easy enough to use: after installing the addon it is available from the File -> export menu. It basically highjacks the existing gltf exporter (so you are not limited to a single object). Point it to a directory and it exports your model, creates a html file with the same name and copies a bunch of javascript. You should then simple copy the whole dir to your webserver. (Opening the file locally in your browser probably wont work as most browsers consider this unsafe; you could run a local http server of course from this directory e.g. python3 -m http.server)

1 comment: