question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Loaders: Ensure all loaders properly label and convert color textures and colors to sRGB / Linear correctly

See original GitHub issue

Is your feature request related to a problem? Please describe.

From what I can tell these are the loader examples that still are not setting renderer.outputEncoding = sRGBEncoding on the page meaning they don’t appropriately set the model color spaces for linear lighting calculations on load where I think the color space should be known at parse time:

Material Colors & Textures

  • ColladaLoader examples (#23401)
  • OBJLoader examples (#23296)
  • SVGLoader (example logic only) (#23280)
  • ColladaExporter (#23400)
  • KMZLoader Example (#23401)
  • FBXLoader examples
  • IFCjs example
  • MMDLoader example?
  • Maybe: Vox, VRML, VTK, PCD, GCode

Vertex Colors

  • PLYLoader (#23342)
  • ColladaLoader (#23401)
  • OBJLoader (#23340)
  • OBJExporter (#23374)
  • PLYExporter (#23399)
  • ColladaExporter (#23400)

I was taking a look at ColladaLoader and OBJLoader, as well. It doesn’t look like there’s very explicit documentation on color spaces for these formats and they’re more specification by convention. Given that our demos don’t adjust the default output color space for the renderer it seems like the assumption is that the textures and colors are sRGB. Is there any evidence or example models that show this isn’t always the right thing to do?

Describe the solution you’d like

All loaders look correct when setting WebGLRenderer.outputEncoding to sRGBEncoding by appropriately labeling all color textures and converting colors to Linear before setting materials.

Describe alternatives you’ve considered

Additional context

#23272

#23280

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
gkjohnsoncommented, Feb 1, 2022

At this point I’ve updated all the loaders I’m familiar with. It’s possible that externally maintained loaders (IFC) should wait to upgrade until something like #23392 is figured out. This should get most all of the canonical three.js loaders loading into a consistent color space so it should be easier to transition / catch issues with any future color space management changes.

@looeee would you be able to convert FBXLoader to convert all material and light Color instances and vertex color to Linear on load? And label all color texture maps as sRGB? According to this documentation all colors in FBX are expected to be sRGB (credit to WestLangley for the link).

And @takahirox maybe MMDLoader should do the same so everything works with renderer.outputEncoding = sRGBEncoding?

Other than that I’m unfamiliar with the remaining loaders I listed (Vox, VRML, VTK, PCD, GCode) so I’m not sure if they need to be changed.

1reaction
scurestcommented, Jan 21, 2022

FWIW, you may want to know that Blender (at least recent versions) exports material colors (eg. Kd) as linear (obj, dae), but vertex colors as sRGB (dae). I don’t think this is by intent (this is how it stores it internally, so probably just no one ever thought about it) but it is how it works. I don’t know about other formats.

(Personally I agree with gkjohnson that sRGB should be the default assumption.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Gamma Correction - LearnOpenGL
If we create a texture in OpenGL with any of these two sRGB texture formats, OpenGL will automatically correct the colors to linear-space...
Read more >
Color management in three.js - Don McCurdy
Materials and lights require RGB components in Linear-sRGB. Hexadecimal and CSS colors are generally sRGB, and must be converted. Renderer ...
Read more >
Do I need to gamma correct the final color output on a modern ...
First of all, OpenGL does all it's color operations linearly. ... A texture loaded with this format undergoes a sRGB to linear RGB...
Read more >
Image Loader Color Space - Graphics and GPU Programming
I'm wanting to use linear rendered pipeline and thus all images should be in linear color space and only gamma corrected at the...
Read more >
Spatial Material - Godot Docs
SpatialMaterial is a default 3D material that aims to provide most of the features ... If you use a color or texture with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found