Three js VR video angle change gyroscope - three.js

Three js has this example: https://threejs.org/examples/webxr_vr_video.html But the angle doesnt change perspective when you move the phone around unless you enter VR mode.
I am looking for a way to make video behave in mobile browser as demonstrated here: https://bitmovin.com/demos/vr-360 When you move mobile phone around you can see different angles of the video (that is before you even enter VR mode by clicking glasses icon).

Related

How to resize Game Window with the Windows API?

I am developing a 2D video game and trying to implement a good fullscreen extension to the game maker, Clickteam Fusion.
I've tried using SetWindowPos and I can get the window to look the correct size, but then when using the Steam Overlay the overlay is showing offscreen because it is using the initial window size I set in the game maker.
it is clear that the SetWindowPos is just shrinking the window to fit the aspect ratio of my monitor, but the game still is acting like the game is still the initial window size so content gets loaded that is actually outside the display, including Steam Overlay notifications and such.
Is there a better Windows API command I can use to actually adjust a game window?

Threejs 360 stereoscopic video

When I look at this demo from three js in my mobile device I get duplicate screen:
https://threejs.org/examples/#webxr_vr_video
When I look at some youtube 360 stereoscopic video for example: https://www.youtube.com/watch?v=oR5LEg1rpUo&ab_channel=BLUERAVENstudios I get normal behavior.
Is this the correct behavior for three js demo ? What is picture divided in 2 parts? Can this three js demo behave the same as youtube?
Yes, this is the correct behavior for that Three.js demo. See here for WebXR description on each device. Specifically, you're interested in the part that reads:
Enable VR by providing pose information and allowing the WebGL scene to be rendered side by side to be placed in a headset like the Cardboard
So the reason you're seeing it side-by-side is because you need a Google Cardboard to get the VR experience.

How to disable gyro based rotation on mobile phones

i want to disable the camera rotation, while being on mobile.
I though making look-controls="hmdEnabled:false" would disable moving the camera along with the mobile device, yet it didn't work.
I tried to find which controls should i disable, but i only found some intel stating, that WebVr drivers rotate the scene #HMD orientation, not directly from the gyroscopes.
Nonetheless, I have no idea how to lock the camera, so it can be only moved by dragging Your finger.
Thanks in advance
I packaged up a component that does this at https://github.com/AVGP/a-touch-controls:
<a-scene>
<a-entity camera touch-controls></a-entity>
</a-scene>
These controls are using mouse (click and drag) or finger (swipe) movements to move around the camera, but does not use the gyroscope on mobile, except when explicitely entering VR mode, which still permits Cardboard usage etc.
If you want your own control scheme, you'll need to make your own controls. You can copy and paste some code from the look-controls and customize it: https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js

Marmalade: change screen orientation when video is playing

In my project (using the Marmalade SDK), I have fixed the screen orientation to portrait in the .icf file. When a user touches a button, a video plays (using s3e video). However, This video is also played in portrait mode (which is not conducive to viewing), and I want the screen to automatically rotate to landscape and have the video take up the entire screen when the button is pressed.
Any help would be greatly appreciated!
You may want to take a look at the s3eSurface API: http://api.madewithmarmalade.com/group__surfaceapigroup.html#ga70a312268193e75b29451da071c87ead
I guess something like s3eSurfaceSetInt (S3E_SURFACE_DEVICE_ORIENTATION_LOCK, S3E_SURFACE_LANDSCAPE) before playing your video and the same with S3E_SURFACE_PORTRAIT will do the trick :)

Three20, different images for portrait and landscape orientation possible?

I am using three20 to present a photo essay of a story I made after the February earthquake in Chile. I would like the app to display portrait type images when iPad device is in portrait orientation and landscape type images when iPad device is in landscape orientation.
So there would be two versions of every image, one cropped for portrait viewing and one cropped for landscape viewing and the app would show the version that is appropriate for the orientation the device is in.
I will crop these image versions separately. That way, the app would make full use of the screen in all orientations and users will read the story like a magazine.
Ideally, the view would change over to the corresponding image, staying where it is in the sequence of images, when the user rotates the device, so from portrait #4 to landscape #4 and vice versa, for example. But, if this is not possible, jumping back to the first image whenever iPad device is rotated is acceptable as well (push to separate TTImageViews maybe?)
The idea is to give to user the experience he is reading an illustrated story in all orientations. Can this be done? If so, can you give some clues?
If it can not be done putting a specific image in the background with the image viewer overlaying it may also be a solution. If separate fullscreen views for each orientation are not possible, then at least I would like to get rid of the black "autoresizing mask" parts of the screen..
Many thanks!
diederik

Resources