Three.js: Orthographic Camera offset on very large render

[Samsy]

The orthographic camera is offseted when the render is very large ( 8 - 10 k wide )
As an example I run https://threejs.org/examples/webgl_interactive_cubes_ortho on a 10K and this is what I get :

The render is offseted on the right

But if I run https://threejs.org/examples/canvas_camera_orthographic , then the render is centered as expected :

The difference between those two sketches is the second one use canvas renderer.

I tried to investigate that offset thing for a day, but no result yet..

Three.js version

• [x] Dev
• [ ] r87
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

Maybe you exceed the maximum drawing buffer size. This value is limited and you can see it here (http://webglreport.com/, section Framebuffer).

Does it work if you reduce the size of the renderer? Besides, do you have this problem with all browsers?

BTW: Nice monitor setup! 😊

[Samsy]

This is definitely under the maximum buffer size, I'm displaying pixelratio 1 on 10K wide render

[Itee]

Amazing screen !

Is it the same for all examples with ortho camera ? Are you in capacity to check from which ratio this append ?

[Samsy]

It looks like this is a chrome issue, with a limitation around size of back buffers..
Has anyone gone through this?
Is there any solution to dirty fix that in three ?

[Mugen87]

see https://bugs.chromium.org/p/chromium/issues/detail?id=445542

It looks like there are still problems with very large resolutions.

[Mugen87]

@Samsy There is one thing you can do in your app. Allocate a smaller drawing buffer and then scale up to the full canvas. Something like https://jsfiddle.net/f2Lommf5/348/

[WestLangley]

@Mugen87 Or perhaps,

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( 0.5 );
document.body.appendChild( renderer.domElement );

[Mugen87]

This is even nicer 😊

[Samsy]

I just ended up rebuilding chromium browser from sources, and extended the artificial backbuffer size limits to 16k per 16k and run a true 16k wide render
It is running very well on beefy rigs ( installations ) and no need to tricks with double camera or reduce any renders etc..