- This topic has 4 replies, 2 voices, and was last updated 2 years, 7 months ago by jordangarlandmi.
-
AuthorPosts
-
2022-05-11 at 5:44 pm #51957jordangarlandmiCustomer
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.2022-05-11 at 11:19 pm #51959xeonCustomerSo…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.
Attachments:
You must be logged in to view attached files.Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-05-12 at 1:01 am #51962jordangarlandmiCustomerSo…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.
2022-05-14 at 11:26 pm #52054xeonCustomerWell…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 - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-05-21 at 5:34 pm #52228jordangarlandmiCustomerWell…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
Thank you again so much.
So as long as it is an iOS app that I am creating calling the video uses the same amount of processing power whether its on a plane or playing as its own full screen video player? Since the video is locally stored on their device?
Is there any difference in quality with a video playing on a plane? Im assuming the rest of the lighting in the 3d scene would affect the video plane?
Do you happen to know the puzzle for iOS when it is rotated? Or a link on where it would be? Im new and in over my head enough to where sometimes the wording of what to search is hard to figure out?
Thank you again!!
-
AuthorPosts
- You must be logged in to reply to this topic.