Print at Feb 26, 2020, 5:25:30 AM

Posted by Puybaret at Apr 13, 2016, 2:14:53 AM
Export to HTML5 plug-in

I'm very happy to present you the very first public version of Export to HTML5 plug-in (see the end of this message for download links).
Similarly to Sweet Home 3D viewer that requires the dying Java plug-in, the goal of this plug-in is to generate an HTML page able to view the arrangements you designed with Sweet Home 3D in an HTML5 3D canvas running on any web browser compatible with WebGL.
Once downloaded and installed in Sweet Home 3D, the plug-in proposes the new Tools > Export to HTML5 menu item that lets you choose a ZIP file where the edited home should be exported. Once the export is finished (it might last a long time), simply unzip the exported file to test / modify / deploy the 3D presentation of your home on the web.
The unzipped folder will contain:
- an HTML file named viewHome.html that contains a 3D canvas you can add to your HTML page, along with required scripts and other tags
- an HTML file named viewHomeInOverlay.html that contains a button you can add to your HTML page, this button being able to display the given home in an overlay (like in the updated Sweet Home 3D Gallery)
- a .zip file similar to a .sh3d file that contains the data of your home
- a lib folder which contains the required 500 kB Javascript code to display the home file.

To avoid consuming too much memory on small configurations like smartphones and tablets, the texture images used in the exported home are automatically scaled to 256 pixel wide or high, if either size is greater (except for sky textures). As the Javascript code is able to handle only models at OBJ+MTL format at the moment, models at other formats are automatically converted to OBJ files, and finally, the .zip file with the data of your exported home is compressed for a faster download from a web server. These are the reasons why the export can last a long time.
And yes, I repeat, the result works on smartphones and tablets compatible with WebGL, including iOS and Android devices as well as zoom gestures available on touch screens. If you mainly target these platforms, don't be too greedy, because the compatibility with WebGL on those devices doesn't guaranty you can load and run a home file of any size on them (10 MB is probably a reasonable limit nowadays). Simply try the homes in the Sweet Home 3D Gallery to discover the limit in your case. The main drawback of HTML5 in relation with this issue is that, at this moment, there's no way to anticipate the lack of memory to finish an operation, and when the browser runs out of memory, the window where the 3D canvas is displayed simply... crashes with a warning for the end user! I made huge efforts to manage memory requirements at a level as low as possible, but I think it will be very complicate (if ever possible) to load bigger files in a future version, if your device doesn't accept it now.

Quite strangely, the main difficulty for you at the beginning might be to find how to test these HTML files on your computer, because years after years, almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!! Of course, deploying the html files on a web server or removing security on local files will work, so be patient, success is never too far...

See the comments in viewHome.html and viewHomeInOverlay.html files for more details on how to configure the 3D canvas. For example, it's possible to start an animation that rotates the home once loaded, or display radio buttons to switch between Aerial view mode and Virtual visit mode.
For your information, the .zip file that contains the data of the exported home contains a special entry named Home.xml which describes how to place the 3D models of the home furniture (similarly to the Home entry in a .sh3d file). In this version, the Home.xml file doesn't describe walls, rooms... and these other items are integrated together as an OBJ export found in HomeStructure folder. Even if the plug-in is already able to generate XML data for this kind of objects, this way of doing required less work but will probably change in a future version.

Note that I released the first version of this plug-in under version 0.9, before releasing the version 1.0 in the coming days. I guess you'll find some "must have" suggestions or some bugs that will deserve some last modifications. The source code of the plug-in is included in the .sh3p file, and the unminified Javascript code I programmed will be available for version 1.0 release. This new project is released under the GNU General Public License, and includes some sub parts available under less restrictive licenses (thanks to the authors of JSZip, glMatrix and big.js libraries).

Hope you'll enjoy this plug-in and create plenty of HTML pages with it smile

Download links for Export to HTML5 plug-in:
Export to HTML5 plug-in 1.4 was released on 10/12/2018 for new features of Sweet Home 3D 6.0
Export to HTML5 plug-in 1.3.1 was released on 10/20/2017
Export to HTML5 plug-in 1.3 was released on 10/10/2017
Export to HTML5 plug-in 1.2 was released on 12/13/2016
Export to HTML5 plug-in 1.0.1 was released on 04/19/2016
Export to HTML5 plug-in 1.1 was released on 05/05/2016
Export to HTML5 plug-in 1.0.3 was released on 04/23/2016
Export to HTML5 plug-in 1.0.2 was released on 04/21/2016
Export to HTML5 plug-in 1.0 was released on 04/18/2016
Export to HTML5 plug-in 0.9.1 was released on 04/13/2016
Export to HTML5 plug-in 0.9 was released on 04/12/2016
Emmanuel Puybaret, Sweet Home 3D developer