ForgeJS allows you to display different media types and formats on the background of your scenes. Here is a tutorial about the image media declarations you can add in your json configuration for now.

Image

An image media has different formats. By format we mean that pixels are not organized the same way from one format to another for the same image resource! ForgeJS handles two formats at the moment which are equirectangular and cubemap images.

Image equi

Here is what an equirectangular image resource looks like:

{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-image-equi",

                "media":
                {
                    "uid": "media-image-equi",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "forest-equi.jpg"
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (image).
  • source.format - The source format (equi).
  • source.url - The equi image url.

Image cubemap format

Here is what a cubemap image resource looks like:

{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-image-cubemap",

                "media":
                {
                    "uid": "media-image-cubemap",
                    "type": "image",

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                        "tile": 512,
                        "url": "forest-cubemap.jpg"
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (image).
  • source.format - The source format (cube).
  • source.order - The order of the tiles from top left to bottom right.
  • source.tile - The size of each tile. All tiles must be square so only one size is needed.
  • source.url - The url of the equi image.
Order

Tiles are ordered from top left corner to bottom right corner of the resource. We have six tiles in one image resource. The source.order property of the media json configuration explains how the tiles are ordered in the image resource. In our case the order is RLUDFB, here is a little glossary to know what these letters mean:

  • R - The right tile.
  • L - The left tile.
  • U - The up tile.
  • D - The down tile.
  • F - The front tile.
  • B - The back tile.

24th Apr 2017