search

vasturiano / three-spritetext

A sprite based text component for ThreeJS
https://vasturiano.github.io/three-spritetext/example/basic/
MIT License
340 stars 46 forks source link

Using three.js version >= 152 requires texture to specify "SRGBColorSpace"? #41

Closed emirth closed 1 year ago

emirth commented 1 year ago

Hello!

I believe the latest versions of three.js at time of writing, starting with version 152, will require the texture to have its colorSpace set to SRGBColorSpace. I'm not entirely sure why but believe it relates to changes introduced via #25866.

The reason for my thinking this is that when I try the example/basic/index.html in this repository, changing ContainerText.backgroundColor from rgba(0,0,190,0.6) to rgba(55,71,79,1.0), I get this:

sprite-text-before

When I then go into dist/three-spritetext.js source and add a new line specifying the colorSpace:

// Inject canvas into sprite
if (this.material.map) this.material.map.dispose(); // gc previous texture
var texture = this.material.map = new three.Texture(canvas);
texture.minFilter = three.LinearFilter;
texture.colorSpace = three.SRGBColorSpace;

I get the expected color:

sprite-text-after

And I also get the expected color if I change the <script/> tag that pulls in three.js to pull in some version less than 152.

vasturiano commented 1 year ago

Good catch @emirth, I was unaware of this change. Thanks.

I've updated the texture colorspace as you suggested, and recommended on https://threejs.org/docs/index.html#manual/en/introduction/Color-management.