gtao pass issue

by stan987

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>
<div>

</div>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from "three"
import Stats from "three/addons/libs/stats.module.js"
import { GUI } from "three/addons/libs/lil-gui.module.min.js"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js"
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"
import { RenderPass } from "three/addons/postprocessing/RenderPass.js"
import { GTAOPass } from "three/addons/postprocessing/GTAOPass.js"
import { OutputPass } from "three/addons/postprocessing/OutputPass.js"

let camera, scene, renderer, composer, controls, clock, stats, mixer

init()

function init() {
  clock = new THREE.Clock()
  const container = document.createElement("div")
  document.body.appendChild(container)

  renderer = new THREE.WebGLRenderer() // Удален повторный var
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setAnimationLoop(animate)
  document.body.appendChild(renderer.domElement)

  scene = new THREE.Scene() // Удален повторный var

scene.background = new THREE.Color(0xbfe3dd)

  // light
  const light = new THREE.DirectionalLight(0xffffff, .5)
  light.position.set(2, 2, 0)
  scene.add(light)

  // geometry
  const geometry = new THREE.SphereGeometry(1, 1, 16)

  // material
  const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true,
    transparent: true,
    opacity: 0.7,
  })

  // mesh
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    100,
  )

  camera.position.set(3, 0, 4); 

  controls = new OrbitControls(camera, renderer.domElement)
  controls.target.set(1, 0, 0)
  controls.update()
  controls.enablePan = false
  controls.enableDamping = true

  const width = window.innerWidth
  const height = window.innerHeight

  composer = new EffectComposer(renderer)

  const renderPass = new...