Environment with ground options has a hole in the middle

aldebout commented 1 year ago

When using Environment with the ground option, whatever the settings I try, I get a transparent "hole"/artifact in the middle of my camera. By default it is white, if I use the background prop as well I see the background through the hole.

three version: 0.153.3
@react-three/fiber version: 8.12.0
@react-three/drei version: 9.58.4
node version: 18
npm (or yarn) version:

Problem description:

I shouldn't see the artifact.

Relevant code:

Codesandbox reproduction: https://codesandbox.io/s/r3f-env-white-issue-2zm40x

    <Canvas style={{ height: 800, width: 800 }}>
      <Suspense fallback={null}>
        <Environment preset="sunset" ground />
        <PerspectiveCamera makeDefault position={[-30, 100, 120]} fov={35} />
        <OrbitControls />
        <Stats />
      </Suspense>
    </Canvas>

Suggested solution:

Adding a PerspectiveCamera solves the issue (I haven't tried many other things)

drcmda commented 1 year ago

at this point envmap ground comes from three, it used to be a drei feature that was made official. or @FarazzShaikh do you think it can be fixed here?

FarazzShaikh commented 1 year ago

I’m not sure what I’m looking for in the provided sandbox, things look fine to me

however I know a lot more about shaders now, perhaps it’s time to revisit for a better ground projection

aldebout commented 1 year ago

I’m not sure what I’m looking for in the provided sandbox, things look fine to me

My bad, I commented out the camera, it should show the issue now :)

pmndrs / drei