Category: 3d scene creator and web viewer.
Purchase options: Monthly rental or purchase a perpetual licence with one years maintenance.
Price: From $19 / mo for rental, or $790 for a perpetual licence.
30 day Trial: 30 day free trial
What is it?
Shapespark is a tool for converting 3d scenes created in external applications, into web browser compatible interactive experiences. These experiences can then be explored on most modern devices which have a compatible browser, just like any other website. This includes VR headsets such as Oculus Rift, HTC Vive, and even phone based solutions such as Google Cardboard.
Check it out!
Before reading on, you may like to check out the Renderwars test scene, to get an idea of what can be achieved with Shapespark. Click the link below to try it out. (mobile users should hold down and select to open in a new tab)
You’re probably aware that for a few years, various game engines have offered the ability to create 3d experiences which can be viewed in a web browser. The main differences however, are the workflow, the ease of use, and the magic that goes on under the hood to convert the large fbx, obj, or dae files into the much smaller optimised files needed to make a 3d experience suitable for the web.
Unlike the established game engines, scene preparation in your 3d application of choice is far less involved. There are no lightmap UV’s to painstakingly prepare in order to avoid the dreaded overlapping lightmap UV’s error seen in other engines. There are no power of 2 texture limitations, and you don’t even have to worry about compressing your textures! The engine takes care of practically everything for you, and does a great job of it too.
Not only does Shapespark do a great job of automatically reducing the file size of textures, it also optimises the actual geometry to further improve performance. To give you an idea of just how good of a job it does of this, the demonstration scene I created for this review weighed in at 609 MB as an FBX file, but after Shapespark had worked it’s magic, the scene was reduced to a measly 92MB….including the engine itself! Even after the lightmaps were created, the entire scene was still only 119MB.
Although the above is obviously quite an achievement in itself, what will probably appeal to most people, is the ease of use. For example, I remember when I first started using Unreal Engine, there was a LOT to learn. This included naming conventions for the node based materials, different light types, baking settings, node based programming for adding interactivity, supported files formats, texture requirements, seperate menu creation systems, searching forum’s to find which ini files to modify for multi resolution support, setting up controllers, etc etc, the list goes on. Compare this to Shapespark, where you literally hit import, tweak some material values, light strengths, camera settings, basic quality settings, hit bake, and then upload it to the internet. It’s really that simple.
Shapespark goes beyond being just a web based viewer of 3d files, and out of the box it allows for the following:
- Multiple views: The viewer can choose from a pre-configured list of views chosen by you, which they can then click on to teleport to different locations in the scene.
- Guided Tours: The viewer is automatically taken to each of the pre-configured views, briefly stopping at each along the way.
- Per view camera types:
Walk: The user can walk and fly around with the keyboard and mouse, looking around at their own leisure, or teleport using either the mouse, or if in VR using the controllers.
Top: A top down view, ideal for floorplans.
Orbit: A camera which rotates around a movable pivot.
- Audio: Add music, or perhaps add a narration to your guided tour.
- HTML pop outs: Little customisable information bubbles which can be placed around the scene. When the user clicks on them, a html window will open up within the 3d viewer. You can put your own html in here or even an iframe containing a full web site. This is useful if, for example, you want to take the user to a product page or even show a company Youtube video.
- Material pickers: You can assign a choice of materials to replace another. The user can then click on the icon to try out different materials, for example changing the material on a floor.
- Jump to website: If you have a large scene that you need to break up for performance reasons, then you can place these icons appropriately, so that when the user clicks on them, the
browser is redirected to the next scene.
- Adjustable camera settings: Speed, FOV, LUT’s, Exposure, Gamma.
- Sky texture (not used for lighting): Load in one of your own HDRI’s
- Automatic collisions from objects (can be turned off on a per object basis)
- Automatic Reflection probe creation per room (these can be removed, edited and manually created instead).
- PBR materials (roughness, metallic, diffuse, bump, emission, opacity)
- In built render engine with options to use GPU or CPU, for previewing the lighting, and baking out to light maps.
Using Shapespark is very easy, but like all game engines, it’s a good idea to make sure the geometry is as light as possible before importing. I would also recommend removing any geometry that won’t be visible and that won’t receive any illumination, particularly in areas where a lower resolution light map will be used. If you omit this optimisation, you may get dark areas bleeding into light areas. I personally did this in Houdini using booleans where the ground plain was obscured by the drainpipe.
After you’ve prepared your 3d file and exported it, you simply hit import on the Shapespark scene browser, click edit on the resulting file and you’ll then be taken into the Shapespark scene editor.
Once Shapespark has done all of the scene optimisation, you’ll be greeted with the below interface. Here you’ll find a selection of tabs containing settings for the lights, materials, objects, camera, reflection probes (light probes), Sky, the user interface (viewer), and baking options:
From here you may notice that you’re materials look a little lack-lustre. This is because currently Shapespark is only able to read the values for the diffuse colour/texture and also the opacity value. Roughness, metallic, bump, and emissive values will need to manually configured directly in the editor. For this reason, it’s a good idea to use as few materials as possible in your scenes, making sure not to duplicate materials unnecessarily. Thankfully, once the materials are set up, the values don’t get overwritten. So if you need to make amendments to the 3d scene externally and then re-import, you’ll won’t need to re-do the materials.
It’s worth mentioning however that there was recently an update which allows Shapespark to populate all material values from an accompanying JSON file. So as soon as the developers or a member of the community writes the exporter scripts for the various 3d applications, the workflow will be vastly sped up.
Some things to note are that materials can’t be re-assigned in the editor, so you’ll need to make sure the correct materials are in the correct places externally. Also there is no material library, so identical materials will need to be re-created for each new scene. Alternatively you could create a master scene to start from each time, with all of the materials already set up. Again, once the proper exporters are in place this won’t be an issue and you will be able to use the material library functionality of the 3d application you use to create the scenes.
Beyond the materials, it’s just a case of checking the reflection probes are correctly placed, setting up any of the self explanatory extras (such as material pickers, html popouts, audio), creating views, and then finally setting up the lighting.
For those of you who are used to working with render engines like redshift, Fstorm, Vray, Corona, and Cycles, then it may be mildly frustrating that there’s no interactive renderer to help you quickly set up light strengths, so prepare for a bit of tweaking, rendering, tweaking, rendering and so on. The preview renderer itself though is very quick, and thanks to it having the option to use the GPU instead of the CPU, you’ll be able to speed up the process further if you have a decent graphics card.
Once you’ve finished setting up the lights, it’s time to bake the shadows, and this is where Shapespark once again really shines. The scene which accompanies this review contained 8,427,460 faces and yet the initial low quality bake rendered in around 20 minutes!
Setting up the inbuilt renderer is a very straightforward affair and is mostly affected by two values: the samples and the lightmap resolution. Higher samples produce higher quality light maps, but takes longer to bake. Lower samples are good for quickly rendering the scene to make sure the lighting looks as expected. The other setting is the lightmap resolution, which controls how many pixels are used per meter. For large outdoor areas this can be left very low and for areas where you want crisp detailed shadows for close up viewing, the value should be raised. It’s important to mention that this is the global value, which is used only for objects in the scene that don’t have a lightmap overide value applied in the objects tab.
My recommendation would be to group your objects by required lightmap detail in your 3d application. So for example, maybe have one group called ‘Large outdoor area’, containing distant terrain, and another group for indoor areas. This will enable you to set the lightmap for many objects at once. You could also group objects based on visibility, and then in the object panel you can hide groups of objects on a per view basis by applying the setting to the group as a whole, rather than one object at a time. An example of this can be seen in the Floor Plans view of the review scene where I remove everything from the view, apart from the garden and the inside of the house.
One thing I would like to see incorporated in relation to baking, is per light AOV’s, which providing you don’t add or move lights, means you can bake the scene once. After this you would have the ability to change the individual light strengths in a photo editor, or better still in the Shapespark editor itself without the need to re-bake. This would allow you to work far more efficiently, enabling you to set up the lights in real time, rather than a day or so of trial and error.
Once your scene is baked out and you’re happy with the result, you have a number of options depending on your licence type. The two lower tier licences allow you to host a varying number of scenes on the Shapespark servers (3 for the $19 per month licence, and 15 for the $49 per month licence). The top tier rental licence ($99 per month) and the perpetual one off purchase licence ($790 with one years maintenance and hosting) allows you to store up to 50 or 25 scenes respectively on the Shapespark servers. Additionally the two top tier licence types have the added benefit of being able to bundle your scene for deployment to your own server. All licence types allow for unlimited offline scenes, and tier 2 and above allow you to remove the Shapespark branding and replace with your own.
The actual packaging process couldn’t be simpler. All you have to do is click the upload button and your file will be on the Shapespark servers and ready to use with no extra steps.
If you’re on one of the higher tier licences, and want to take advantage of being able to deploy to your own server, then this is equally as straightforward. Simply hit the bundle button and then upload the resulting directory using a FTP program of your choice (Filezilla worked flawlessly for me). Linux servers are recommended, but I believe with a much more complicated set up process, Windows servers are also supported (host allowing).
Shapespark obviously has a lot of pro’s, but there are a few things which may be problematic. Most notably regarding quirks with the controls and the VR headset experience.
Starting with the controls, there are two main problems, the first is that it’s only possible to set one speed of movement. I’m aware that the developers are looking at options to overcome this, but at the time of writing, this is problematic in scenes that have both indoor and outdoor areas (as can be seen in the review scene). This is because for the user to be able to move around large outdoor areas at an acceptable rate, the speed has to be set quite high, but when the user goes inside this can lead to a slightly manic experience… which feels a bit like trying to parallel park a car at 30 mph (I’d imagine). This issue can be overcome somewhat by teleporting around instead of using the keyboard, but in my opinion this is a less appealing method of locomotion.
The second problem with the controls is that teleporting doesn’t work if you’re not on the ground. So if the user is in an aerial view, they can’t click a location on the ground to teleport down to, or rather they can, but they won’t end up where expected. Instead, they’ll end up at a point in space directly above where they clicked, but at their current height. This becomes even more problematic in VR, because teleportation is the only way to move around if your standing up away from your keyboard (which you probably will be), and the list of views isn’t visible either in VR mode, so there’s no way back to the ground without taking off the headset temporarily to use the keyboard and mouse.
3d elements such as the list of selectable views and the extensions, aren’t visible in VR mode as mentioned above, which means that without removing the headset, it’s not possible to take advantage of the interactive features. This includes changing materials, jumping to different areas of the scene, or perhaps more importantly, jumping to different scenes via the open website extension. It’s not a huge problem, but it’s probably worth mentioning, as it may be a bit of a disappointment for clients who are expecting a fully functional VR experience.
Lastly, it’s currently not possible to light interiors and exteriors with only the natural outdoor light. This is because there are no automatic exposure settings, so to get adequate natural lighting through the windows, the sunlight will need to be increased to the point where the outside of the building will be massively over exposed. The developers are considering implementing a portal system, which will amplify the exterior light as it comes through the windows, so this may not be an issue for too much longer. I just hope the portals will be materials rather than light objects that need to be placed near windows. If not, it will still be difficult to avoid bright areas around the outside of windows, and will effectively be no better than adding a small area light directly outside each window opening.
Although there are a few minor areas for improvement which can mostly be worked around, overall Shapespark is an outstanding achievement. The resulting scenes can look great, the file sizes will be optimal, performance over the web is exemplary on a variety of devices, and the workflow and shallow learning curve will enable even complete beginners to produce exceptional results quickly and painlessly.
Another big positive is the support. Email responses to technical enquries have always been very fast and helpful, and software updates containing user requested features and general improvements are generally released as often as once or twice per month.
So in summary, for quick and easy creation of high quality web based interactive 3d, with a solid support foundation, Shapespark is going to be very difficult to beat.
To find out more, and to try the free 30 day trial, visit Shapespark
Freelance 3d artists at 3d-illusions.co.uk