A clever man solves a problem, a wise man avoids it.
— Albert Einstein

Octave/MathLab in HTML with X3DOM

23rd of May 2017

My logo 3D demo you can click and rotate

Process:  MathLab/Octave VRML X3D HTML+X3DOM


While learning the mathematical programming languages R and MathLab I decided to test my Linear Algebra knowledge on a logo. Starting with a Klein bottle - figure 8 my GitHub project livingfire-octave was born.

Lately I stumbled upon a rotating Logo in a webpage similar to this

which is pretty a cool CSS trick. But it lacked the 3D feeling my Logo needs. So I googled for 3D HTML standards and found X3D/x3dom

Build from scratch

1. Mathematical equation

Logo math equation

See Wikipedia Klein bottle

2. Octave/MathLab

r = 2.5;
l = linspace(0,2*pi);
m = linspace(0,2*pi);
[theta,phi] = meshgrid(l,m);
X = cos(theta).*(r+cos(theta/2).*sin(phi) - sin(theta/2).*sin(2*phi));
Y = sin(theta).*(r+cos(theta/2).*sin(phi) - sin(theta/2).*sin(2*phi));
Z = sin(theta/2).*sin(phi)+cos(theta/2).*sin(2*phi);

3. Transform to VRML

Octave supports the X3D predecessor VRML via vrml Plugin. On Ubuntu you can install it via

apt-get install octave-vrml

which will enable you to output the .wrl file via

vrml = vrml_surf(X,Y,Z)

see complete source code

4. VRML to X3DOM

The real magic is done by the Fraunhofer Society a German research organization which created X3DOM. They provide a online service to convert VRML to X3DOM

You simple need to copy-pase your VRML and select the output format

  • HTML5 encoded webpage (x3dom html5)

Finished 3D demo


I highly recommend using Firefox to display your work. Almost all other browsers will display a blank page when rendering the 3D model due to CORS restricted resources. CORS in a nutshell forbids the browser to load content from an external source. Browser like Google Chrome seem to treat the 3D Model as external content. To comply to CORS you simply need to serve your HTML page with a web server like Apache, Nginx, NodeJS. An example how to setup Apache with Docker can be found in my project livingfire-octave.

Back ...