geo-ambient-occlusion-three

A Three.js wrapper for geo-ambient-occlusion that allows you to bake ambient occlusion into vertex colors or textures for arbitrary meshes.

Features

Compute per-vertex ambient occlusion for Three.js meshes.
Optionally bake AO into a texture.
Baked texture have Dilation

Installation

npm install geo-ambient-occlusion-three

Usage Example

import * as THREE from "three";
import { vertexBake, textureBake } from "geo-ambient-occlusion-three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const scene = new THREE.Scene();
const loader = new GLTFLoader();
loader.load(
  "./scene.glb",
  (gltf) => {
    scene.add(gltf.scene);
    //with bake texture aoMap
    vertexBake(scene, { resolution: 1024, bakeTexture: true });

    //bake in vertex colors
    vertexBake(scene);
    //need turn on show vertex colors
    scene.traverse((obj) => {
      if ((obj as THREE.Mesh).isMesh) {
        const material = (obj as THREE.Mesh).material;
        if (!Array.isArray(material)) material.vertexColors = true;
      }
    });
  },
  undefined,
  (err) => {
    console.error("Error loading GLTF", err);
  }
);

also look in "/example/index.ts"

Notes

Requires WebGL support for OES_texture_float.
Safari support is currently limited.
Designed to work efficiently with Three.js BufferGeometry.