We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Video Puzzle and Variables/ Procedures

Home Forums Puzzles Video Puzzle and Variables/ Procedures

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #51957
    jordangarlandmi
    Customer

    I am trying to do a full screen video overlay within verge 3d via html video puzzle. But I can’t tell how to make the video play with verge 3d puzzles. Most of the documentation/app template is geared towards if you are applying the video as a texture to an object in the 3d scene, not as a full screen overlay. *Theres an image attached below related to this question and the next one.*

    I am also trying to do something like this with “counter” and “variables/procedure” puzzles- After three unique SD cards are found and clicked by the user, a video is unlocked and it overlays the screen and plays, when its finished playing the user is still in the same spot in the 3d world. *see attached image*

    If anyone can let me know where I’m going wrong on these issues it would be greatly appreciated, as again the documentation and “app templates” are for video textures, not video overlay.

    Attachments:
    You must be logged in to view attached files.
    #51959
    xeon
    Customer

    So…there are ways we think it should be done, ways that we think are easy, and all the things that will actually work. Most frustrating not all of those are the same things.

    Full-screen video is a funny thing. Lots of browser rules that have to be considered. iOS rules will have screen take over and a close button…etc.

    To get around all this mess, I create two cameras. One with a parented plane (video) that consumes or is close to consuming the viewport. I might even parent a few buttons to it. Then when the video is done…I switch cameras to the main app camera.

    This allows you to have a full-screen video, it can be responsive, you don’t have to worry about writing any HTML / JavaScript to make it play and you can use the existing V3D puzzles to make it work.

    Here is an example: https://webgl.r66dapps.com/starpuzzle

    Press the button for Intro to see the video…or skip it and go directly to the interactive. Although the logic here may be different than your needs the logic for playing a video is still the same.

    You basically assign the plane a texture and then when you need to start it replace the texture with the specified video and your video is playing full screen.

    You will have to preload the video at the very beginning of your puzzles and have a killable listner for when the video is done playing so you can kill that process. All done in puzzles.

    What I think you are trying to do is have a full screen overlay. To do this… I would have a plane with my video hidden but parented to my camera. When you trigger the event that causes the need for the video you unhide the plane, make sure there is a method to close / hide the plane. You should be set.

    If you have multiple videos you can do a video replace like shown in the image attached. Otherwise…just load up that video as the main texture for the plane and hide and unhide the plane.

    • This reply was modified 6 days, 13 hours ago by xeon.
    Attachments:
    You must be logged in to view attached files.

    Xeon
    Route 66 Digital
    Interactive Solutions

    #51962
    jordangarlandmi
    Customer

    So…there are ways we think it should be done, ways that we think are easy, and all the things that will actually work. Most frustrating not all of those are the same things.

    Full-screen video is a funny thing. Lots of browser rules that have to be considered. iOS rules will have screen take over and a close button…etc.

    To get around all this mess, I create two cameras. One with a parented plane (video) that consumes or is close to consuming the viewport. I might even parent a few buttons to it. Then when the video is done…I switch cameras to the main app camera.

    This allows you to have a full-screen video, it can be responsive, you don’t have to worry about writing any HTML / JavaScript to make it play and you can use the existing V3D puzzles to make it work.

    Here is an example: https://webgl.r66dapps.com/starpuzzle

    Press the button for Intro to see the video…or skip it and go directly to the interactive. Although the logic here may be different than your needs the logic for playing a video is still the same.

    You basically assign the plane a texture and then when you need to start it replace the texture with the specified video and your video is playing full screen.

    You will have to preload the video at the very beginning of your puzzles and have a killable listner for when the video is done playing so you can kill that process. All done in puzzles.

    What I think you are trying to do is have a full screen overlay. To do this… I would have a plane with my video hidden but parented to my camera. When you trigger the event that causes the need for the video you unhide the plane, make sure there is a method to close / hide the plane. You should be set.

    If you have multiple videos you can do a video replace like shown in the image attached. Otherwise…just load up that video as the main texture for the plane and hide and unhide the plane.

    Thank you for that, it is similar to something I had to do with VFX in blender.

    There are new questions that arise with this method.

    For one I am using verge as a means to create an iOS/android app not a web browser. So I think (though i dont KNOW because I’m new) the full screen video overlay wouldn’t be a huge programming issue outside of figuring out how to do it in verge.

    Secondly- I have almost ten minutes of video so I worry having to preload it at the start would result in it never ever loading?

    I am assuming with a full screen video overlay it would load as the video is prompted versus the video plane having to load at the start? Again I dont know any of this I just know I’m already having issues with optimization.

    Also that project you linked is cool, even the preloaded screen looks clean and nice.

    #52054
    xeon
    Customer

    Well…if you are doing this as an iOS app and not for use in a browser things can be a little different. I don’t believe V3D has any puzzles that really let you handle memory management. However if you are building your own app, I am sure you can just call the video file that is stored locally when the app is installed. iOS will handle the full screen / video issue as it always does. But if you do it in Verge the video plane will only be the size you make it relative to the aspect ratio the device is in and based on proximity to camera.

    As an example if you make the video screen fit your camera in 16:9 ratio and your application is responsive and the user rotates the screen the video played in verge will remain 16:9 and then show your v3d background or HDR environment map as it letter boxes the video.
    You could detect if the scene is rotated and use a different plane for video play back if desired or rotate the existing plane forcing the user to stay in landscape.

    Good luck

    Xeon
    Route 66 Digital
    Interactive Solutions

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.