Rendering bug in Chrome Android? (ok in Chrome Desktop and Firefox Android)

Questions
24

I ran into the same problem. I triple-checked all my math, but I couldn’t find any issue. Thankfully, I found this thread and got a tip on devicePixelRate. Experimentally, I found out that the problem appears if the buffer exceeds 4096 on either side. Using the following code, I was able to get the correct result for my project. It’s not a perfect solution, but it works :slight_smile:

let dpr = window.devicePixelRatio;
const MAX_ANDROID_BUFFER_DIM = 4096;
if ((window.innerWidth * dpr > MAX_ANDROID_BUFFER_DIM || window.innerHeight * dpr > MAX_ANDROID_BUFFER_DIM)
 && (navigator.userAgent.includes('Android') && navigator.userAgent.includes('Chrome'))
) {
    dpr = Math.floor(
        Math.min(
            dpr - 1,
            MAX_ANDROID_BUFFER_DIM / window.innerHeight,
            MAX_ANDROID_BUFFER_DIM / window.innerWidth,
        ),
    );
}
this.renderer.setPixelRatio(dpr);

I believe there is no error in Three.js, but the an error inside of the Chrome Mobile. Because it should provide the correct dimensions for MAX_VIEWPORT_DIMS parameter (in my case it was 16384x16384). Or at least provide some warning/error about too large buffer size.