React-three-fiber: Setting Renderer Properties

[ryanking1809]

I'm just trying to turn on anti aliasing. This is how it's done in three.js:
var renderer = new THREE.WebGLRenderer( { antialias: true } );

From what I can tell Canvas basically acts as the renderer in react-three-fibre. Is that correct?
I've tried the following but it doesn't appear to work:
<Canvas camera={{ position: [0, 0, 400] }} antialias={true}>

[drcmda]

for now you can do

<Canvas props={{ antialias: true, ... }} />

I'm not sure about the name, though, "props". By default these are applied:

state.current.gl = new THREE.WebGLRenderer({
  canvas: canvas.current,
  antialias: true,
  alpha: true, 
  ...props 
})

[ryanking1809]

Oh yes, it's much worse when I set antialias to false.
Looks like I might be able to improve it with postprocessing https://threejs.org/examples/?q=fx#webgl_postprocessing_fxaa

Not sure about the name, perhaps you could call it "renderer"?

[ryanking1809]

Or could you make them actual props of the canvas component?
<Canvas anitaliasing={} alpha={} >

[drcmda]

Antialias doesn't work with effects, though. Fxaa is a good choice, i use it here: https://github.com/drcmda/react-three-fiber/blob/master/examples/components/Hud.js#L19-L32

Or could you make them actual props of the canvas component?

Yes, but i kept thinking, how do i tell them apart from camera/styling props. I will think about this some more and make it clear in the 2.x update which props do what.

[ryanking1809]

Perhaps related, say I wanted to change the default camera, could I do something like the following? I'm not 100% sure if it's not working - or I'm pointing my camera in the wrong direction.

Canvas camera={<orthographicCamera />} >

[ryanking1809]

or

<Canvas
    camera={
        <arrayCamera>
            <perspectiveCamera />
            <orthographicCamera />
        </arrayCamera>
    }
>

[drcmda]

Camera exchange is working already, you can do it declaratively: https://github.com/drcmda/react-three-fiber#heads-up-display-rendering-multiple-scenes

function Main() {
  const camera = useRef()
  const { width, height } = useThree().size
  return (
    <>
      <perspectiveCamera
        ref={camera}
        aspect={width / height}
        radius={(width + height) / 4}
        onUpdate={self => self.updateProjectionMatrix()}
      />
      {camera.current && (
        <group>
          <Content camera={camera.current} />
          <HeadsUpDisplay camera={camera.current} />
        </group>
      )}
    </>
  )
}

Cam exchange isn't trivial because other stuff relies on it, like interactions raytracer. There's a setDefaultCamera function in useThree that does it atm, but i'm still thinking how to solve this in a natural React-y way.

[drcmda]

Btw, here's a running demo: https://codesandbox.io/embed/mo0xrqrj79

Exchanges the cam, sets it as default, uses it for interaction and renders two separate scenes on top of one another (one pushing an effect). I like where it goes, but yeah - it isn't fixed in stone yet.

[ryanking1809]

Oh awesome, I think I'm starting to wrap my head around it now. Thanks!

[foxinni]

Hi. Demo doesn't seem to be working? There is a Cannot read property 'setSize' of undefined issue. https://codesandbox.io/embed/mo0xrqrj79

[drcmda]

it was severely outdated, i refreshed it. i think today i would probably do it differently though, using createPortal. this ensures that everything's under your control.