supereggbert / aframe-aobake-component Goto Github PK

hi,

seems not working on a-obj-model .

<a-entity aobake="exposure:1, distance:1" > <a-torus-knot material="color: #fff" position="0 1 -4" arc="180" p="2" q="3" radius="1" radius-tubular="0.2"></a-torus-knot> <a-obj-model id="model_base" scale="0.1 0.1 0.1" src="model/teapot.obj"> </a-obj-model> </a-entity>

This looks like a super helpful component, thanks for putting it together!

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:

https://github.com/donmccurdy/glTF-Transform/blob/master/packages/ao/src/ao.ts

// 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;

const numVertices = ao.length;
const uv2Data = new Float32Array(numVertices * 2);
for (let i = 0; i < numVertices; i++) {
    uv2Data[i * 2] = uv2Data[i * 2 + 1] = 1 - ao[i];
}
geometry.addAttribute( 'uv2', new THREE.BufferAttribute( uv2Data, ... ) );