Using Anaglyph or Parallax barrier

[rachet-khanal]

Hi, how do we do a simple render of 2D to 3D in r3f. Example on three,js:

let annaglyph = true;
const effect = new THREE.AnaglyphEffect( renderer );
if( annaglyph ){
effect.render( scene, camera );
}else{
renderer.render( scene, camera );
}

[drcmda]

function Annaglyph({ enabled = false }) {
  const { gl, scene, camera } = useThree()
  const [effect] = useState(() => new THREE.AnaglyphEffect(gl))
  return useFrame(() => (enabled ? effect : gl).render(scene, camera), 1)
}

now drop it into your scene

<Annaglyph enabled />

or make it conditional

<Annaglyph enabled={flag} />

study useFrame in the api docs, the 1 in the end is important.

[rachet-khanal]

Thank you for the quick answer. The result seems to be more blur and pixelated than regular Threejs library. Is this because of how I am using it:
https://codesandbox.io/s/r3f-basic-demo-43x8l?file=/src/index.js

[rachet-khanal]

Sorry, that was a mistake on my end. Needed to set effect.setSize to fix the issue. Thank you again :).

[drcmda]

yep, r3f === threejs, there is not a single change or new rule. btw, setSize is a sideeffect, and window.innerXYZ isn't responsive/reactive

function Annaglyph({ enabled = false }) {
  const { gl, scene, camera, size } = useThree()
  const [effect] = useState(() => new AnaglyphEffect(gl))
  useEffect(() => void effect.setSize(size.width, size.height), [size])
  return useFrame(() => (enabled ? effect : gl).render(scene, camera), 1)
}

[rachet-khanal]

Wow, you are a legend! Thank you!! The window height and width were creating performance issues on scroll which is fixed thanks to you.