Over a million developers have joined DZone.

A First Look at Model I/O's Sky Cube Texture

DZone's Guide to

A First Look at Model I/O's Sky Cube Texture

A tutorial demonstrating the Sky Cube Texture in Swift to create a physically realistic simulation of light.

· Mobile Zone ·
Free Resource

Image title

My recent blog post, Controlling Metal Reaction Diffusion Systems with the iPad Camera, demonstrated using Model I/O's procedural noise texture in a Metal scene. This post looks at using Model I/O's MDLSkyCubeTexture in a SceneKit project.

MDLSkyCubeTexture procedurally generates a physically realistic simulation of a sunlit sky. It's ideal for use as a background or a reflection map and, excitingly, it can be used in conjunction with Model I/O's light probe to create irradiance maps to light 3D geometry based on textures.

As an introduction to the fundaments of using MDLSkyCubeTexture, I've created a simple demo application based on SceneKit that contains a rotating torus using the sky cube texture as a reflection map. I've also applied the same texture as the scene's background. 

Creating the sky cube texture (which is of type MDLTexture) is pretty simple. Its initialiser requires some basic properties:

  • Turbidity: A measure of dust and humid in the atmosphere. A value of zero simulates a clear sky while a value of one causes the sun's color to spread.
  • Sun Elevation: A value of 0.5 puts the sun level with the horizon, 1 puts the sun directly overhead and 0 directly underneath.
  • Upper Atmosphere Scattering: A value of 0 gives warm, sunset colors, while a value of 1 simulates noon colors.
  • Ground Albedo: The amount that light bounces back up into the sky from the ground. A value of 0 gives a clear sky, while a value of 1 simulates a slight fog. 

The code to instantiate the cube texture looks like:

    let sky = MDLSkyCubeTexture(name: nil,
        channelEncoding: MDLTextureChannelEncoding.UInt8,
        textureDimensions: [Int32(160), Int32(160)],
        turbidity: 0,
        sunElevation: 0,
        upperAtmosphereScattering: 0,

        groundAlbedo: 0)

With the help of UIStackView, I've laid out my screen with a main SceneKit view and four sliders for controlling those properties. When any of the sliders are changed, sliderChangeHandler() is invoked to update the sky cube texture. 

This is quite a heavy weight operation, so I do it in a background thread to keep the user interface responsive. But in a nutshell, I set the four properties discussed above from their respective sliders:

    self.sky.turbidity = self.turbiditySlider.value
    self.sky.upperAtmosphereScattering = self.upperAtmosphereScatteringSlider.value
    self.sky.sunElevation = self.sunElevationSlider.value
    self.sky.groundAlbedo = self.groundAlbedoSlider.value

Then explicitly update the texture:


From the updated texture, I can get an unmanaged object reference to the CGImage of the sky cube and assign it to the reflective property of the torus's material and to the background property of my scene:

    self.material.reflective.contents = self.sky.imageFromTexture()?.takeUnretainedValue()
    self.sceneKitScene.background.contents = self.sky.imageFromTexture()?.takeUnretainedValue()

...and that's all there is to it! This code was written under Xcode 7 beta 3 and tested on an iPad Air 2 running iOS 9 beta 3. The source code for the project is available at my GitHub repository here. Enjoy!

mobile ,ios ,scenekit ,swift

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}