France
Joined: Nov 7, 2005
Post Count: 9397
Status:
Offline
Export to HTML5 plug-in
Hello,
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 which 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
Simple, elegant, easy to use. Tried it with IE 11 and Opera 36.0 under Win 8.1 32 bit. Loads quickly, Opera slightly faster and smoother. Very, very nice.
..almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!!
Happy to hear I am not the only one mystified by this...
..find some "must have" suggestions or some bugs that will deserve some last modifications.
Not really, at least not after a quick test. I guess there may be a potential for additional features, but point is that the basic platform seems to work with no issues "out of the box".
Joined: May 12, 2013
Post Count: 1545
Status:
Offline
Re: Export to HTML5 plug-in
Tried it with IE 11 and Opera 36.0 under Win 8.1 32 bit...
Yes, and I forgot, tried Android (4.4.4 KitKat) too with Opera 34 and Chrome 47. Works beautifully (even if I have yet to figure out whether I can use all the controls). ok
France
Joined: Nov 7, 2005
Post Count: 9397
Status:
Offline
Re: Export to HTML5 plug-in
Thanks for your nice feedback
Releasing a first version helped me to make room for new ideas, and in the version 0.9.1 released tonight, I found a way to make the generated program consume less memory and even run faster with some browsers. For people interested by technical details, using Javascript workers to parse OBJ files wasn't such a good idea because of the amount of data to manage and transfer back and forth, and actually, calling setTimeout to slice this parsing was enough to give some air to manage interactions with the user interface, without slowing down the program. Under iOS, I discovered also that textured grounds weren't rendered correctly and I reduced the surface of the exported ground to 1km² which should be enough.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
Joined: May 12, 2013
Post Count: 1545
Status:
Offline
Re: Export to HTML5 plug-in
Tried some more - and I see that complicated models can be a challenge. But it works very well for illustrations, even on small devices, as long as the model is not too big.
This is probably a silly question (showing a total lack of interest in the Android interface), but is there a way of zooming the aerial view and moving the virtual visitor without mouse/keyboard - i.e. on small handhelds?
There's nothing to change the elevation of the visitor, but adding buttons for that should be quite easy. Just need some documentation to explain how to do it!
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
Joined: May 12, 2013
Post Count: 1545
Status:
Offline
Re: Export to HTML5 plug-in
Pinch!
Yes, well, I did try pinching, but cannot get it to work with either Opera or Chrome - pinching inside the canvas just rotates (and otherwise zooms the entire page). Under Win 8.1 pinching seems to zoom the page, regardless how much I try to focus inside the canvas. Maybe just me or my setup. Will try further. Either way, I suspect it is possible that I am not the only one having trouble (I hope), so buttons may be a good idea for a future release, just in case :-)
Joined: Sep 15, 2015
Post Count: 40
Status:
Offline
Re: Export to HTML5 plug-in
I'm currently looking into home automation, what hardware systems there are and what GUIs they offer. If there was a possibility to add triggers to lamps, furniture etc in SH3D that can call external scripts in the HTML export and also get notified on changes (e.g. light switches) you'd have a kick-ass home automation GUI that no other can beat :)
France
Joined: Nov 7, 2005
Post Count: 9397
Status:
Offline
Re: Export to HTML5 plug-in
Hi,
I just released the version 1.0 of the Export to HTML5 plug-in, with a little add-on to the Free 3D models page as a surprise. Along with the Java source code included in the plug-in file, I published the source Javascript files in the new SweetHome3DJS project and generated the JSDoc of the API if you're interested. swave, you may access to the information of a home through this API, and even... modify a loaded home. Just retrieve the HomePreviewComponent instance returned by viewHome and have fun! For your information, the API of the Javascript classes is some kind of subset of the Java API of Sweet Home 3D, but using a script language here will help to program small additional features much faster. For the 3D view itself, the main missing feature might be an API to manage picking, but that should come soon.
Okh, I added in this release the navigationPanel parameter that lets you display the navigation arrows or completely customize them if needed. I also added the viewerControlsAdditionalHTML parameter to customize the zone below the 3D view, for example to add Forward and Backward buttons displayed in the gallery examples only under Android, where pinch isn't supported in Javascript yet!
Note that the Javascript "minified" core-min.js, geom-min.js, triangulator-min.js, viewhome-min.js and viewmodel-min.js files were renamed with a dot instead of an hyphen and navigationPanel.png was added. So be sure to clean your lib folder if you deploy this new version, and update the <script> tags that reference these files if needed. See you soon for more information about this release
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
