react-postprocessing icon indicating copy to clipboard operation
react-postprocessing copied to clipboard

ToneMappingMode is not re-exported. This can lead to confusion due to how Typescript handles enums

Open DanielSturk opened this issue 1 year ago • 0 comments

React-postprocessing does not re-export the ToneMappingMode enum from postprocessing, requiring the user to also add the postprocessing library as well.

This can lead to confusion because of how TypeScript handles enums. Both the three.js ToneMapping enum and the postprocessing ToneMappingMode enum are integers, and thus TypeScript views them as compatible. Therefore, the following will not produce a Typescript error, and flipping through the different options will change the tonemapping, making it appear to work while being incorrect:

import { ACESFilmicToneMapping } from 'three';
<ToneMapping mode={ACESFilmicToneMapping}/>

Screenshot of how this looks in a typical VS Code project, to illustrate why it's easy to make this mistake: image

It took me a while to figure out the issue, I only knew something was wrong because I had reference material to compare against, but others may not be as diligent. I knew my co-worker was using this library as well for another project independently of my work, so I searched through his projects and found that he had made the same mistake as well. Thus, I feel that this issue may be common, but under-reported.

DanielSturk avatar Feb 14 '24 16:02 DanielSturk