I was wondering if someone could point me in the right direction for getting rid of jagged edges (anti-aliasing) in a VideoTexture coming from a webcam? Straight edges can appear jagged at certain viewing angles. Raising the anisotropic filtering level seems to make it worse? Also, the higher the resolution of the camera output the worse it gets.
It’s not very noticeable on lower resolution cameras. The higher the resolution, the worse it seems to be.
I made just a few changes to that playground to try for high resolution when getting the camera and to prefer the environment facing camera which is usually the higher resolution one (and easier to see the effect while moving around). Try this on a mobile device with a decent camera:
I ended up having to turn away from using BabylonJS for now. I was trying to apply filters and effects to live video but on top of the AA issues, I couldn’t achieve a steady 30fps on a lot of devices when combining it with MediaRecorder to record the canvas to a video.
The AA artifacts don’t show up when I’m not using BabylonJS.
They don’t show up when I use the native camera app and they don’t show up when I use navigator.getUserMedia() and attach the stream to a canvas or video element tag.
I had to go back to using plain canvas and getUserMedia because of the AA.
I can confirm it happens on 3 different iPhone models.
I’m pretty sure it happens on android and PC also but it’s been a while since I checked. I’ll be able to double check later today or tomorrow.