pmndrs / pmndrs/postprocessing

MipMapBlur ugly rendering on mac with transparent background

Open
#475 25 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

investigating
Dominant language
JavaScript
Stars
2.9k
Forks
251
Avg merge
17m
Merged PRs (30d)
1

Description

Description of the bug

When using the BloomEffect/SelectiveBloom effect with mipmapBlur: true on windows with a transparent background the effect has a
nice roll-off, especially with higher radius and low smoothing values.

The exact same setup on MacOS renders with ugly banding and what seems like significantly lower mipMap levels, to the point that there is no roll-off.

To Reproduce

I have replicated the exact settings used by <model-viewer> in this sandbox.

https://codesandbox.io/s/bloom-transparent-zpn7iw?file=/src/App.js

Screenshots

Windows, IOS render like this:
image

MacOS renders like this:
Screen Shot 2023-04-10 at 23 02 39

Library versions used
  • Three: [e.g. 1.151.3]
  • Post Processing: [e.g. 6.30.2]
Desktop
  • OS: MacOS
  • Browser [Chrome, Firefox]
  • Graphics hardware: [M1, Intel HD Graphics]
Additional comments:

I have checked all WebGL compatibility issues I could have thought of, with https://webglreport.com/?v=2.
Both desktops that created the screenshots support OES_texture_float_linear, 'highp' precision. The max samples is different (16 vs 8), but that is not enough to explain the difference since the default mimapblur uses 8 levels and I have not altered it. I can also confirm this does not happen with alpha: false on the WebGLRenderer.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox, especially src/App.js, and reproduce BloomEffect or SelectiveBloom with mipmapBlur enabled and a transparent WebGLRenderer. Compare the MacOS output with the Windows or iOS result while checking the reported alpha, mipmap-level, precision, and texture-filtering conditions. Done means removing the banding and restoring the expected roll-off without breaking the opaque-background behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.