-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VideoTexture - Resize the internal texture when the video size changes #13513
Conversation
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
Reviewer - this PR has made changes to one or more package.json files. |
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13513/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/13513/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/13513/merge#BCU1XR#0 |
This PR updates VideoTexture to listen for the VideoElement resize event and resize the texture to match. For a URL video the scenario would not be common, but when creating a video from a camera stream you can use the media constraints to change the resolution/aspect ratio on the fly. Another camera example is when on mobile and you rotate the phone the video stream also resizes from portrait to landscape orientation.
I created this Playground example to demonstrate the current issue (and to test my PR changes):
https://playground.babylonjs.com/#4W5WYX
In the playground app the camera's aspect ratio is updated ever 3 seconds to go between 16:9 and 1:1 aspect ratios. Without these changes the video just gets squashed when the aspect ratio changes, additionally if the end user tried to readPixels from the texture they would not get the full image due to a missmatch between the internal texture and the actual video frames.
With these changes the plane that the VideoTexture is placed on is able to respond to the change in aspect ratio so the video does not become distorted. Additionally readPixels is able to pull the full frame of the camera and match the native video resolution.
This issue is mentioned in the BabylonNative repo here:
BabylonJS/BabylonNative#1107