CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
https://cesium.com/cesiumjs/
Apache License 2.0
13.02k stars 3.51k forks source link

Wrong color output from custom shaders #10444

Closed UniquePanda closed 2 years ago

UniquePanda commented 2 years ago

Hi all,

while experimenting with custom shaders on 3DTiles, I got the feeling that the final color (in which the 3DTile is rendered) is often a bit too bright. I've now tried it in the sandcastle and indeed, when I just apply a fragment shader that sets the diffuse color to vec3(0.5, 0.5, 0.5) the final rgb color in the rendered image is 186, 186, 186. I would have expected a value around 128, 128, 128. (I read the color from the screen with a color picker tool). I added the sandcastle example below (it's just the default custom shader example with a modified fragment shader). I also tried to replicate the same thing with the styling language (example also attached below) but I don't know how to remove lighting in this case, so the colors are influenced by the scene lighting. However, they definitely look darker, even in the spots that are well lit.

We tested this for a while now with different shaders and also had some looks at Cesium's code but we weren't able to find out what exactly causes this. So this is either a bug or we just don't understand, how it is supposed to work :D In the latter case it might make sense to add something about this in the docs then.

Sandcastle example: Example with custom shader and wrong(?) colors: https://sandcastle.cesium.com/#c=bVNtb9owEP4rJ/YlSMHpCtWmjKJNbJWQoJNWtk+RVse+gFXHjmwnBSr++5yEtGE0UmL7nudefM9ljlaUOfmxK9CIHJWj8g6pKw1agoqmEleao+zjcAvOlPglUYliWlkHlcBnNN6u8BnmbcQ/jS1IBqw5z7V3FQpNMhj2PJ2QaNGdu7bL+Pu6BYOXRAGURsYdYaHVL7S6NAxJZnT+zXraggefbsaT8TCs6ay0TucPW8rRxGfBe0AbGUCKzdYJtWmu+ppl2beS3/fLxTps+Zmhm7oXbZQ17lwMjy0EEEUw11Kb9m6Q7oEL66hiCE6D2yIwmqOhHb/Sgr9GXPkeBXenw0IVpYPMNmsIQml/ZIf8b15XtKLOS+LlyE+bYRfxpdvUT4cSLrKstOhbXSEbB1fkJoTuU0vS0o/d5rG567Hu5rGGW42JZaiQFH4WhBOVHxLKeXBSsUc7aJ2vdR9I1CAcTK3bS5x1Ob6KvNDG1doGhEQO80L6cm2UluwJHWHWvlX2wWktU2r610spe9oYXSoeg9mkNJhch9C9V+TzmzdA4Sv1asYwKXY9c6qN13BkKBelPQePF6lFo0ivgAqNE4zKEfUzpGLIBecSL7OOnC5iuD7L3EGpdn4iz9FT6mnUb9iUiwoEv33nnwImqbUeyUopH8QBk8FsGnn+havUtM7601cu6b6mbT/Olq2REDKN/PF9z1MT/ov8Dw

Example with styling language and different colors: https://sandcastle.cesium.com/#c=dZJba+MwEIX/yuC+OJDIaZOyi9cNu3RfCoWFtuyTXmRpmh0qa4wkuzf639e3kGTTNdhCc86ZbySs2YUILeEzergCh89wjYGaSvweaqlM9LC/ZhcVOfQymX2TTjo9JCNZDBiPo+Oy+vkwium7dACNt/nOcMPuDgM3XqN49Fz9CJ3txqRfLlfr1Wwu3cfImLqLEF8t/p9x38sjBTRb9jnIpEW9Tpficg77z7lYzmSy7z+eWwSNDkXtqaJILQahjEkndm+cbG/M1QMfCtIl86QYptsM9O75TlXNPvbnTYXIIla1VRFDVjb6qTuLDqGPjuazyGxL5eF9VwEolX7aem6cycFvS5WuL+awe5fi6z4NUHeTktvmsK5fDsole4N+4ZWhJhyLHydocnUTDwdo0UfSyi6Upa3LoSJjLJ5SF5HrHC6OyDup5Bi5OlYndJEdXlhhqAUyV5/8Z6CtCqFTHhtr7+kNZbIpss5/ErWseuqvbnKrXnvbn/PN7VgUQhRZt/08OV3CP53/Ag

Browser: Newest Chrome and Firefox

Operating System: Windows 10

UniquePanda commented 2 years ago

We investigated some more and found out that the "problem" is the lightingStage which calls czm_linearToSrgb when HDR is not defined.
I can see how this can make sense. However, it feels like this shouldn't be "enforced" here. Especially because it seems that using the styling language does result in colors that are not converted to sRGB? Currently this is a bit confusing for me :D

ptrgags commented 2 years ago

Hi @UniquePanda,

Indeed, czm_modelMaterial always assumes that colors are in linear space, and if HDR is off, this is converted back to sRGB.

I agree that this is not obvious, so I opened #10446 to add documentation for Custom Shader.

As for styling, colors seem to be specified in sRGB space based on the shader code.

UniquePanda commented 2 years ago

Thanks @ptrgags! This should make it more clear and as I now know what happens why, it should be easier to make this work for us 🙂

P.S.: I see you fixed the wrong URL in the shader guide, too. So an additional 👍 for this! 😁