Issue with WebGPU + orthographic camera + scene background texture

Hello

I’m trying to convert a few three.js projects from WebGL to WebGPU, but now I’m having an issue if I use an orthographic camera (instead of a perspective one) together with a texture in the scene background.

When I use a perspective camera, the background texture looks fine. It will fill the entire canvas, as expected:

https://www.dei.isep.ipp.pt/~jpp/webGPU/cube1/cube.html

But if I decide to use an orthographic camera, the texture will only fill part of the screen (a circle!):

https://www.dei.isep.ipp.pt/~jpp/webGPU/cube2/cube.html

I’m using the most recent three.js revision (r181).

Could you please help? Thanks in advance.

This looks like a bug in the WebGPURenderer. Do you mind filing an issue at GitHub?

You can share the following fiddle as an editable live example that demonstrates the bug: three.js dev template - module - JSFiddle - Code Playground

1 Like

No need for the issue. I have directly filed a PR:

4 Likes

Thanks for your help! :slight_smile:

Hello. Sorry to bother you again.

I’m now using three.js release r182 and this issue became wierder. If I run a program that uses webGPU, an orthographic camera and a background texture (e.g. your fiddle; see link below) on an Android smartphone, it works fine. But if I run it on my notebook, I get a white background:

It seems that the issue is not related with the browser: it shows up both with Chrome and with Firefox. It seems not to be related with my computer: I asked a friend to run the program on his PC and he reported the same problem.

It has maybe to do with the operating system.

Does this issue happen to you too? Any idea of what this problem might be and how to solve it?

Is it possible that this different behavior is related with the alpha mode?

We have added another change regarding the background which unfortunately is not compatible with orthographic cameras. I’ll revert this PR.

1 Like

Again thanks! :slight_smile: