Skip to content
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

Merged
merged 6 commits into from
Feb 7, 2023

Conversation

CoPrez
Copy link
Contributor

@CoPrez CoPrez commented Feb 7, 2023

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

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Reviewer - this PR has made changes to one or more package.json files.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

@bjsplat
Copy link
Collaborator

bjsplat commented Feb 7, 2023

@sebavan sebavan merged commit cd9f30b into BabylonJS:master Feb 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants