Trying to use EffectComposer with Views in React Three Fiber

Questions
, , , ,
1

Hey you guys, I will try to be direct.

I am creating a react three fiber application which will need multiple Views (though I have only one for now), I saw it is better for performance than multiple canvases.

The problem is that I cant make postprocessing working correctly along with Views, while without Views it works perfectly…

Here is the Canvas component

import { Canvas } from '@react-three/fiber';
import React from 'react';
import { BaseballTest } from './BaseballTest';
import { Environment, Sky, View, Preload } from '@react-three/drei';
import { BaseballField } from './BaseballAnimations/BaseballField';
import EffectsComponent from './components/EffectsComponent/EffectsComponent';

function App() {
  return (
    <div className='relative h-full w-full'>
      <div className='w-full h-screen bg-red-700'></div>

      <View className='absolute w-full h-screen z-[999]'>
        <mesh position={[500, 100, 2000]}>
          <sphereGeometry args={[200, 200, 200]} />
          <meshStandardMaterial
            color={'#f0dc2b'}
            emissive={'#e4d125'}
            emissiveIntensity={4}
          />
        </mesh>

        <Sky />

        <Environment
          files='./sky.jpg'
          background
          backgroundIntensity={1}
          environmentIntensity={2}
        />

        <ambientLight />
        <BaseballTest />
        <BaseballField />
        <EffectsComponent />
      </View>

      <Canvas
        eventSource={document.getElementById('root')}
        style={{
          width: '100%',
          height: '100vh',
          position: 'fixed',
          top: 0,
          left: 0,
        }}
        camera={{
          fov: 40,
          position: [-1.385, 13.642, -107.34],
          rotation: [3.006, -0.013, -3.123],
        }}
        dpr={window.devicePixelRatio}
        shadows={true}
      >
        <View.Port />
        <Preload all />
      </Canvas>
      
    </div>
  );
}

export default App;

and here is the EffectComposer component with bloom and effects:

import React from 'react';
import {
  ToneMapping,
  Bloom,
  EffectComposer,
  Vignette,
} from '@react-three/postprocessing';
import { ToneMappingMode, VignetteEffect } from 'postprocessing';
import { useFrame } from '@react-three/fiber';
import { damp } from 'maath/easing';

const EffectsComponent = () => {
  const vignetteRef = React.useRef<null | typeof VignetteEffect>(null);

  useFrame((state, delta) => {
    if (vignetteRef.current) {
      damp(vignetteRef.current, 'darkness', 0, 6, delta);
    }
  });

  return (
    <EffectComposer>
      <Bloom
        mipmapBlur
        luminanceSmoothing={0.1}
        luminanceThreshold={1.1}
        intensity={3}
      />
      <Vignette eskil={false} offset={0.1} darkness={1.1} ref={vignetteRef} />
      <ToneMapping mode={ToneMappingMode.NEUTRAL} />
    </EffectComposer>
  );
};

export default EffectsComponent;