TutorialThis tutorial guides through the process of creating a Shapespark visualization. It describes how to import a 3D model to Shapespark, bake the light information - the so called lightmap - to give it a realistic look, adjust material reflectivity settings, and upload the visualization to the Internet to make it public.
Import the 3D model to ShapesparkExport the SketchUp model using the Shapespark extension for SketchUp (for information on how to import a model from other 3D modeling software, see the Importing the scene section of the help). You can use the example-room SketchUp model as an example.
- Open the export dialog using the Export to Shapespark button from the Shapespark extension toolbar.
- Configure the export to create a new scene with the sun included and run the export.
Add realistic lighting (bake a lightmap)
- Open the newly created Shapespark scene for editing.
- Find the scene on the list of scenes in the main Shapespark window.
- Open the scene editor using the Edit button.
- You can navigate through the scene using the mouse and the keyboard.
- Make sure that transparent materials are correctly configured.
In particular, the windows should allow the outside light to enter
- In the Materials tab, for each transparent material set its opacity to a value close to 0 (for example: for plain glass use opacity of 0.05).
- Configure lights in the scene.
- Walk through the scene and using the Preview button in the Bake tab evaluate how the scene is illuminated. The goal of the preview is to give an indication on how the scene will look like after baking. The noise can be ignored, and usually, there is no point in waiting for the preview to finish - it can be closed as soon as it gives enough information.
- If the light coming from the outside is too weak adjust the rotation and the strength of the Sun light in the Lights tab and/or the strength of the sky in the Bake tab.
- To illuminate the rooms not having direct access to the outside light, such as bathrooms or wardrobes, artificial lights need to be added. From within the Lights tab place spot lights in such rooms and configure the strength of these lights.
- Bake a draft version of the lightmap.
- In the Bake tab set the number of samples to 100 and use the Bake button.
- If you are satisfied with your lighting setup, bake the final version of the lightmap using 800 samples (you can also do it later, after reflective materials are configured).
Configure reflective materialsIn each key room:
- From within the Light probes tab add a light probe in the center of the room. A light probe captures the panorama of its surroundings and is necessary to generate reflections in the nearby objects.
- In the Materials tab, for each material that you would like to make reflective adjust its roughness and metallic properties.
Add pre-defined viewsThe pre-defined views (points of interest) help to navigate the scene.
- Switch to the Viewer tab.
- Walk through the scene and add views in the places that you would like to make easily accessible to the user.
- The first view on the list becomes the initial view that is shown when the visualization starts.
Upload the scene to the InternetUse the Upload button in the main Shapespark window (the one with the list of scenes).
Your scene is ready for viewing. Visit the Shapespark site to get a public link to it.
Frequently Asked QuestionsFAQ
What are the system requirements for opening scenes?A WebGL capable browser is required to open scenes created with Shapespark (Chrome, Firefox, Safari, Edge, Internet Explorer 11 all support WebGL).
Can scenes be opened on mobile devices?Yes, Android and iOS mobile devices are supported. Large scenes with complex geometry or large number of textures need to be optimized to run on mobile devices due to limited available memory.
What are the system requirements for creating scenes?To create scenes you need a machine with 64-bit Windows 7, 8, 8.1 or 10 and a minimum 4GB RAM.
Which browsers and devices allow to view scenes in VR?
- Google Cardboard with any stock WebGL enabled mobile browser (Firefox, Chrome, Safari).
- Daydream with the latest stable Chrome mobile browser.
- Oculus Rift and HTC Vive with Firefox nightly or Chrome experimental builds. See the installation instructions.
How to change location in the VR mode?
If you use a device without a VR controller (for example Cardboard), you need to gaze at a chosen destination place to activate a timer and teleport to the place.
If you have a VR controller or a gamepad, you can use the controller button to immediately activate the teleport.
For a desktop VR experience you can also use numeric keys (1-9) to teleport to predefined views in the scene.
Using a mouse and keyboard navigation with the desktop VR is also possible, but such traditional input methods can cause discomfort for some VR users.
How to enter the full screen mode to use Google Cardboard with iPhone?You need to use the Safari browser and add a home screen icon with a link to your scene (Tap Share, Add to Home Screen). The icon will open the scene in the full screen mode.
How to increase the resolution of scenes in Google Cardboard?On high-end phones you can run a scene in higher resolution on Cardboard by adding #vrhi to the scene URL (for example https://formikodesign.shapespark.com/flat-for-a-couple-3/#vrhi
Is Gear VR supported?No, the GearVR browser uses an old version of the WebVR specification and is no longer supported.
Can a 3D model be created in Shapespark?No, the model needs to be created in a 3D modeling program and imported to Shapespark.
Which material properties are imported to Shapespark?Diffuse color, diffuse texture and opacity are imported. Other properties, such as reflections-related properties, need to be set in the Shapespark editor.
Are settings in the Shapespark editor preserved when the model is updated?Yes, you can update the model and all the settings are preserved.
Does Shapespark require an external renderer, such as V-Ray, to bake lightmaps?No, Shapespark has an integrated path-tracing renderer for baking lightmaps.
What is the difference between CPU and CUDA lightmap baking?CPU and CUDA baking produce identical results, the differences are:
- With high-end graphics cards CUDA baking is usually faster than CPU baking.
- CPU baking is available on all computers, CUDA baking is available only on machines with CUDA-enabled NVIDIA graphics cards.
- CUDA baking is experimental, it may fail with some GPUs or drivers in which case CPU baking should be used.
Do I need to unwrap my model and export lightmap UV coordinates to Shapespark?No, Shapespark automatically generates lightmap UVs.
What are the optimal texture sizes to use in scenes?You don't need to optimize the texture sizes. Shapespark automatically scales down each texture based on the area of the textured surface in the scene.
Can I add custom branding to my scenes?Yes, the commercial license allows to brand the Shapespark viewer:
- In the Viewer tab of the Shapespark editor you can hide the Shapespark logo, set your company name and a link to your site.
- In the Settings tab at https://cloud.shapespark.com you can set a link to your logo that will be displayed at the top left corner of your uploaded scenes.
- For more advanced customizations you can edit the scene index.html file and modify the viewer styling in any way you like.
Exporting scenes from SketchUp
How do I install the SketchUp extension for exporting models?The extension is installed automatically when the Shapespark application is installed. If you have installed Shapespark before SketchUp, you need to uninstall Shapespark and install it again (your existing scenes won't be deleted during uninstall).
Can SketchUp models be imported to Shapespark via the COLLADA format?This is not recommended, to avoid problems with missing textures or invalid scale it is better to use the Shapespark extension to export SketchUp models.
What are the limitations of the trial version?The trial version gives access to all Shapespark features except custom branding, but it can be used only for evaluation purposes and only for 30 days.
Do I need to give credit card details to download the trial version?No, credit card details are not required to download the trial.
Purchase, renewal, support
What payment methods are supported?Credit card, PayPal or wire transfer.
What is Paddle?Paddle is a reseller that handles payments and invoicing for Shapespark.
What does the one year of free updates mean?For one year after purchasing the Shapespark license you will be receiving automatic updates that contain new functionality and improvements.
What happens after the one year?You can either extend the automatic Shapespark updates for another year for half of the application price or continue using the software as is, without further updates.
What kind of support is provided?You can ask questions and report problems via the application built-in problem report form or the firstname.lastname@example.org email. The priority is given to users that purchased or updated commercial licenses within the last year (max. 24h response time during the workweek).
Do I need to pay the monthly fee to host scenes?
A one year of the Standard hosting plan is included for all users that buy Shapespark.
After the one year, you can either renew the Shapespark updates which extends the Standard hosting plan for another year, use the Basic hosting plan (with 5 scenes and no custom branding), or pay a monthly fee for the Standard hosting plan.
If you would like to host more than 25 scenes, you can buy additional packets that extend the Standard plan scene number limit.
For local presentations on your computer you don't need any hosting plan.
Trial users can use the Basic hosting plan for the duration of the trial.
Are deleted scenes or scenes on my local computer counted against my hosting plan scene number limit?No, only scenes that are listed on your https://cloud.shapespark.com account are counted.
My project is confidential, how can I safely present it with Shapespark?
You can present a scene on your computer without uploading the scene. Not uploaded scenes cannot be accessed on the Internet.
If you would like to upload a confidential scene and share it privately by link, you can create an obfuscated scene name by appending a random characters to it (for example 'building-grymgutunsav'). A link to such a scene gives a reasonable level of confidentiality if it is shared with care.
Links to uploaded scenes are never shared on Shapespark homepage, social media or by any other means without first asking for the scene author's consent.
Some faces of a 3D model are not visible in ShapesparkShapespark renders only front side of each face. If a face is not visible in Shapespark the face orientation should be flipped in the 3D modeling program. External guides:
Flickering artifacts on some surfaces
Flickering (z-fighting) can be visible when two surfaces overlap each other or when they are very close to each other. The problem is magnified when such close surfaces are observed from a large distance, so large scenes, such as exteriors or office spaces, are more affected.
To fix z-fighting the distance between overlapping surfaces should be increased or, if possible, one of the surfaces should be removed (for example if a floor surface is fully covered by a carpet, the floor can be removed).
The camera moves too slowly or too fast
Shapespark assumes real-world scale of imported models: 1 meter in the model should correspond to 1 meter in the real world. Camera barely moving or moving too fast indicates a problem with the model scale. Such model should be rescaled in the 3D modeling program.
For models imported to Shapespark via FBX or OBJ that use the real-world scale but do not use 1 meter as the basic unit, a different basic unit should be selected in the Shapespark import dialog (1 cm, 1 mm or 1 inch).
Rectangular artifacts in baked scenes
Strong light sources directly illuminating objects that are very near cause random reflection artifacts called fireflies. Such fireflies are blurred during the denoising step of the lightmap baking and can form visible rectangular areas. Darker scenes are more difficult to handle for the lightmap denoising algorithm, so fireflies related artifacts are more visible in such scenes. The most common case when fireflies occur is when a point light source is placed very closely to a ceiling or walls.
To remove fireflies a light source should be either moved away from a nearby object or changed to a spot light oriented in such a way that the nearby object is not directly illuminated.
Baking the scene with more samples alleviates the problem. In bright scenes baked with enough samples fireflies are often completely masked by the lightmap denoising step.
Importing the scene
SketchUpImporting models from SketchUp is handled through a dedicated SketchUp extension accessible from the SketchUp toolbar or from the Extensions > Shapespark menu.
- Make sure the Shapespark application is running.
- Open the SketchUp model.
- Open the export dialog using the Export to Shapespark button from the toolbar or the Extensions > Shapespark > Export menu item.
- Configure the export:
- Export type - Selects if a new scene is created created or an existing scene is updated.
- Scene name - The name of the scene in Shapespark.
- Include sun - If enabled, the SketchUp sun is exported. The sun shadows in Shapespark match SketchUp shadows.
- Start the export and wait for it to finish.
- The exported scene is now added to the list of scenes in Shapespark.
3ds Max3ds Max models can be imported to Shapespark through the FBX format.
- Export the 3ds Max model with the Export item of the
- Inside the Select File To Export window select the Autodesk (*.FBX) format in Save as type.
- Inside the FBX Export window:
- Select the Autodesk Media & Entertainment preset in Presets > Current preset.
- Inside Advanced Options > Units, clear the Automatic checkbox and choose Meters in Scene units converted to.
- Import the exported FBX file using the Import .fbx
.dae .obj button in the main Shapespark window.
- Use Input scale of 1m.
- To update the Shapespark scene after it is modified in 3ds Max, export it again and use the Update button in the main Shapespark window.
Export issuesIf the model imported to Shapespark does not match the original 3ds Max model, check the following potential issues and their solutions.
Material properties are missingThe 3ds Max's FBX exporter supports only the Standard (scanline) material type. If your model uses different material types, convert the materials to Standard ones before the export in order to transfer the material properties (including diffuse color, diffuse texture, transparency) to Shapespark. Only simple material setups can be exported, texture-related nodes like MultiTexture, ColorCorrect, Noise etc. are not handled. The conversion process can be automated with a free material converting script like MultyConvertor or VRayMtlConverter (preferred for V-Ray materials).
Some objects are missingNot all the 3ds Max object types are handled by the FBX exporter or Shapespark. If a 3ds Max object is missing in Shapespark, convert it to Editable Mesh or Editable Poly using the Convert To item from the right-click object menu, and retry the export.
Some objects are misplaced/misrotatedThe FBX file may incorrectly convey node transformations in some cases (especially if the Mirror tool has been applied to the node). If an object or a group is misplaced or misrotated, reset its pivot using the Reset Pivot button from the hierarchy panel.
MayaMaya models can be imported to Shapespark through the FBX format.
- Export the Maya model with
File > Export All... or
File > Export Selection... menu item
using the following settings:
- Select FBX export in Files of type.
- Inside Options... > File Type
- Select the Autodesk Media & Entertainment preset in Presets > Current preset.
- Inside Advanced Options > Units, clear the Automatic checkbox and choose Meters in File units converted to.
- Import the exported FBX file using the Import .fbx
.dae .obj button in the main Shapespark window.
- Use Input scale of 1m.
- To update the Shapespark scene after it is modified in Maya, export it again and use the Update button in the main Shapespark window.
Cinema 4DCinema 4D models can be imported to Shapespark through the COLLADA (DAE) format.
- Export the Cinema 4D model with
File > Export... > COLLADA 1.5 (*.dae)
menu item using the following settings:
- Clear the Export 2D geometry checkbox.
- Clear the Export animation checkbox.
- Select the Export triangles checkbox.
- Import the exported COLLADA file using the Import .fbx .dae
.obj button in the main Shapespark window.
- Use Input scale of 1m.
- To update the Shapespark scene after it is modified in Cinema 4D, export it again and use the Update button in the main Shapespark window.
Export issuesIf the model imported to Shapespark does not match the original Cinema 4D model, check the following potential issues and their solutions.
Material properties are missingThe Cinema 4D's COLLADA exporter supports only the standard C4D material type. If your C4D model uses different material system, convert the materials to standard ones before the export in order to transfer the material properties to Shapespark. Only the Color and Transparency material channels are exported and translated to Shapespark's base color/texture and opacity material properties. Texture-related shaders like Colorizer, Filter, Noise etc. are not handled.
Textured materials are solid redShapespark imports a material as solid red, if it cannot find a texture referenced by the material in the COLLADA file. To help locating the textures, save the project together with all its assets in one place by using the File > Save Project with Assets... menu item and export the newly saved project.
- Hold left - look around
- Click left (outside of the scene edit mode) - walk to the clicked place
- Click left (in the scene edit mode) - select materials, lights, objects
- Scroll - walk straight
- Arrow keys - walk straight and look around
- Page Up/Page Down - change height
- WSAD keys - walk straight and strafe
- Q/E - change height
- Tap - walk to the tapped place
- Slide - stop walking, look around
- Gaze at a fixed place - activate a timer and teleport to the place when the timer runs out
- Click a VR controller or a gamepad button - immediately activate the teleport
Editing the scene
Lightmap bakingA lightmap is a texture that stores information on how much light reaches each part of the scene. The Bake tab controls the lightmap baking process.
- Samples - The number of light
rays that are emitted from each pixel of the lightmap. The
more samples, the longer the baking takes, and the more
accurate and less noisy the result is. Example values:
- 10 - low quality bake to quickly detect problems with the scene,
- 100 - decent preview bake,
- 800 - good quality final bake.
- Bounces - The number of light ray bounces that are traced for each sample. Higher values allow to better illuminate dark, hard to reach places. 6-8 bounces is enough for most scenes.
- Lightmap resolution - The number of lightmap pixels corresponding to 1 meter of distance in the scene. Higher lightmap resolution improves the quality, but increases the lightmap size and the baking time. The default value of 75 is usually a good compromise, it means that a 1 x 1m square in the scene is mapped to a 75 x 75px rectangle in the lightmap.
- Use sky - Enables the sky, which is a key light source that allows to nicely illuminate all areas with windows. If enabled, the sky Color and Strength can be configured.
- Use ambient occlusion - Enables fake ambient light that decreases realism but simplifies scene configuration, because light sources do not need to be added in all dark areas. Should be disabled for most scenes.
- Flood dark limit - The threshold for the post-processing filter that masks black pixels leaking from occluded faces in the scene (for example from underneath a picture hanging on the wall). Such black pixels are a result of a limited lightmap resolution. Can be increased if such artifacts are visible after baking.
- Device - The device used for the baking process: CPU or CUDA-enabled graphics card. High-end CUDA devices bake faster than CPUs, but the support for CUDA is experimental: baking with some graphics cards can fail, in which case a CPU should be used.
- Preview - Generates a static render from the current camera position that shows how the scene is illuminated.
- Bake - Bakes the lightmap and applies post-processing filters.
- Post-process - Reapplies post-processing filters without baking again. Allows to tweak the Flood dark limit setting.
LightsLights in the scene can be added in the Shapespark editor Lights tab or imported from a 3D modeling program. The latter method is usually more convenient, because it allows to attach light sources to 3D objects, such as light fixtures.
- Spot - Adds a spot light in the current camera position. The spot light beam is restricted by a cone with adjustable angle and rotation.
- Point - Adds a point light in the current camera position. A point light emits rays uniformly in all directions.
- Sun - Adds a sun light at the zenith point of the sky. A sun is a distant light source that emits parallel rays into the direction specified by the light rotation.
- Type - The light type.
- Strength - The light strength.
- Size - The light size in meters. Larger lights cast softer shadows, smaller lights cast harder shadows. Depending on a lightmap resolution too hard shadows can result in a pixelated lightmap.
- Color - The light color.
- Angle - The angle of the spot light.
Light probesA light probe captures 360° panorama of its surroundings that is used to generate reflections. Light probes should be added in key rooms, preferably positioned near room centers, at the eye level. If a room does not have a light probe, the closest light probe from another room is used, which results in not accurate reflections. In many cases such inaccuracies are not noticeable and can be ignored.
- Light probes - Adds a light probe at the current camera position.
- Bounding box - Toggles a bounding box for the light probe. The bounding box is used to generate more accurate reflections of objects that are close to the bounding box sides. It is most useful if the light probe is generated inside a rectangular room, in which case the bounding box sides should line-up with the room walls, the ceiling and the floor. The bounding box is denoted with blue lines. It is automatically initialized when the light probe is added, and can be modified with the Bounding box min and Bounding box max controls.
MaterialsThe Materials tab allows to set following properties of materials:
- Base color - The texture name or the RGB value of a solid color. Controls the diffuse color of a non-metallic material or the reflection color of a metallic material. By default, the base color is imported from a 3D modeling program. If the Override flag is enabled, the color can be set in the editor and will not be altered by the future imports of the scene.
- Opacity - Like the base color, the opacity is by default imported from a 3D modeling program, but can be overridden. It is important to correctly configure all transparent materials before baking the scene, and in particular to let the outside light enter the interiors through windows. A good way to configure colorless glass is to set the base color to (0, 0, 0), and the opacity to a small value, like 0.05. Such setting means that the glass blocks 5% of the incoming light.
- Emissive - Makes the material emit light with configurable Strength. Emissive materials are useful to model lights with non-standard shapes, such as fluorescent tubes, LED strips, or TV screens.
- Metallic - 1.0 for metals, 0.0 for everything else. Materials that have only some parts made of metal can use a metallic texture instead of a single value. The texture uses the base color UV channel.
- Roughness - The roughness of the material. 0.0 for polished surfaces with mirror-like reflections, 1.0 for roughest surfaces with no reflections. Materials with non-uniform roughness can use a roughness texture . As with the metallic texture, the roughness texture uses the base color UV channel.
- Parallax correction - If enabled, a light probe bounding box is used to attempt to correct the placement and size of reflections.
SkyThe Sky tab allows to replace the default procedural sky with a sky texture that surrounds the scene. The sky texture should be a 360x180° equirectangular panorama, otherwise it will have visible stitches. When the texture is selected its Rotation can be adjusted.
The Objects tab allows to inspect the geometry of the scene and set object-specific properties.
Each object in the scene have a type assigned to it, for example a chair. An object can be composed of child objects that have their own types. The chair can be composed from a single object of a type back, four objects of a type leg and a single object of a type cushion. One object type can have multiple instances, there can be four chairs of the same type in the scene.
The tree control in the Objects tab allows to inspect the objects hierarchy. The objects are sorted to show the one with the most faces first. The sorting helps to identify the most complex objects that may need to be optimized if the scene is too large.
The selected object is marked with the green color, and the objects of the same type as the selected one are marked with the orange color.The following properties can be assigned to an object type:
- Custom lightmap resolution - Replaces the default lightmap resolution. This is mostly useful to decrease the lightmap resolution for large, but not key parts of the scene, like outside walls or the terrain around the building.
- Custom collisions setting - Allows to disable collisions for objects through which the camera may pass (for example: closed door).
The above settings affect all the objects of the given type and all their child objects, unless a child sets its own values. For example, if an object of type exterior is composed of terrain, plants and a road, setting custom lightmap resolution for the exterior sets it also for the three child objects.
Scene statistics show the total size of the scene geometry (the number of faces and the size of geometry buffers used by the GPU).
- Exposure - Applies exposure correction, which changes the brightness of the scene. Camera exposure does not affect lightmap baking. It can be used to make the scene brighter or darker without adjusting light strength and re-baking. Exposure 0 is neutral.
- Gamma - Changes the contrast of the scene. Gamma also does not affect lightmap baking. Gamma 1.0 is neutral.
- Field of view - The angle in degrees that specifies how wide is the part of the world that the camera captures in a single frame.
- Color map - Sets the color correction lookup texture (LUT). This is a popular technique used by game engines to alter the final look of the scene (make it brighter, darker, warmer, bluish, etc.). The texture dimensions are usually 256x16 which simulate a single 16x16x16 3D texture. On the web you can find examples of such textures and an explanation on how to create them from scratch.
- Auto climb - Enables automatic adjustment of the camera height when the camera moves above stairs or unlevel terrain. If enabled, all floors, stairs and outside terrain must have the Walk on flag set in the Objects tab. The auto climb setting takes effect only in the scene view mode (not in the edit mode).
ViewerThe Viewer tab allows to customize the look of the Shapespark viewer and to create a list of points of interest in the scene.
- Title - Sets the displayed project title.
- Author - Sets the displayed project author.
- Link - The site that is opened when the author text is clicked in the viewer.
- Shapespark logo - Toggles visibility of the Shapespark logo.
- Menu visible on start - If disabled, the navigation menu is collapsed when the visualization is loaded.
- - Adds a view with the given name in the current camera position.
- - Removes the view.
- ▲ and ▼ - Move the selected view up and down on the list.
Uploading and embedding
The Upload button in the main Shapespark window uploads the scene, which can be then viewed at https://your-user-name.shapespark.com/your-scene-name/.
The scene can be also embedded in any website with a following HTML snippet (you need to change your-user-name and your-scene-name, you can also adjust width, height and other style properties to match your site):
<iframe style="width: 800px; height: 600px; border: none;" allowfullscreen allowvr scrolling="no" src="https://your-user-name.shapespark.com/your-scene-name/"> </iframe>