Develop
Develop
Select your platform
Create an environment
Updated: Nov 25, 2024
Overview
Spatial SDK offers multiple options to customize your app’s environment to achieve your desired look and feel. By configuring skyboxes, you can define the backdrop of your virtual world with expansive images, while image-based lighting can cast plausible real-world light and reflections on objects within your scene. This page will guide you through the steps to configure both features, ensuring your application not only performs well but also looks good.
Skybox
A skybox is the background of a Meta Spatial app. Without a skybox, the background of an app would appear black and empty.
Creating a skybox mesh
A skybox is essentially a large, spherical mesh with a texture on it. You can create a skybox just like you create a regular mesh:
Entity.create(
listOf(
Mesh(Uri.parse("mesh://skybox")),
Material().apply {
baseTextureAndroidResourceId = R.drawable.skydome
unlit = true
},
))
Applying a skybox material
You can customize the skybox by applying different materials. The materials can be a solid color or an image.
- Using a solid colorHere’s an example of applying a yellow color to the skybox with the following RGBA values:
rgba(1.0f, 1.0f, 0, 1.0f). Each float value ranges from 0 to 1.import com.meta.spatial.core.Color4 Entity.create( listOf( Mesh(Uri.parse("mesh://skybox")), Material().apply { baseColor = Color4(1.0f, 1.0f, 0.0f, 1.0f) }) - Using an imageThe skybox material can also be an equirectangular image. You can apply a material with the image texture like this:
Entity.create( listOf( Mesh(Uri.parse("mesh://skybox")), Material().apply { baseTextureAndroidResourceId = R.drawable.skydome unlit = true }, ))R.drawable.skydomerefers to the local file ofres/drawable/skydome.jpg, andunlit = trueprevents scene lighting from affecting the skybox
Image-based lighting
Image-based Lighting (IBL) is an efficient method for achieving realistic lighting conditions without the need to manually configure the lighting environment.
Enabling IBL
Follow these steps to enable IBL:
- Obtain an HDR file. Various sources provide these files, but PolyHaven is a recommended source and free for commercial use. In the download options, select 4K HDR.
- Convert the HDR file to an
.envfile using the Babylon js texture tool. Drag and drop your file into the tool, and it will generate an.envfile for download. - Add the
.envfile to your app assets in the/<appname>/assets/folder. - Enable the
.envfile in your app by adding the following code to your main activity’sonSceneReady()method:scene.updateIBLEnvironment("filename.env") - Optional: Turn off your ambient light source in your scene, as IBL generally provides ample ambient light.
scene.setLightingEnvironment( Vector3(0.0f, 0.0f, 0.0f), // ambient light color (none in this case) Vector3(0.6f, 0.6f, 0.3f), // directional light color -Vector3(1.0f, 3.0f, 2.0f), // directional light direction ) - Optional: Ensure your skybox is unlit. Otherwise, it may look strange.
- Optional: You can adjust the intensity of your IBL using the environment intensity multiplier:
scene.setLightingEnvironment( Vector3(...), Vector3(...), Vector3(...), 0.8f // lower number means darker, default is 1.0f )
Did you find this page helpful?
Virtual reality / Meta Horizon
Support and legal
Virtual reality / Meta Horizon
Support and legal
Virtual reality / Meta Horizon
Support and legal
English (US)
© 2025 Meta