UnrealBloomPass acne like z-fighting

Questions
,
1

image
image1006×1004 48.5 KB

  • SimpleBoxGemotery works but not work in my Glb models

image
image1440×1278 101 KB

  • acne screenshot I decrease bloomStrength for clear screenshot

I loaded GLB model into my scene and applied RenderPass and then UnrealBloomPass
but acne has happened looks like z-fighting problem
I also look Exmaple of Three.js UnrealBloomPass
Do you have any ideas???

[Scene.envrionment] : ToneMapping, Equi Reflection
[Scene.background] : 0x8080 color
WebGLRenderer, GLB Material is MeshPhysicalMaterial
render called when something changed in scene or orbitControl’s change

2

What are your cameras near and far values set to? Try bringing your near to a bigger value and your far to a lesser value maybe

1 Like
3

Thanks for ideas! @forerunrun near : 0.1, far : 1000, I try your solution set near 100, far 500

image
image1664×1638 134 KB

still in acne

4

Less though right? In your first image are these 3 seperate meshes overlapping? If they are it’s z-fighting where the meshes occupy the same or near same z position, you would need use a program to either delete inner meshes or move them so there’s more of a distance between each

Screenshot_20221026_094102
Screenshot_20221026_0941021080×2268 116 KB

1 Like
5

Yes it’s better than before
First Image is only one mesh with green but looks like 3 Mesh with z-fighting
Thanks for ideas!

6

Any chance you can share the glb model here to inspect? If its not z-fighting it could be a face normal / texture normal mismatch

1 Like
7

Single sofa 1.glb (850.2 KB)
here is model

8

viewing you model with @donmccurdy’s gltf viewer the model seems to render fine as well as a test scene i created… can you share what code you are using to add the model to the scene in a codepen / jsFiddle live example?

image
image838×709 74.3 KB

and seems to work fine with a conventional bloom pass
image
image561×509 38.7 KB

1 Like
9

Thanks but I currently make kind of framework of three.js so I want to share Jsfiddle but lots of codes are capsuled. I appreciate for check lots of things have a good day @Lawrence3DPK I’ll let you know when i find a reason

10

I miss that updateProjectionMatrix() after control near, far! so silly… Thanks @Lawrence3DPK

11

I know this issue is solved, but I had a similar problem and I used logarithmicDepthBuffer in my renderer, and fixed the issue:

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas as HTMLElement,
      logarithmicDepthBuffer: true,
    });
1 Like