Selective Bloom Filter copied line by line, why is it not shining cool like the example?

Hi all, i’m new to the forums so let me know if my question is appropriate.

I copied and pasted the following example into my code, and it renders the objects fine. But the goal was to get a cool post-processing bloom effect, which it is not displaying.

The example

My display.

The example code.

My code.

import * as THREE from "three";
import React, { useRef, useState, useMemo, useEffect } from "react";
import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
import styles from "./MyCanvas.module.scss";

extend({ EffectComposer, RenderPass, UnrealBloomPass });

function Sphere({ geometry, x, y, z, s }) {
  const ref = useRef();
  useFrame((state) => {
    ref.current.position.x =
      x + Math.sin((state.clock.getElapsedTime() * s) / 2);
    ref.current.position.y =
      y + Math.sin((state.clock.getElapsedTime() * s) / 2);
    ref.current.position.z =
      z + Math.sin((state.clock.getElapsedTime() * s) / 2);
  });
  return (
    <mesh ref={ref} position={[x, y, z]} scale={[s, s, s]} geometry={geometry}>
      <meshStandardMaterial color="hotpink" roughness={1} />
    </mesh>
  );
}

function RandomSpheres() {
  const [geometry] = useState(() => new THREE.SphereGeometry(1, 32, 32), []);
  const data = useMemo(() => {
    return new Array(15).fill().map((_, i) => ({
      x: Math.random() * 100 - 50,
      y: Math.random() * 100 - 50,
      z: Math.random() * 100 - 50,
      s: Math.random() + 10,
    }));
  }, []);
  return data.map((props, i) => (
    <Sphere key={i} {...props} geometry={geometry} />
  ));
}

function Bloom({ children }) {
  const { gl, camera, size } = useThree();
  const [scene, setScene] = useState();
  const composer = useRef();
  useEffect(
    () => void scene && composer.current.setSize(size.width, size.height),
    [size]
  );
  useFrame(() => scene && composer.current.render(), 1);
  return (
    <>
      <scene ref={setScene}>{children}</scene>
      <effectComposer ref={composer} args={[gl]}>
        <renderPass attachArray="passes" scene={scene} camera={camera} />
        <unrealBloomPass attachArray="passes" args={[undefined, 1.5, 1, 0]} />
      </effectComposer>
    </>
  );
}

function Main({ children }) {
  const scene = useRef();
  const { gl, camera } = useThree();
  useFrame(() => {
    gl.autoClear = false;
    gl.clearDepth();
    gl.render(scene.current, camera);
  }, 2);
  return <scene ref={scene}>{children}</scene>;
}

function MyCanvas(props) {
  return (
    <div className={styles.Canvas}>
      <Canvas linear camera={{ position: [0, 0, 120] }}>
        <Main>
          <pointLight />
          <ambientLight />
          <RandomSpheres />
        </Main>
        <Bloom>
          <ambientLight />
          <RandomSpheres />
        </Bloom>
      </Canvas>
    </div>
  );
}

export default MyCanvas;

forget these old demos, i didn’t understand how bloom works at the time. this is how it’s done:

1 Like

This example works for me! Thank you, I’ll look into this code. Cheers

/cc

1 Like