Are SAOPass and SSAO Pass the only AO options available? Examples inside

[kylewetton]

Hey guys, so I’m creating a version of a shoe customizer and found Vans example something to strive for. I notice though that they have what appears to be some kind of SAO pass on their render. This AO isn’t at the texture level but seems to be global. Is anyone with more experience able to eyeball what could be causing this effect they have? Here’s my progress vs their app

Mine

Theirs

I haven’t had any luck with SSAO (all the colours darken drastically), and SAO honestly seems entirely broken, maybe I need to look closer at that?

[looeee]

Could you link the vans app here? And also your app if possible, or at least the code you’re using to set up post-processing. Also your tone-mapping and encoding settings. Darkened color could be caused by the wrong encoding somewhere.

[kylewetton]

Thanks man, I followed your suggestions for the colour encoding in your Tips and Tricks article (more below)

Here’s the vans app

My color setup is as follows:

Renderer

  rendererInstance.gammaFactor = 2.2;
  rendererInstance.outputEncoding = GammaEncoding;
  rendererInstance.physicallyCorrectLights = true;
  rendererInstance.toneMapping = LinearToneMapping;

Material (using a MeshPhongMaterial here)

// Here I have a function that returns a linearColor 
const color = (hex) => {
 const linearColor = new Color(hex);
 linearColor.convertSRGBToLinear();
return linearColor;
};

const materialColor = color("#c2c0a7")

material = new MeshPhongMaterial({
    color: materialColor,
}); 

SSAO

// In the constructor
this.effectComposer = new EffectComposer(this.renderer);
this.renderPass = new RenderPass(this.scene, this.camera);
this.effectPass = new SSAOPass(this.scene, this.camera);

// When mounting the Class (loadingManager is done)
   this.effectComposer.addPass(this.renderPass);
   this.effectPass.setSize(width, height);
   this.effectComposer.addPass(this.effectPass);

  // Then in the loop I'm just rendering the composer
  this.effectComposer.render();

The result, squares represent the hex above

SSAO Off (acceptable similarity)

SSAO On (Much darker)

[Popov72]

They are not using any AO technic, they are simply using 5 spot lights and one directional light.

You can check this thanks to Spector.js.

[kylewetton]

Oh wow, okay I’ll look into this. I’m wondering about performance. I once ran a three instance with I think 4 lights. My iMac rendered all the lights but my Macbook Air only rendered 2 of them. The issue plagued me for days until I realised it was the graphics card limitation, so since then I assumed I’d always stick with 1-2 lights max.