A quick suggestion on how you're applying AO to vertices โ by writing to vertex color, the result is liable to look "dirtier" than it realistically should, because the renderer is applying the same amount of light to a "darker" surface, rather than actually applying less light. You can avoid that with an interesting trick:
Create a simple gradient texture, 1x256px white-to-black. Then, write into the uv2
attribute instead of a color
attribute, setting values between 1,1
and 1,255
for white to black. I've written an example here:
// A greyscale 256x1 gradient.
const TEXTURE_MIME_TYPE = 'image/png';
const TEXTURE_DATA = new Uint8Array([
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 1, 0, 0, 0, 0, 1, 8, 6, 0,
0, 0, 49, 89, 112, 119, 0, 0, 0, 32, 73, 68, 65, 84, 56, 79, 99, 100, 96, 96, 248, 207, 196,
196, 196, 0, 2, 163, 244, 104, 56, 140, 166, 131, 145, 147, 15, 24, 25, 25, 25, 0, 254, 131,
3, 254, 243, 176, 75, 70, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130
]).buffer;