Facebook cubemap video not displaying properly

tech@quaqua.com
Posts: 7
Joined: Mon Feb 19, 2018 2:03 pm

Facebook cubemap video not displaying properly

Postby tech@quaqua.com » Tue Feb 20, 2018 9:53 am

Hi,

I am using the latest version to display Facebook cubemap video but the cubes are getting combined and the video is not getting displayed properly. Could you please help me in configuring this? I am attaching the sample code here with cubemap video URL (please see "uid": "scene-5"

Code: Select all

{
    "story":
    {
        "uid": "multiple-media-story",
        "name": "Multiple Media Story",
        "slug": "multiple-media-story",
        "description": "This project have multiple scenes and multiple media definition",
        "default": "scene-1",

        "scenes":
        [
            {
                "uid": "scene-1",
                "name": "Image equi scene",
                "slug": "image-equi-scene",
                "description": "This scene has an eqirectangular image media",

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

                    "source":
                    {
                        "format": "equi",
                        "url": "https://cdn.forgejs.org/samples/common/panos/01-forest.jpg"
                    }
                }
            },

            {
                "uid": "scene-2",
                "name": "Image cubemap scene",
                "slug": "image-cubemap-scene",
                "description": "This scene has a cubemap image media",

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

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                        "tile": 960,
                        "url": "https://cdn.forgejs.org/samples/common/panos/02-sand-cube.jpg"
                    }
                }
            },

            {
                "uid": "scene-3",
                "name": "Image flat scene",
                "slug": "image-flat-scene",
                "description": "This scene has a flat image media",

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

                    "source":
                    {
                        "format": "flat",
                        "url": "https://cdn.forgejs.org/samples/common/images/Mountain-selfie.jpg"
                    }
                },

                "view":
                {
                    "type": "flat",
                    "options":
                    {
                        "repeatX": false,
                        "repeatY": false
                    }
                }
            },

            {
                "uid": "scene-4",
                "name": "Video equi scene",
                "slug": "video-equi-scene",
                "description": "This scene has an eqirectangular video media",

                "media":
                {
                    "uid": "media-4",
                    "type": "video",

                    "source":
                    {
                        "format": "equi",
                        "levels": [
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.02-720p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.03-1080p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.04-1440p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.07-2160p_4K_H264_12M.mp4" }
                        ]
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                }
            },

            {
                "uid": "scene-5",
                "name": "Video cubemap scene",
                "slug": "video-cubemap-scene",
                "description": "This scene has a cubemap video media",

                "media":
                {
                    "uid": "media-5",
                    "type": "video",

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                  "streaming": "html5",
                        "tile": 0,
                        "url": "https://s3.ap-south-1.amazonaws.com/input-videotest/Cube_Map/10_Amber+Fort_1.mp4"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                }
            },

            {
                "uid": "scene-6",
                "name": "Video flat scene",
                "slug": "video-flat-scene",
                "description": "This scene has a flat video media",

                "media":
                {
                    "uid": "media-6",
                    "type": "video",

                    "source":
                    {
                        "format": "flat",
                        "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/Omni-Highlights-Reframed-1920x1080.mp4"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                },

                "view":
                {
                    "type": "flat"
                }
            },

            {
                "uid": "scene-7",
                "name": "Grid scene",
                "slug": "grid-scene",
                "description": "This scene has a grid media",
                "background": "#202040",

                "media":
                {
                    "uid": "media-7",
                    "type": "grid",

                    "options":
                    {
                        "color": "#7F7FFF"
                    }
                }
            },

            {
                "uid": "scene-8",
                "name": "No media scene",
                "slug": "no-media-scene",
                "description": "This scene without media, just a colored background",
                "background": "#237ABF"
            }
        ]
    },

    "plugins":
    {
        "prefix": "../../plugins/",

        "engines":
        [
            {
                "uid": "org.forgejs.previousnextbuttons",
                "url": "PreviousNextButtons/"
            },

            {
                "uid": "org.forgejs.videocors",
                "url": "VideoCORS/"
            },

            {
                "uid": "org.forgejs.mobilevideoplay",
                "url": "MobileVideoPlay/"
            },

            {
                "uid": "org.forgejs.gyroscopebutton",
                "url": "GyroscopeButton/"
            }
        ],

        "instances":
        [
            {
                "uid": "previousnextbuttons",
                "engine": "org.forgejs.previousnextbuttons"
            },

            {
                "uid": "videocors",
                "engine": "org.forgejs.videocors"
            },

            {
                "uid": "mobilevideoplay",
                "engine": "org.forgejs.mobilevideoplay"
            },

            {
                "uid": "gyrobutton",
                "engine": "org.forgejs.gyroscopebutton",

                "options":
                {
                    "bottom": 10,
                    "left": 10
                }
            }
        ]
    }
}


Thank you.
Regards
Sunny

User avatar
rroux
ForgeJS Team
Posts: 166
Joined: Wed Oct 26, 2016 12:19 pm

Re: Facebook cubemap video not displaying properly

Postby rroux » Thu Feb 22, 2018 4:16 pm

Hello Sunny,

You have to specify the size of the tiles of your cubemap video.
To do this you have to set the tile parameter in your media configuration.
In your case, your video is 3456 x 2304 so the tile size is 2304 / 2 = 1152

Just replace your media config by this one and it should work :

  1. "media":
  2. {
  3.     "uid": "media-5",
  4.     "type": "video",
  5.  
  6.     "source":
  7.     {
  8.         "format": "cube",
  9.         "order": "RLUDFB",
  10.         "tile": 1152,
  11.         "url": "https://s3.ap-south-1.amazonaws.com/input-videotest/Cube_Map/10_Amber+Fort_1.mp4"
  12.     },
  13.  
  14.     "options":
  15.     {
  16.         "autoPlay": true,
  17.         "loop": true,
  18.         "volume": 0.5
  19.     }
  20. }
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 166
Joined: Wed Oct 26, 2016 12:19 pm

Re: Facebook cubemap video not displaying properly

Postby rroux » Thu Feb 22, 2018 4:31 pm

Very nice video by the way! looks cool when it is working :)
- Raphaël

tech@quaqua.com
Posts: 7
Joined: Mon Feb 19, 2018 2:03 pm

Re: Facebook cubemap video not displaying properly

Postby tech@quaqua.com » Fri Feb 23, 2018 2:04 pm

Thank you very much, now it is working fine :)

User avatar
rroux
ForgeJS Team
Posts: 166
Joined: Wed Oct 26, 2016 12:19 pm

Re: Facebook cubemap video not displaying properly

Postby rroux » Fri Feb 23, 2018 2:20 pm

You're welcome!
- Raphaël

Who is online

Users browsing this forum: Google [Bot] and 2 guests