| My logo | 3D demo you can click and rotate |
|---|---|
|
|
Process: MathLab/Octave VRML X3D HTML+X3DOM
Preface
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
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)
save_vrml('kleinBottleFigure8Immersion_vrml.wrl',vrml)
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
Troubleshooting
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.
⬆