Using the Stereoscopy plugin

To stereoscopically render 3D content in your Kanzi application:

  1. Set up your Kanzi Studio project and import the Stereoscopy plugin. See Setting up your Kanzi Studio project.

  2. Create and set up the render passes to stereoscopically render 3D content. You can create the stereoscopic effect:

Setting up your Kanzi Studio project

To set up your Kanzi Studio project for the Stereoscopy plugin:

  1. Make sure that the solution configuration you use in Visual Studio to build your application and plugin projects matches the settings of your Kanzi Studio project. For example, if you use the GL_vs2015_Release solution configuration in Visual Studio, in your Kanzi Studio project in the Project > Properties set:

    • Preview OpenGL ES Wrapper to GL (Emulation through desktop OpenGL)

    • Preview Build Configuration to Release

    • Preview Visual Studio Version to 2015

    • Preview Working Directory to ../Application/bin.

      With these settings you set the Kanzi Studio Preview to work with the plugin.

    _images/project-properties.png _images/properties-project.png
  2. In the Library > Materials and Textures, select Load Material Type From Disk, in the Stereoscopy plugin package go to the assets/materials directory, and import the material type for the type of stereoscopy you want to use. The Stereoscopy plugin uses materials defined by these material types to compose stereoscopic content in your Kanzi application for different stereoscopic devices:

    • Use AnaglyphicComposition.kzmat to show content from the position of each eye using anaglyphic coloring, usually red and cyan. The plugin renders the content for each eye to a separate framebuffer, then composites to the screen using AnaglyphicComposition material type. You achieve the 3D effect by using an anaglyphic color filter glasses on a regular display. If the display enhances colors, the stereoscopic effect decreases.

      _images/anaglyphic-preview.png
    • Use InterlaceHorizontalComposition.kzmat for displays that show content from the position of each eye using alternating horizontal lines. The plugin renders the content for each eye to a separate framebuffer, then composites to the screen using the InterlaceHorizontalComposition material type. You achieve the 3D effect by using a display and polarizing glasses, or using an autostereoscopic display that supports horizontal interlacing mode.

      _images/horizontal-interlace-preview.png
    • Use InterlaceVerticalComposition.kzmat for displays that show content from the position of each eye using alternating vertical lines. The plugin renders the content for each eye to a separate framebuffer, then composites to the screen using InterlaceVerticalComposition material type. You achieve the 3D effect by using a display and polarizing glasses, or using an autostereoscopic display that supports vertical interlacing mode.

      _images/vertical-interlace-preview.png
  3. In the Library right-click Kanzi Engine Plugins and select Import Kanzi Engine Plugin.

    _images/import-kanzi-engine-plugin.png
  4. In the Stereoscopy plugin package go to the lib directory, select plugin in the directory of the configuration you selected in the first step, and click Open.

    For example, select Win32/GL_vs2015_Release_DLL/stereoscopy.dll.

    Kanzi Studio imports the Stereoscopy plugin to your Kanzi Studio project. The Stereoscopy plugin provides render pass types which stereoscopically render content using the materials you imported in step 2. You can now set up the content in your project to use the Stereoscopy plugin to render the content. See Rendering 3D content stereoscopically with a composition material.

    _images/stereoscopic-plugin-properties.png

Rendering 3D content stereoscopically with a composition material

To render 3D content stereoscopically with composition material:

  1. In Kanzi Studio set up your project for the Stereoscopy plugin. See Setting up your Kanzi Studio project.

  2. In the Library press Alt and right-click Rendering, select Group Render Pass, and name it Stereoscopic Content.

    You use this render pass to collect the render passes you need to render the content for each eye.

    _images/group-render-pass-create.png _images/stereoscopic-content-group-render-pass.png
  3. In the Library > Rendering > Stereoscopic Content render pass create:

    1. Clear Render Pass and set the Clear Color property to the color with which you want to clear the render targets at the start of each frame.

      When you use a composition material to render content, the Stereoscopy plugin renders to a framebuffer object. You use this Clear Render Pass to remove the data from the previous frame before drawing the new frame.

    2. Stereoscopic Draw Objects Render Pass

      You use this render pass to draw objects for each eye instead of using the built-in Draw Objects Render Pass.

    _images/stereoscopic-content-with-render-passes.png
  4. In the Library press Alt and right-click Rendering and select Stereoscopic Composer Render Pass.

    You use this render pass to render and compose stereoscopic content for a stereoscopic display.

    _images/stereo-composer-render-pass-create.png _images/stereo-composer-render-pass.png
  5. In the Project select the Scene node the content of which you want to render with the Stereoscopy plugin and in the Properties set the Render Pass Prefab property to the Stereoscopic Composer Render Pass.

    For example, in the Assets set the Source to Factory Content, drag the Car to the Preview, in the Project select the Car > car Scene node, and in the Properties set the Render Pass Prefab property.

    _images/car-factory-content-scene.png _images/render-pass-to-stereo-composer-render-pass.png
  6. In the Library > Rendering > Render Pass Prefabs select the Stereoscopic Composer Render Pass and in the Properties set:

    • Stereoscopy Mode to Material Composition: Interlace Half-Height, Material Composition: Interlace Half-Width, or Material Composition: Full Resolution

      • Material Composition: Interlace Half-Height mode renders left and right eye images in half resolution in vertical direction. During rendering it adjusts the projection so that, counting from the bottom:

        • In the left eye half-width image the n-th row of pixel contains (2*n)th row of pixels of full-resolution left eye image

        • In the right eye half-width image the n-th row of pixel contains (2*n + 1)th row of pixels of full-resolution right eye image

      • Material Composition: Interlace Half-Width mode renders left and right eye images in half resolution in horizontal direction. During rendering it adjusts projection so that, counting from the left side:

        • In the left eye half-width image the n-th column of pixel contains (2*n)th column of pixels of full-resolution left eye image

        • In the right eye half-width image the n-th column of pixel contains (2*n + 1)th column of pixels of full-resolution right eye image

      The limitations of the Material Composition: Interlace Half-Height and Material Composition: Interlace Half-Width modes are:

      • Mipmap filtering creates a blurry visual result.

      • Non-fullscreen Viewport nodes create a result where the stereoscopic effect is either incorrect or lost. Use these modes only with full-screen Viewport nodes.

    • Composition Material to one of the materials that come with the plugin, which you use in your project

      For example, set it to AnaglyphicCompositionMaterial.

    • Content Render Pass Prefab to a Stereoscopic Draw Objects Render Pass or a Group Render Pass which contains the Stereoscopic Draw Objects Render Pass

      For example, set it to the Stereoscopic Content Group Render Pass you created in step 3.

    _images/stereo-composer-render-pass-properties.png _images/anaglyphic-preview.png
  7. (Optional) In the Project in the Scene which you render with the Stereoscopy plugin, select the Camera node, and in the Properties add and set:

    • Eye Separation to set the space between the positions of eyes in the Camera node space coordinates

      The eye position is the offset from the Camera node along the x axis in the Camera space. One Eye Separation property unit equals one Kanzi unit.

      For example, set it to 1,818.

    • Focal Distance to set the distance from the Camera node in the Camera node space coordinates, at which the projections of a 3D point converge into the same 2D position on the screen.

      The 3D points at this distance from the Camera node are seen as being on the normal image plane, without stereo separation. One Focal Distance property unit equals one Kanzi unit.

      For example, set it to 0,25.

    To find the the correct Stereoscopy plugin settings for stereoscopic content in your Kanzi application, see Best practices.

Rendering 3D content stereoscopically side-by-side

To render 3D content stereoscopically side-by-side:

  1. In Kanzi Studio set up your project for the Stereoscopy plugin. See Setting up your Kanzi Studio project.

  2. In the Library press Alt and right-click Rendering, select Group Render Pass, and name it Stereoscopic Content.

    You use this render pass to collect the render passes you need to render the content for each eye.

    _images/group-render-pass-create.png _images/stereoscopic-content-group-render-pass.png
  3. In the Library > Rendering > Stereoscopic Content render pass create:

    1. Clear Render Pass and set the Clear Color property to the color with which you want to clear the render targets at the start of each frame.

    2. Stereoscopic Draw Objects Render Pass

      You use this render pass to draw objects for each eye instead of using the built-in Draw Objects Render Pass.

    _images/stereoscopic-content-with-render-passes.png
  4. In the Library press Alt and right-click Rendering and select Stereoscopic Composer Render Pass.

    You use this render pass to render and compose stereoscopic content for a stereoscopic display.

    _images/stereo-composer-render-pass-create.png _images/stereo-composer-render-pass.png
  5. In the Project select the Scene node the content of which you want to render with the Stereoscopy plugin and in the Properties set the Render Pass Prefab property to the Stereoscopic Composer Render Pass.

    For example, in the Assets set the Source to Factory Content, drag the Car to the Preview, in the Project select the Car > carScene node, and in the Properties set the Render Pass Prefab property.

    _images/car-factory-content-scene.png _images/render-pass-to-stereo-composer-render-pass.png
  6. In the Library > Rendering > Render Pass Prefabs select the Stereoscopic Composer Render Pass and in the Properties set:

    • Stereoscopy Mode to this n, Side By Side: Right-Left, Side By Side: Top-Bottom (Left on top), or Side By Side: Top-Bottom (Right on top)

    • Composition Material to < No Material >

    • Content Render Pass Prefab to a Stereoscopic Draw Objects Render Pass or a Group Render Pass which contains the Stereoscopic Draw Objects Render Pass

      For example, set it to the Stereoscopic ContentGroup Render Pass you created in step 3.

      _images/side-by-side-modes.png
  7. (Optional) In the Project in the Scene which you render with the Stereoscopy plugin, select the Camera node, and in the Properties add and set:

    • Eye Separation to set the space between the positions of eyes in the Camera node space coordinates

      The eye position is the offset from the Camera node along the x axis in the Camera space. One Eye Separation property unit equals one Kanzi unit.

      For example, set it to 1,818.

    • Focal Distance to set the distance from the Camera node in the Camera node space coordinates, at which the projections of a 3D point converge into the same 2D position on the screen.

      The 3D points at this distance from the Camera node are seen as being on the normal image plane, without stereo separation. One Focal Distance property unit equals one Kanzi unit.

      For example, set it to 0,25.

    To find the the correct Stereoscopy plugin settings for stereoscopic content in your Kanzi application, see Best practices.