Posted in Uncategorized

Slightly different color processing in different browsers with PNG files

   January 6, 2021  1 Comment on Slightly different color processing in different browsers with PNG files
Description of the problem

I noticed that there’s a difference in color processing in threejs depending on the browser. In this case, Chrome and FireFox look the same, while in Edge the color looks slightly darker.
You can see what I mean when you go to: https://www.kareldonk.com/

I have an intro running on that page, and you’ll note that the particles rotating around in a torus formation look slightly darker in Edge compared to Chrome and Firefox.

When I load a JPG map for the particles instead of a PNG, the color looks the same in all mentioned browsers.

This is probably related to the PNG issue mentioned here by user bhouston:
#6915

Three.js version
  • Dev
  • [X ] r84
  • …
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • [] All of them
  • Windows
  • Linux
  • Android
  • IOS
Hardware Requirements (graphics card, VR Device, …)

Desktop: AMD Radeon HD 5700 Series
Tablet: Surface Pro 4

I’m seeing the same color difference on both my desktop and surface pro 4, running windows 10.

Author: Fantashit

1 thought on “Slightly different color processing in different browsers with PNG files”

  1. Yes, your example is way too complicated.

    The issue appears to go away by setting

    particleMap = new THREE.Texture( image );
particleMap.premultiplyAlpha = true; // PNG image only

    but this issue is confounded by the very small point size ( 1 or 2 pixels ) in your shader and how the GPU down-samples the textures. The JPG has a black background; the PNG does not.

    https://jsfiddle.net/7ye6n7d0/27/

    I do not think this is a three.js issue.

Comments are closed.