Changing frustum planes of Orthographic camera doesn't affect projection in CSS3DRenderer

[soadzoor]

Description of the problem

Hi,

So I recently discovered a potential bug: I use an orthographic camera with CSS3DRenderer, and I implemented a simple pan functionality. When I adjust the position of the camera (either with camera.position.setX(camera.position.x + delta.x), or camera.translateX(delta.x), or similar), it works perfectly, as it should. But when I try to change the frustum planes of the camera (eg.: camera.left += delta.x), it doesn't have any visual effect.

So in my opinion, in terms of visual differences, these 4 lines:

camera.left += delta.x;
camera.right += delta.x;
camera.top += delta.y;
camera.bottom += delta.y;

Should give similar results to the effect of these 2 lines:

camera.translateX(delta.x);
camera.translateY(delta.y);

And with WebGLRenderer, they do. But with CSS3DRenderer, they don't. In fact, they don't seem to do anything. I also played around with the frustum plane values in the resize function, but it didn't have an effect there, either. So I think CSS3DRenderer doesn't take the frustum planes into account, only the initial ones..?

I know it's probably not the best practice to change the frustum planes in this case (and I should change the position instead), but I believe it should work this way too, as it does with WebGLRenderer.

I've made a simple demo to represent the problem. Check from line ~80 in index.html in the zip, or line ~60 in the JS section here: https://codepen.io/soadzoor/pen/vVbzyE

Thank you! CSS3DRenderer.zip

Three.js version

• [x] r97

Browser

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

OS

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

[WestLangley]

Sorry, this is not the right board for your question. If you want help, you can try the forum.

Also see https://threejs.org/examples/css3d_orthographic.html.

Also have a look at this SO answer. I assume your world-space units are not pixels.

[soadzoor]

@WestLangley I'm not looking for help, I tried to notice the devs that there's a bug (or missing feature) here.. And yea, I didn't pay attention to the fact that OrthoCamera expects those values as world-space units, but the bug has nothing to do with this.

Here, I fixed that problem, and included a webglrenderer as well, so you can see the problem as described above: The projection doesn't get updated in CSS3DRenderer when I change the frustum planes, but it does in WebGLRenderer.

Notice that both renderers use the same exact camera for rendering, and while one of them gets updated with mouse interaction (mousedown + mousemove), the other one doesn't do anything. CSS3DRenderer.zip

https://codepen.io/soadzoor/pen/vVbzyE

[WestLangley]

CSS3DRenderer does not support an offset (non-centered) frustum.

[soadzoor]

Yes, that's what I'm saying. Is that on purpose? Or why did you close this thread?

[WestLangley]

Yes, that was on purpose. You may reopen this if you have a feature request and can provide a compelling reason for the feature.

[soadzoor]

Yes, I'd like to reopen this, but I don't have permission for that, it seems. I’ve actually started to work on this, so soon I might be able to come up with a PR that solves this.

My compelling reason is that the way it is now, CSS3DRenderer is deficient. The projection of CSS3DRenderer is not the same as in WebGLRenderer in this special case. IMHO both renderers should ALWAYS give the same projection when we render with the same camera. I see no reason why it shouldn't be implemented on purpose.

[Mugen87]

Let's reopen this for now and see how @soadzoor's PR will look like.

[soadzoor]

Okay, I've created a PR that fixes this. Try the zip below, you can see that the projection is now updated in both renderers when I change the frustum planes.

CSS3DRenderer_frustum_offset.zip

[WestLangley]

@soadzoor Nice job!