DriveWorks Pro 18: Sprite [send feedback...]

Sprite

WebGL 2 support required. Check your browser support here.

The Sprite entity is an entity that lets you render 2D images in your 3D scene. These are known as Sprites. Sprites can be used to create call-outs on models, selectable UI in the scene or to simply show UI and images in a 3D scene.

Sprites can be used to add further interaction or even configuration to your 3D scene. This can be a great way of getting users to interact with the model and engage them in your 3D configurator.

Image with shapes and sprites rendered over the top

Above is a basic example of how the Sprite entity can be used to add numbers and text to models in a 3D scene. When you select a numbered Sprite, another Sprite is shown with a label image applied.

It is worth noting that Sprites render 2D but are relative to 3D space. This results in them always facing the camera but being anchored to points in 3D space.

Information Panel

With a node selected and the Sprite entity added to the node, the following will be displayed in the Information Panel:

Properties displayed for a Sprite entity

Color

Color is used to tint the color of the image or texture added to the Sprite entity. You can control the intensity of the Red, Green or Blue channels separately in the entity. This is great for tinting an image to show that the Sprite has been selected.

  • Red - Controls the intensity of the Red channel in the tint applied to Sprite.
  • Green - Controls the intensity of the Green channel in the tint applied to Sprite.
  • Blue - Controls the intensity of the Blue channel in the tint applied to Sprite.
  • Alpha - Controls the alpha channel or transparency of the Sprite image.

Occluded Opacity

Occluded Opacity controls how opaque or transparent the Sprite goes when it is occluded by a model in the scene.

Occluded Opacity only applies to Sprites that are NOT set to fixed size. Fixed size Sprites will not render transparent when occluded by another object.

Anchor Position

Anchor Position controls the justification of the texture or image used on the Sprite. This controls where the image is positioned relative to the Nodes origin.

Pixels Per Meter

Pixels Per Meter affects how large the Sprite image will be and determines how much of the image to show per meter.

Render Mode

Render Mode controls how the Sprite appears. Orthographic maintains the image size on screen. Perspective changes the size of the Sprite as you zoom in and out of the model.

Orthographic Scale

Orthographic Scale lets you control the size of the Sprite image when the render mode is set to Orthographic.

This is controlled using the X and Y scale properties under Orthographic Scale.

Sprite Texture

Sprite Texture is the path to an image that will be used and shown on the Sprite in 3D. This can be a jpg or png image file.

Parameter Panel

With the model node selected and the Sprite entity added to the node, the following will be displayed in the Parameter Panel:

  • Color

    Color is used to tint the color of the image or texture added to the Sprite entity. You can control the intensity of the Red, Green or Blue channels separately in the entity. This is great for tinting an image to show that the Sprite has been selected.

    • Red - Controls the intensity of the Red channel in the tint applied to Sprite.
    • Green - Controls the intensity of the Green channel in the tint applied to Sprite.
    • Blue - Controls the intensity of the Blue channel in the tint applied to Sprite.
    • Alpha - Controls the alpha channel or transparency of the Sprite image.
  • Occluded Opacity

    Occluded Opacity controls how opaque or transparent the Sprite goes when it is occluded by a model in the scene.

  • Anchor Position

    Anchor Position controls the justification of the texture or image used on the Sprite. This controls where the image is positioned relative to the Nodes origin.

  • Pixels Per Meter

    Pixels Per Meter affects how large the Sprite image will be and determines how much of the image to show per meter. Enter a number.

  • Render Mode

    Render Mode controls how the Sprite appears. Orthographic maintains the image size on screen. Perspective changes the size of the Sprite as you zoom in and out of the model.

    Enter either Orthographic or Perspective.

  • Orthographic Scale

    Orthographic Scale lets you control the size of the Sprite image when the render mode is set to Orthographic.

  • Sprite Texture

    Sprite Texture is the path to an image that will be used and shown on the Sprite in 3D. This can be a jpg or png image file.

    Enter the file path or build a rule to the image file that you want to use.

Using Sprites

Sprites can be used in a number of ways within a 3D scene. They can be just static images or they can be selectable UI and become part of the configuration experience.

Simple Sprite

To create a simple Sprite you simply need to carry out the following steps:

  1. Open a DriveWorks 3D Document in DriveWorks Administrator.
  2. Add a new Node to your scene.
  3. Right click this new Node and add the Sprite entity to the node.
  4. Browse and add an image to the Sprite Texture property and complete any other required properties.

Selectable Sprite

To create a selectable Sprite you perform the same steps as above with a few extra steps.

  1. Open a DriveWorks 3D Document in DriveWorks Administrator.
  2. Add a new Node to your scene.
  3. Right click this new Node and add the Sprite entity to the node.
  4. Browse and add an image to the Sprite Texture property and complete any other required properties.
  5. Next, on the same Node, add a Click Macro entity to the same node.
  6. Provide the Click Macro entity with a Specification Macro name to run when selected.

The Sprite entity and the Click Macro entity combine to give you the functionality of a selectable Sprite. The Sprite is selectable and then the Click Macro performs the action or task in DriveWorks.

Table of Contents