React-three-gpu-pathtracer not showing the same camera position as the normal render

Hi all! Currently implementing GitHub - pmndrs/react-three-gpu-pathtracer: ⚡️ A React abstraction for the popular three-gpu-pathtracer in my R3F app. I’ve been trying to use this library as follows:


export function Viewer3D() {
  const planData = usePlanData()
  const opts = PathTracingControls()

  return (
    <div className='h-full w-full'>
      <CANVAS
        camera={{
          position: [400, 400, -1200],
          fov: 45,
        }}
      >
        <Suspense fallback={null}>
          <Pathtracer
            tiles={opts.Rendering_Tiles}
            samples={opts.Rendering_Samples}
            bounces={opts.Rendering_Bounces}
            enabled={opts.Rendering_Enabled}
            resolutionFactor={opts.Rendering_Factor}
          >
            <Scene planData={planData} />
          </Pathtracer>
        </Suspense>
      </CANVAS>
    </div>
  )
}

...

export function Scene({ planData }: Props) {
  const cubeRenderTarget = useCubeCamera()
  const { reset } = usePathtracer()

  return (
    <>
      <CameraControls
        // makeDefault
        onChange={reset}
      />
      <Lights />

      <primitive object={planData.plan}>
        <SceneObject cubeRenderTarget={cubeRenderTarget} />
      </primitive>
    </>
  )
}

... 
//Config file

import { presetsObj } from '@react-three/drei/helpers/environment-assets'
import { folder, useControls } from 'leva'

export function PathTracingControls() {
  return useControls({
    Rendering: folder({
      Rendering_Factor: {
        value: 0.5,
        max: 1,
        min: 0,
        step: 0.01,
        label: 'Resolution Factor',
      },
      Rendering_Samples: {
        value: 2,
        max: 20,
        min: 1,
        step: 1,
        label: 'Samples',
      },
      Rendering_Bounces: {
        value: 4,
        max: 20,
        min: 1,
        step: 1,
        label: 'Bounces',
      },
      Rendering_Tiles: {
        value: {
          x: 2,
          y: 2,
        },
        max: 20,
        min: 1,
        step: 1,
        label: 'Tiles',
        joystick: false,
      },
      Rendering_Enabled: {
        value: true,
        label: 'Enabled',
      },
    }),
    Environment: folder({
      Environment_Visible: {
        value: false,
        label: 'Enabled',
      },
      Environment_Preset: {
        options: Object.keys(presetsObj),
        value: 'apartment',
        label: 'Preset',
      },
      Environment_Intensity: {
        value: 1,
        max: 10,
        min: 0,
        step: 0.01,
        label: 'Intensity',
      },
      Environment_Blur: {
        value: 0.3,
        max: 1,
        min: 0,
        step: 0.01,
        label: 'Blur',
      },
    }),
  })
}

This is giving me this result:
Normal render

Path tracing render

The camera position on both renders is completely diferent.

1 Like