Export to HTML5 plug-in
Three weeks ago, the first public version of the Export to HTML5 plug-in was released. Similarly to Sweet Home 3D viewer, this plug-in lets you generate HTML pages able to display in 3D the homes designed with Sweet Home 3D in any HTML5 web browser compatible with WebGL under all systems, including iOS and Android.
Finding a replacement for Java applets
When iOS, the system of iPhones, appeared, Apple decided that the version of their web browser Safari included in this system wouldn't support plug-ins able to run Java applets or Flash programs. This meant that Sweet Home 3D Online or Sweet Home 3D viewer, an applet able to display the 3D view of a .sh3d
file, wouldn't be able to run under iOS (but also under Android where there's no Java plug-in yet). Nevertheless, Apple still allowed to let run some programs within a web page if they were programmed in JavaScript. As JavaScript is not Java, it meant that proposing the same services as Sweet Home 3D applets in browsers running under iOS and Android would require to translate Sweet Home 3D Java code to JavaScript. Beside the question about whether iOS devices would be powerful enough to run a program like Sweet Home 3D, translating 100000 lines of Java code could take months of work, that's why during the past years, I preferred to improve Sweet Home 3D rather than considering starting this task!
But recently, technology moved towards a wider adoption of JavaScript in browsers:
- The editors of the main web browsers like Firefox, Chrome, Internet Explorer, Edge, Safari, Opera greatly improved the performances of their JavaScript engine.
- One after the other, they added WebGL support in their browsers to let JavaScript 3D programs take profit of the power of graphics cards.
- Google stopped supporting plug-ins in Chrome, Mozilla announced they'll stop supporting them in Firefox by the end of 2016, whereas plug-ins have never been supported in Edge, the new default browser in Windows 10. Therefore, even Oracle, the editor of the Java plug-in, decided to deprecate it in the coming Java 9.
Quickly said, if we wanted a Sweet Home 3D solution still able to work in a web browser, it was time to move! That's why I started to rewrite a part of Sweet Home 3D in JavaScript. My first goal was to propose a replacement of the Sweet Home 3D viewer applet able to display in 3D the homes you designed in any HTML5 web browser compatible with WebGL (i.e. 84% of used browsers as of today). After 3 months of work, this lead to the Export to HTML5 plug-in (338 kB - updated on 2018/10/12) and to a new service on sweethome3d.com that lets you upload a .sh3d
file and view it in 3D.
Export to HTML5 plug-in
The current format of Sweet Home 3D files is not really usable in JavaScript. Such files weight too much when not compressed, the Home
entry they contain is hardly readable out of Java world, they may contain texture images that are unnecesseraly large and may contain 3D models at different formats that would require an interpreter in JavaScript for each of them.
Therefore, beside the need to write a 3D engine in JavaScript able to display a home in a 3D view where the user can navigate, it was required to program a feature that would transform a .sh3d
file into a format that could be more easily and efficiently handled in JavaScript. To let you test this feature in Sweet Home 3D easily, I programmed it as the plug-in named Export to HTML5 plug-in.
Once you have downloaded this plug-in, installed it (under Window and Mac OS X, just double-click on the .sh3p
file) and relaunched Sweet Home 3D, the new Tools > Export to HTML5 menu item will appear in the program. This menu item will let you choose a ZIP file where the edited home will be exported. Then it will generate a ZIP file with the following content:
- a
viewHome.html
file that contains a 3D canvas you can add to your HTML page, along with required scripts and other tags - a
viewHomeInOverlay.html
file 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 adapted for JavaScript - a
lib
folder which contains the required 500 kB Javascript.js
files able to display the previous file.
Just unzip the file generated by the plug-in, and open viewHome.html
or viewHomeInOverlay.html
in a web browser to check the results. Note that you'll probably need to allow your browser to read local files or a HTTP server.
The button shown in the viewHomeInOverlay.html
will display the 3D view in a pane that covers 90% of the browser window like the following button does.
The HTML canvas shown in the viewHome.html
file will display directly the 3D view in a web page like the canvas shown below.
Just feel free to add any information or images to the HTML page of your choice to customize it as you wish, or reuse the HTML code they contain in your own pages. If needed, change the options like the rotation speed or the visibility of the navigation arrows described in the HTML comments of viewHome.html
or viewHomeInOverlay.html
files. Once you're ready to publish your page, upload it on your web server along with the lib
folder and the .zip
file of the exported home.
If you need to display other homes on your web site, use the Tools > Export to HTML5 menu item for each of them. As the content of the lib
folder is always the same, just avoid to duplicate it on your web server to prevent the users of your website downloading the same .js
files for different homes. If you want to propose mainly this feature on smartphones and tablets, don't be too greedy and check how it works first on such devices (10 MB per exported file is probably a reasonable limit nowadays).
The navigation in the displayed home can be operated with the same keys and mouse gestures as the ones used in Sweet Home 3D. On touch screens, use your finger to turn around, and pinch to zoom in or out.
The JavaScript code required to run this program was published in the new SweetHome3DJS project 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 included libraries).
If needed, you may handle and even modify the displayed home with the API described in the following JSDoc.
Exporting your Sweet Home 3D files on sweethome3d.com
The Export to HTML5 plug-in should be useful to any webmaster who wants to show his homes in 3D. But, even if using directly the result of the plug-in doesn't require a big experience in web hosting solutions, this plug-in won't be useful for all the people who don't have any web site.
That's the reason why I added a new service to sweethome3d.com web site that allows registered users to upload their .sh3d
files to view them in 3D in their browser, with a title and a comment like in this example and in the screen capture shown below.
Once the web server has received your .sh3d
file, it simply applies the Export to HTML5 plug-in on it and returns a link to a web page that displays your home in 3D. If you want and if your .sh3d
file contains only 3D models and textures that can be freely redistributable, you may share the returned link after selecting the Share link to exported file with public option displayed in the Exported homes manager page shown below when you're connected to the new service.
Viewing free 3D models in 3D
My very first goal during the development of SweetHome3DJS project was to be able to display 3D models at OBJ + MTL format with WebGL. This ended to the "surprise" published for Sweet Home 3D 10th birthday which displays in 3D one of the examples of the gallery exported to OBJ format. This ability to interpret OBJ files was needed to display the furniture contained in the homes exported with the Export to HTML5 plug-in. But this feature still can be used alone to view in 3D a model at OBJ format, like the ones available in the free 3D models page. Therefore, I changed all the links on the images showing a 3D model in that page to make them display that model in 3D when the user clicks on the images, like in the examples below. Hope you'll like this bonus!
Making this change helped me to program a robust OBJ file interpreter than I could test with many different files, but also helped to discover that many models of the free 3D models page needed some fixing, either because some of their faces weren't correctly oriented, or because their file was uselessly too large. Such corrections were applied to 115 models that you can also find in the version 1.6.2 of the SH3F furniture librairies released a few days ago.
What's next?
The final goal of this development is to propose the same features as the ones found in Sweet Home 3D Online. But even if the results obtained with the Export to HTML5 plug-in are encouraging, on the performances side of WebGL as well as on its portability on various browsers, there are months of work to reach this goal if it's feasible.
The next step should be to display the furniture catalog and the 2D plan to let users add and arrange furniture in their home.
In all cases, the existing Java application remains the most used and reliable way to design homes with Sweet Home 3D, so of course, I'll continue to maintain and improve it in the coming months!
Re: Export to HTML5 plug-in
one major SH3D issue for me is aerial view always points to the center of the scene - no matter how many rooms the plan has. And in big scenes it's impossible to point overview camera to a certain room (there need to be a way to move focus point of the camera for that). Walking mode doesn't help for this purpose. It's sad, html5 exported version has the same camera navigation limitation.