Auteur : FabKzo

Equirectangular panos to cubes with Blender

Baking equirectangular panos to cubes (or whatever you want) with Blender

While playing with Blender I’ve found a way to apply 360 panoramics images on a mesh; what’s the goal ? From my point of view there’s at least 3 :

  1. You can easily unfold the mesh, then print it out to make , hmmm for example,  something like that: This type of tasks normally needs a lot of work , using Hugin, templates .psd files etc etc..
  2. Transform it to a cube , in order to use it in a game.
  3. Playing with map projections ( why not? Should be a great game for geomaticians ;-p )
  4. Lire la suite

Using pannellum to view 3d rendered scenes


I find it useful to be able to export a complete 3d scene (as a landscape)  to equirectangular view; that’s a proof of work from the modeler/designer since he should make all the scene, not only a portion for the camera, and it’s a way to offer immersion in the rendered scene. A complete UHK virtual tour can be done, for example, and portions of photos can be extracted from the panos- if needed for graphical uses- with few efforts.

Lire la suite

OpenSource Panorama viewer and HTML5 Pannellum by Matthew Petroff [deprecated]

[ Edit 11/16/2014] : I let it there for memo , but if you want fresh news go to panoramics page; the pannellum version used there is 2.0+ now.


I’ve been working hard since 6 months with image stitching, and I’m quite good now at it. I use Hugin panorama stitcher to make and control them ; coupled with gimp that’s a great process , whenever they does 10Mo or 1Go..

The hardest to find -as opensource and free software- is a non-flash viewer proposing wide screen and tiling for spherical panos ( you now: photos are made at 360° horizontally and vertically around you), showing it with the good angle of view ( field of view, or « hfov » -horizontal field of view) to avoid ugly deformations. The goal is to obtain a « google-street-view-like » but with great pictures, not « automatic-stitched ,parallax-full,and cylindrical ones », and to be capable to display informations while viewing it.

I’ve been searching it for a while , knowing that HTML5 canvas should do it and I’ve been making a sphere in Blender , mapping the equirectangular pano in it, posting it to

Opensource 360° Pano viewer
by FabKzo
on Sketchfab

Opensource 360° Pano viewer from FabKzo on Sketchfab.

 There your pano size is limited to  almost 4000px as I remember, allowing quick access to the picture; but losing in quality , moreover when you would show people a great panorama; then you have to tile your pano in order not load the entire picture each time you open it (and for a Gigapano that’s a matter).

But I’ve also found Matthew Petroff’s work : Pannellum

And I give it a try there:

Reactive, more easy to practice if you have a server to host your panos and pannellum. Image quality is better there for almost the same speed; and since it’s opensource you have access to the code if you want to modify it to your needs.

For the moment spherical panos are limited to 4096 px width due to WebGl texture system as explained by Matthew:

« > Since Pannellum currently loads the image as one texture, the WebGL texture
> size limits limit the maximum image resolution. I recommend a maximum image
> dimension of 4096 pixels on the largest side, as it is supported by >90% of
> WebGL enabled browsers. If you need higher resolution, a maximum image
> dimension of 8192 pixels is supported by >60% of WebGL enabled browsers. A
> maximum image dimension of 16384 pixels is supported by ~14% of WebGL enabled
> browsers, and anything larger, e.g. your image dimension of 29542 pixels,
> isn’t supported by any browsers.
> I’m currently working on adding support for larger images using a
> multiresolution, image pyramid based scheme, but it’s currently in an alpha
> state. Once done, it will allow for arbitrarily large images, but for now one
> is in practice limited to a maximum image dimension of 4096 pixels, a
> resolution of about 8 megapixels for a full equirectangular panorama.

-Matthew »


Inkscape patterns/ les Motifs dans Inkscape sans l’outil de découpe

This is a very little imaged tuto destinated to get around what seems to be a bug in Inkscape , while setting  a clip on 2 objects then trying to make the resulting group  a pattern. ( resulting in blank rectangles )

Bonjour aux lecteurs curieux de, j’espère que cela pourra en aider plus d’un 🙂

Je rappelle que je ne me suis pas appliqué à faire quelque chose de précis ;

[nggallery id=5]

(python) Playing with Pixel Art to SVG


Well I’m actually searching cool stuff concerning svg. So I’ve been searching on pypi all about SVG using pip in my terminal.

for those who don’t know it on a debian system:

sudo apt-get install python-pip


pip search svg 

You’ll find there a very nice little tool called ‘pixel2svg’

I was surprised of its interest but I consider it finally very useful : rather than trying to vectorize very little pictures ( like icons ) in Inkscape, or to completely re-do it , use it to keep the pixel-art-style  with great results.

Very simple to use, just like this: eboy.png

I’ve taken a picture from EBOY ( ) to play with.

pixel-art ,icon size
pixel-art ,icon size

Let see the result:

resulting SVG

Then let’s play with it:

Make whatever you want now with a clean drawing



a styled pixel-art vecorized
give it the style you want

Before that I have tested the Inkscape’s vectorization tool :

Comparing pixel2svg vs inkscape's vectorization tool
Comparing pixel2svg vs inkscape’s vectorization tool


Tell me if it can also be useful to you , I wonder what you would be able to do with it 🙂

NB:  Now you can also apply this to Qrcodes . How ? Well… Have you ever tried to redirect one of them?

Sliding with Hovercraft!

Hey I’ve discovered a new  python-based presentations engine:

hovercraft logo           Hovercraft!

« The merge of convenience and cool!

Hovercraft! is a tool to make impress.js presentations from reStructuredText. For a quick explanation, see the demo.

  •     Write your presentations in a text markup language. No slow, limiting GUI, no annoying HTML!
  •     Pan, rotate and zoom in 3D, with automatic repositioning of slides!
  •     A presenter console with notes and slide previews!
  •     The slide show generated is in HTML, so you only need a web browser to show it.
  •     Easy sharing, as it can be put up on a website for anyone to see!

Full documentation is available at, and also in the documentation subdirectory. »


What a wonderful tool for all webdesigners, presenters, devworkers !
No need to use -free or not – softwares with their own extensions, no conversions needed as it makes all the work and create an index.html with css.
But all is not as easy as you’ll have to install it on your system, before creating your first reStructuredText.

That’s why I’ve made a little tuto for interested (and noob) people like you 🙂

Well, first of all I work on a Linux system ( Ubuntu 12.10 ) so you’ll have to translate the commands for yours (I use apt-get to download the missing libraries.)

Fine, so download the hovercraft folder on the dev page there:

Well done! So you’ll find there a lot of files and folders , but the interesting one is « »

Ok, so are you fluent with Python ? ==> you can pass this part and go down to « installing missing libs« 

If not, continue reading:

« Python is a programming language that lets you work more quickly and integrate your systems more effectively. You can learn to use Python and see almost immediate gains in productivity and lower maintenance costs.

Python runs on Windows, Linux/Unix, Mac OS X, and has been ported to the Java and .NET virtual machines. »


I won’t make a course on python there but I want you to understand you’ll have to build and install Hovercraft! in order to use it as a shell tool.

So make sure to install python on your system using the command shell ( or terminal) :

 sudo apt-get install python3.2-dev  ( here we install python3.2 since Hovercraft has been written in Python3; it won’t work if you use python 2.7 for multiple reasons I’ll let you search on )

Installing missing libs :

Hovercraft! needs 2 libraries to be compiled: libxml2 and libxslt ; here we’ll download the dev versions.
You can get them with:

sudo apt-get install libxml2-dev libxslt-dev


sudo apt-get install python-lxml

now if not installed, download python3-setuptools:

sudo apt-get install python3-setuptools

and you can finish with:

sudo easy_install lxml

That’s done for this part;

Nice; there you have all to build and compile Hovercraft! on your system.

Bulding and compiling:

You have to reach Hovercraft! folder to see the file

 cd ~/hovercraft-1.1/
 then type « ls » to check all the contained files and folders

ok, fire!

 sudo python3.2 build

once finished:
 sudo python3.2 install

Normally you’ll read some errors messages but it doesn’t mind;

I’ll let you there discover the well-made tutos :

linked on a dedicated page:

In the folder Docs/examples/ you can edit all the .rst files , as they are text files and try to make them html presentations with for example:

hovercraft tutorial.rst ~/yourdestinationfolder

Open Index.html with your favorite browser and enjoy 🙂


Making SVG+js presentations with sozi

Hi there,

Today I’ll just remind you Sozi’s existence , has a plugin for inkscape. That’s free and easy to use, no need to code, just do it graphically.

Very nice to make « Prezi-like » presentations ; you can add video and audio if you want, but just be sure that your browser(s) implement it well ( actually i’m a bit slow under firefox, very nice with chrome )

The top should be to make it as there:  but forget it, your « slides » won’t move like that;

If you’re more interested with javascript , also exists impress.js :

but a bit harder to understand.

The good point for using Sozi is that  it generates a SVG file , giving you the possibility to use it as a page, to implement it in a html page etc, etc…


There I call it with an iframe, as on sozi’s site ( ), to make it interactive and to adjust its size.


but you can also use this link to see it in fullscreen as an SVG page ( copy and paste in your browser) :