Skip to content

🌌 Skybox & Background Settings

Customize the environment surrounding your 3D scene using the Skybox and Background settings in StorySplat. You can choose between a simple solid color background or an immersive 360° skybox image.

Accessing Environment Settings

  1. In the StorySplat editor, locate the vertical toolbar on the left.
  2. Click the "Skybox" button (🖼️ icon).
  3. The Skybox panel will appear, containing options for both background color and skybox images.

Background Color

  • Purpose: Sets a uniform solid color for the scene's background when no skybox is active.
  • How to Use:
    1. In the Skybox panel, locate the "Background Color" section.
    2. Click the color swatch.
    3. Use the color picker that appears to select your desired background color.
    4. The scene background will update in real-time.
  • Note: This color is only visible when no skybox image is enabled.

Custom Skybox Images

  • Purpose: Creates an immersive 360° background using an equirectangular image, simulating a surrounding environment.
  • Format: Requires equirectangular (also known as spherical or 360x180 panorama) images. Common formats like .jpg and .png are supported. HDR formats (.hdr) may also work depending on browser/device capabilities, but standard image formats are recommended for broader compatibility.
  • How to Use:
    1. Upload: Click the "Upload Skybox" button (☁️ icon) in the Skybox panel. Select an equirectangular image file from your computer.
    2. Manage: Uploaded skyboxes appear in the list within the panel. Each item shows a preview thumbnail.
    3. Enable/Disable: Click the "Enable" button next to a skybox in the list to activate it. The scene background will update to show the 360° image. Click "Disable" on an active skybox to turn it off and revert to the solid background color. Only one skybox can be active at a time.
    4. Delete: Click the Trash Can icon (🗑️) next to a skybox to permanently remove it from the scene's available skyboxes and your storage.

Tips for Effective Skyboxes

  • Image Quality: Use high-resolution images for the best visual results. A minimum resolution of 4096x2048 pixels is recommended, but higher resolutions (like 8192x4096) provide more detail. Be mindful of file size impacting load times.
  • Projection: Ensure your image is in the equirectangular format. Other projection types (like cube maps) are not directly supported via simple upload.
  • Seams: Check your image for visible seams where the left and right edges meet. Use image editing software to correct seams for a seamless wrap-around effect.
  • Lighting Consistency: Choose a skybox whose lighting conditions (e.g., sunny day, overcast, night) roughly match the intended lighting of your splat or meshes for a more cohesive look (though remember, the skybox itself doesn't directly light the splats).
  • File Size: Compress your skybox images (e.g., optimized JPG) to balance quality and load time.

Saving and Exporting

  • The list of uploaded skybox URLs and the currently activeSkyboxUrl are saved with your scene configuration (.json, Cloud Save).
  • When you Export to HTML, the currently active skybox will be embedded or referenced in the export, providing the background for the standalone viewer. Uploaded skybox images themselves are typically referenced via their cloud storage URL in the export.

Previous: Sharing and Export | Next: SplatSwap