Постобработка с помощью three.js и выставки на React Native

Question

Есть ли способ получить эффекты постобработки для работы с экспо-тремя? Я могу заставить нормальный код без постобработки работать без проблем, но как только я добавляю эффекты, они, похоже, ничего не делают. Я протестировал подобный код для веб-сайтов, и он отлично работает.

Мой код в Test.tsx:

import React from 'react'
import { GLView, ExpoWebGLRenderingContext } from 'expo-gl'
import { Renderer } from 'expo-three'
import {
  AmbientLight,
  BoxBufferGeometry,
  Fog,
  GridHelper,
  Mesh,
  MeshLambertMaterial,
  PerspectiveCamera,
  PointLight,
  Scene,
  SpotLight,
  Vector2,
  Color
} from 'three'

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'

const Test = () => {
  let timeout

  React.useEffect(() => {
    // Clear the animation loop when the component unmounts
    return () => clearTimeout(timeout)
  }, [])
  return (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={async (gl: ExpoWebGLRenderingContext) => {
        const { drawingBufferWidth: width, drawingBufferHeight: height } = gl
        const sceneColor = 0x6ad6f0

        // Create a WebGLRenderer without a DOM element
        const renderer = new Renderer({ gl })
        renderer.setSize(width, height)
        renderer.setClearColor(sceneColor)

        const camera = new PerspectiveCamera(70, width / height, 0.01, 1000)
        camera.position.set(2, 5, 5)

        const scene = new Scene()
        scene.fog = new Fog(sceneColor, 1, 10000)
        scene.add(new GridHelper(10, 10))

        const composer = new EffectComposer(renderer)

        const renderPass = new RenderPass(scene, camera)
        composer.addPass(renderPass)

        const outlinePass = new OutlinePass(new Vector2(width, height), scene, camera)
        composer.addPass(outlinePass)

        outlinePass.edgeStrength = 5
        outlinePass.edgeThickness = 1
        outlinePass.edgeGlow = 1
        outlinePass.pulsePeriod = 4
        outlinePass.visibleEdgeColor = new Color('#ffffff')
        outlinePass.hiddenEdgeColor = new Color('#919191')

        const ambientLight = new AmbientLight(0x101010)
        scene.add(ambientLight)

        const pointLight = new PointLight(0xffffff, 2, 1000, 1)
        pointLight.position.set(0, 200, 200)
        scene.add(pointLight)

        const spotLight = new SpotLight(0xffffff, 0.5)
        spotLight.position.set(0, 500, 100)
        spotLight.lookAt(scene.position)
        scene.add(spotLight)

        const cube = new IconMesh()
        scene.add(cube)
        outlinePass.selectedObjects = [cube]

        camera.lookAt(cube.position)

        function update() {
          cube.rotation.y += 0.05
          cube.rotation.x += 0.025
        }

        // Setup an animation loop
        const render = () => {
          timeout = requestAnimationFrame(render)
          update()
          composer.render()
          gl.endFrameEXP()
        }
        render()
      }}
    />
  )
}

class IconMesh extends Mesh {
  constructor() {
    super(
      new BoxBufferGeometry(1.0, 1.0, 1.0),
      new MeshLambertMaterial({ color: 'blue' })
    )
  }
}

export default Test

Мои зависимости:

    "@tweenjs/tween.js": "^18.3.1",
    "expo": "^35.0.0",
    "expo-av": "^7.0.1",
    "expo-constants": "~7.0.0",
    "expo-gl": "^7.0.0",
    "expo-graphics": "^1.1.0",
    "expo-haptics": "~7.0.0",
    "expo-three": "^5.2.0",
    "lodash": "^4.17.15",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-web": "^0.11.7",
    "styled-components": "^4.4.0",
    "three": "^0.110.0"
  }