Dinamyc reflection plane

[Santiago_sepulveda_garcia]

Right now I am trying to implement simple dynamic reflection on a plane shader material. The better approach that I have done is the image right below. Applying this to the sphere looks good moving the camera, but when I use it on a plane it just looks worst and very pixeled, and when I move the camera it just looks anti-realistic. By the way, I am using THREE.WebGLCubeRenderTarget and the THREE.CubeCamera.

Maybe someone could recommend me a lecture or article about plane reflections.

Fragment shader:

void main() {
  vec3 fNormal = normalize(vWorldNormal);

  vec3 viewDirection = normalize(cameraPosition - vPosition);
  vec3 reflectedVector = reflect(-viewDirection, fNormal);
  vec3 tex = textureCube( uCubeTexture, reflectedVector ).rgb;

  gl_FragColor = vec4(vec3(tex), 1.);
}

Vertex shader:

void main()
{
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

  vWorldNormal = mat3( modelMatrix ) * normal;
  vUv = uv;
  vPosition = position;
}

The render target and cube camera that I use on the plane’s reflections:

    this.cubeRendererPlane = new THREE.WebGLCubeRenderTarget(256, {
      format: THREE.RGBAFormat,
      generateMipmaps: true,
      minFilter: THREE.LinearMipMapLinearFilter,
      encoding: THREE.sRGBEncoding,
    });
    this.cameraCubePlane = new THREE.CubeCamera(0.1, 10, this.cubeRendererPlane);
    this.cameraCubePlane.position.set(0, 0, 0);

[N8Three]

The issue here is the lack of parallax correction on the cubemap (ie. the cubemap and the plane don’t match up real well - the cubemap more closely approximates a sphere). Luckily threejs’s built-in Reflector accomplishes planar reflection very nicely, three.js examples. Perhaps that is what you are looking for?

[Santiago_sepulveda_garcia]

Thank you for answering me. Yes, I know some built-in reflectors but I want to learn the deeper solution to this problem because, in the end, I want to achieve something like this:

[drcmda]

look into this thread: Blurred reflections

if you use react + three you don’t need to do anything, you just plant a component in there and you have it: Ground reflections and video textures - CodeSandbox

that reflector component was converted into a vanilla class in the thread above, you find everything you need in there.

there is a better way now using the screen-space-reflections library which exports a postprocessing pass. it goes way further and creates realistic reflections everywhere. it used to be noisy but recent updates look quite clean.

example 1: SSR Test - CodeSandbox

example 2: Starwars (forked) - CodeSandbox

[Santiago_sepulveda_garcia]

Thank you, that’s what I am looking for.