Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can i fixed this? #37

Open
RyugaRyuzaki opened this issue Nov 18, 2024 · 10 comments
Open

How can i fixed this? #37

RyugaRyuzaki opened this issue Nov 18, 2024 · 10 comments

Comments

@RyugaRyuzaki
Copy link

Hi i create n8ao with config :

   const {configuration} = this._n8ao;
    configuration.aoSamples = 16;
    configuration.denoiseSamples = 8;
    configuration.denoiseRadius = 12;
    configuration.aoRadius = 1;
    configuration.distanceFalloff = 4;
    configuration.intensity = 4;
    configuration.halfRes = true;
    configuration.color = new THREE.Color().setHex(0xcccccc, "srgb-linear");

renderer :

  this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      context: this.canvas.getContext("webgl2")!,
      antialias: true,
      precision: "highp", // 'lowp', 'mediump', 'highp'
      alpha: false,
      stencil: false,
      powerPreference: "high-performance",
      logarithmicDepthBuffer: true,
      preserveDrawingBuffer: false,
    });
    this.renderer.setSize(width, height);

    this.renderer.setPixelRatio(pixelRatio);

    this.renderer.outputColorSpace = "srgb";

    this.renderer.localClippingEnabled = true;

    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;

    this.renderer.toneMappingExposure = 1.2;

    this.renderer.shadowMap.enabled = true;

    this.renderer.shadowMap.type = THREE.VSMShadowMap;

    this.renderer.shadowMap.autoUpdate = false;

    this.renderer.shadowMap.needsUpdate = true;

    this.renderer.autoClearStencil = false;

    this.renderer.outputColorSpace = THREE.SRGBColorSpace;

    this.renderer.xr.enabled = true;

How ever when i rotate camera it looks not good like these
image
image

@N8python
Copy link
Owner

Turn off half res, increase bias, and reduce radius.

@RyugaRyuzaki
Copy link
Author

It did not work!

@N8python
Copy link
Owner

could you send me a copy of your code? Ensure your depth buffer is high-precision.

@RyugaRyuzaki
Copy link
Author

RyugaRyuzaki commented Nov 21, 2024

Hi, all code in upper.I copy exactly this

@N8python
Copy link
Owner

Okay - are you sure the scale of your scene is near the radius of N8AO. Try enabling screenSpaceRadius

@RyugaRyuzaki
Copy link
Author

screenSpaceRadius

where can i enable "screenSpaceRadius"?

@N8python
Copy link
Owner

In 'configuration'.

@RyugaRyuzaki
Copy link
Author

screenSpaceRadius

HI after change , it works but nothing different base renderer

  // this.composer.addPass(this.n8ao);
    const {configuration} = this._n8ao;
    configuration.aoSamples = 32;
    configuration.denoiseSamples = 1;
    configuration.denoiseRadius = 13;
    configuration.aoRadius = 1;
    configuration.distanceFalloff = 4;
    configuration.intensity = 5;
    configuration.halfRes = true;
    configuration.color = new THREE.Color().setHex(0xcccccc, "srgb-linear");
    configuration.screenSpaceRadius = true;

Base renderer

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      context: this.canvas.getContext("webgl2")!,
      antialias: true,
      precision: "highp", // 'lowp', 'mediump', 'highp'
      stencil: false,
      powerPreference: "high-performance",
      logarithmicDepthBuffer: true,
      preserveDrawingBuffer: false,
    });
    this.renderer.setSize(width, height);

    this.renderer.setPixelRatio(pixelRatio);

    this.renderer.localClippingEnabled = true;

    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;

    this.renderer.toneMappingExposure = 1.2;

    this.renderer.shadowMap.enabled = true;

    this.renderer.shadowMap.type = THREE.VSMShadowMap;

    this.renderer.shadowMap.autoUpdate = false;

    this.renderer.shadowMap.needsUpdate = true;

    this.renderer.autoClearStencil = false;

    this.renderer.outputColorSpace = THREE.SRGBColorSpace;

    this.renderer.xr.enabled = true;    

image

@N8python
Copy link
Owner

Increase the radius to ~48.

@RyugaRyuzaki
Copy link
Author

Increase the radius to ~48.

It does not work. Btw i use unique vertices when i calculate posistion in this.
And after create geometry i call geometry.computeVertexNormal() and material is :

  private readonly material = new THREE.MeshLambertMaterial({
    transparent: false,
    flatShading: true,
    side: THREE.DoubleSide,
    clipShadows: true,
    clipIntersection: true,
  });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants