How to use AOMap

jaya_kannan · January 11, 2021, 5:06am

Hi, I need to add an AOMap for getting better output in my project. I tried a lot. Still I couldn’t find the solution. How to apply this. Please say any suggestions.
I have seen this following example in threejs.org
three.js examples
in this example, we can see the AOMap is working.
but when I download the same model and same texture and try this in threejs editor to see the AOMap effects. But in that is not working. Please help.

donmccurdy · January 11, 2021, 6:27am

The examples show correct, complete use of an aoMap. If your own examples are not working you will need to share them so we can help you figure out what is not matching the correct usage.

Also note that AO (ambient occlusion) affects only ambient light sources. If your scene in the editor only uses direct lights, AO will not do anything. Also note that models must have a second UV set for use with an AO map. When loading a model using AO in GLTFLoader, the second UV set is added automatically if needed.

jaya_kannan · January 11, 2021, 6:41am

Wow. Thanks for brief explanation @donmccurdy . I need to know, what is the second UV set. Because, I just loaded the same model which is used in the above example in Blender. It has a single UV only. So What do you mean by second UV set. And One more thing, I have to say is, the whole object is being black when I enable aoMap with several flip. If I not do that, then there is no effect in the model.

donmccurdy · January 11, 2021, 7:17pm

If you check the code from that example, it’s modifying the model after loading it to add the second UV set:

github.com

mrdoob/three.js/blob/670b1e9e85356d98efa4c702e93c85dd52f01e1e/examples/webgl_materials_displacementmap.html#L192


					side: THREE.DoubleSide
				} );
				//
				const loader = new OBJLoader();
				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
					const geometry = group.children[ 0 ].geometry;
					geometry.attributes.uv2 = geometry.attributes.uv;
					geometry.center();
					mesh = new THREE.Mesh( geometry, material );
					mesh.scale.multiplyScalar( 25 );
					scene.add( mesh );
				} );
				//

This is necessary for formats like OBJ where the file does not contain the AO map and it has to be added afterward.

jaya_kannan · January 12, 2021, 6:49am

Thank you so much for your reply @donmccurdy . Awesome. It is working

Nursefa_Baybara · January 21, 2022, 10:02am

Yeaay, it is working, Thanks

DarioMQD · October 18, 2023, 2:20pm

In the current version of the example you mantioned uv2 is not there anymore. We don’t need to specify a 2nd uv set while using aO maps with the same uv layout or am I missing something?

donmccurdy · October 18, 2023, 2:25pm

This isn’t required in recent three.js versions, correct. If your aoMap was designed for a different set of UVs than other textures, you’d specify that with aoMap.channel = 1 (or whichever index).

Topic		Replies	Views
Ambient Occlusion (AOMap) not working Questions textures , materials	2	837	January 9, 2021
How do I apply a light map texture? Questions textures , materials , loaders	4	4427	July 13, 2022
How to add material to gltf object and keep Ambient Occlusion Map Questions textures , materials , geometry , gltf-loader	4	559	October 9, 2023
Change Mesh map except of AO map which has two uv map Questions textures , materials , uv-mapping , ambient-occlusion	2	513	May 17, 2023
aoMap from a 2d canvas? Questions textures , texture-loader , canvas-2d	1	1041	May 12, 2017

How to use AOMap

Related Topics