mylingo3d/src/states/useEffectComposer.ts

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import store, { createEffect } from "@lincode/reactivity"
import { WebGLRenderTarget } from "three"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"
import { WIDTH, HEIGHT } from "../globals"
import { getRenderer } from "./useRenderer"
import { getResolution } from "./useResolution"
import { getAntiAlias } from "./useAntiAlias"
import { getPixelRatio } from "./usePixelRatio"

const [setEffectComposer, getEffectComposer] = store<
    EffectComposer | undefined
>(undefined)
export { getEffectComposer }

createEffect(() => {
    const renderer = getRenderer()
    if (!renderer) return

    if (getAntiAlias() !== "MSAA" || !renderer.capabilities.isWebGL2) {
        setEffectComposer(new EffectComposer(renderer))
        return
    }

    const msaaRenderTarget = new WebGLRenderTarget(WIDTH, HEIGHT, {
        samples: 4
    })
    const handle = getResolution(([w, h]) => msaaRenderTarget.setSize(w, h))
    setEffectComposer(new EffectComposer(renderer, msaaRenderTarget))

    return () => {
        msaaRenderTarget.dispose()
        handle.cancel()
    }
}, [getRenderer, getAntiAlias])

createEffect(() => {
    const effectComposer = getEffectComposer()
    if (!effectComposer) return

    const [w, h] = getResolution()
    effectComposer.setSize(w, h)
    effectComposer.setPixelRatio(Math.min(getPixelRatio(), devicePixelRatio))
}, [getEffectComposer, getResolution, getPixelRatio])