How to solve the jagged edges / blur on the CubeTexture?

Questions
1

Hello! I am working with a setup with a dynamic CubeMap to generate realtime reflections. Overall it works good on curved surfaces but not on flat surfaces like a cube. Of course, I expect that, because meanwhile a curved surface will show more of the reflected texture because of its geometry nature, a cube will project a the 512px face of the CubeCamera. Is there a way to improve the quality without the need of increasing the texture size? Anything above 512px drops frames to half.

A small demo: Three Js Start (duplicated) - StackBlitz

2

did you try to use Reflector from ‘three/addons/objects/Reflector.js’ ?
instade of using CubeCamera i think this should solve your problems

const geometry = new THREE.PlaneGeometry(25, 25);
const ref= new Reflector(geometry, {
    clipBias: 0.003,
    textureWidth: window.innerWidth * window.devicePixelRatio,
    textureHeight: window.innerHeight * window.devicePixelRatio,
    color: 0x777777
});
scene.add(ref);

this render the scene only twice

3

I know, this is a great idea, the only thing that this is a planar reflection, so it won’t work on meshes that have a depth geometry, like a box, sphere, etc…

4

in this case you need to use shaders use MeshBasicMaterial and override the envmap shaders chunks using onBeforeCompile then Inject world position in the vertex shader and replace <envmap_fragment> with a custom parallax-corrected cubemap reflection, i did this in perv project and don’t remember there was any huge performance drops.

6

it could yes but depending on the scene and objects, it needs to be tested but 0.003 and similar values do not case this error unless for example the plane is large scaled you have to go down to 0.04 or even 0.4

7

Using a higher FOV on the scene camera (eg 90) somewhat reduces visual imperfections but this is quite extreme and may not fit your use case…