Using environment cubemap textures

Use an environment cubemap texture to represent the environment, such as an outdoor scene or an indoor space. You can create an environment cubemap texture for an hdr or exr image. An environment cubemap texture combines six square-shaped images into one texture to represent the environment.

Creating environment cubemap textures

To create an environment cubemap texture:

1. In the Assets click Import Assets and select an hdr or exr image for which you want to create an environment cubemap texture.

   

   Tip

   To create an environment cubemap texture for an hdr or exr image that you have already imported to your Kanzi Studio project, in the Library > Resource Files > Images press Alt and right-click that image and select Environment Cubemap Texture.

   

2. In the Create Textures for HDR Images dialog:

   1. Select Environment Cubemap Texture.

      

      Tip

      To create for the image also irradiance and specular cubemap textures that represent the lighting coming from the environment, select Image-Based Lighting Cubemap Textures. See Using image-based lighting cubemap textures.

   2. (Optional) To manually set the size of the cubemap faces, disable the Automatic setting and set the Cubemap Face Resolution.

      For example, to create an environment cubemap texture where the size of each cubemap face is 512 by 512 pixels, set Cubemap Face Resolution to 512.

      Kanzi Studio by default creates a cubemap texture where the width and height of each cubemap face is one quarter of the width of the image that you import.

      

   3. Click Create.

   Kanzi Studio imports the image and creates in the Library > Materials and Textures > Textures an environment Cubemap Texture for that image.

   Kanzi Studio creates and sets the cubemap face images:

   • NegZ Image to the front face image

   • PosZ Image to the back face image

   • NegX Image to the left face image

   • PosX Image to the right face image

   • NegY Image to the bottom face image

   • PosY Image to the top face image

   

   Tip

   You can restrict the brightness of strongly lit areas in the textures that you create from an HDR image.

   To set the maximum brightness level in the cubemap textures that you create from an HDR image:

   1. In the Library > Resource Files > Images select the image, in the Properties add the Clamp Pixels property and set it to the value to which you want to restrict the color values in the cubemap face images that you create from that image.

   2. In the Library > Resource Files > Images press Alt and right-click the image and select the cubemap texture that you want to create.

   

Using an environment cubemap texture

To use an environment cubemap texture:

1. In the Library press Alt and right-click Materials and Textures, select Material Type, and name it. For example, name it EnvironmentMap.

   This way you create a material type and a material that uses the material type.

   

2. In the Library > Materials and Textures > Material Types in the material type that you created double-click the Vertex Shader to open it in the Shader Source Editor.

   

3. Replace the contents of the vertex shader file with this shader code, and click Save.

   precision mediump float;
   
   attribute vec3 kzPosition;
   
   uniform highp mat4 kzProjectionCameraWorldMatrix;
   uniform highp mat4 kzWorldMatrix;
   uniform highp vec3 kzCameraPosition;
   
   varying vec3 vEnv;
   
   void main()
   {
       vec4 vertex4 = vec4(kzPosition.xyz, 1.0);
       vEnv = (kzWorldMatrix * vertex4).xyz - kzCameraPosition;
       gl_Position = kzProjectionCameraWorldMatrix * vertex4;
   }
   

4. Open the Fragment Shader, replace the existing shader code with the code in this step, and save the shader.

   This shader enables representing an environment cubemap texture as a skybox.

   precision mediump float;
   
   uniform samplerCube TextureCube;
   uniform float BlendIntensity;
   
   varying vec3 vEnv;
   
   void main()
   {
       vec4 color = textureCube(TextureCube, vEnv);
       gl_FragColor = color * BlendIntensity;
   }
   

5. In the Library > Materials and Textures > Material Types select the material type whose shaders you edited, in the Properties click Sync with Uniforms, and in the Create Property Type dialog click Yes to create the TextureCube property type.

   

6. Select the nodes where you render the environment and in the Properties add and set:

   • Mesh Material or Material to the material that uses the material type that you created.

   • Material > TextureCube to the environment cubemap texture that you want to use. Creating environment cubemap textures.

   For example:

   1. In the Node Tree create six Plane nodes, select them, and in the Properties set the Width and Height properties to 20.

      

   2. For each Plane node that you created, in the Properties add and set the Render Transformation property Rotation and Translation property fields to the values listed in this table:

      Node	Rotation	Translation
      PosX	Y = -90	X = 10
      NegX	Y = 90	X = -10
      NegZ		Z = -10
      PosZ	X = 180	Z = 10
      NegY	X = 90	Y = 10
      PosY	X = -90	Y = -10

      For example, you render the right face image in the PosX node which you rotate -90 degrees along the y axis and translate 10 units along the x axis.

      

   3. In the Node Tree select all six Plane nodes and in the Properties add and set:

      • Mesh Material to EnvironmentMapMaterial

      • Material Properties > TextureCube to my_hdr_image_environment

      

   4. Position a Camera node inside the environment that you created.

When you rotate the camera, in the Preview you can see the environment texture rendered as a skybox.

See also

Using single textures

Using cubemap textures

Using image-based lighting cubemap textures

Creating textured materials

Images

Material types and materials

Importing