Not long ago I switched from Unity to Three.js in one of my projects - interactive animations of Roger Dean’s paintings: https://dean.yesbird.online
Now I would like to get the best rendering quality of textures to preserve resolution, colors and keep details as accurate as possible. This is what I have now with MeshBasicMaterial and DirectionalLight: Painting rendering test
Could you please suggest to me the best way for rendering such bitmaps as they are ?
I mean material and lighting setup, scene environment, etc.
MeshBasicMaterial tries to output exactly what the .map image contains, without any effects of lighting… So that’s probably what you want if your goal is to present the images as accurately as possible.
If you are planning on using lights to affect the image in some way, then you will probably need to use something like MeshStandardMaterial as this material type interacts with all the lights.
Other aspects of this are the resolution of the textures. You may be practically limited by filesize of your images if trying to use PNG format… so you may consider using jpg, webp, or KTX2 texture compression if that is an issue.
Then there are some gotchas depending on how the renderer is set up, whether you need to specify color space on your loaded images. If they appear washed out compared to the original, you may need to set texture.colorSpace = THREE.SRGBColorSpace;
There is a bunch more information on colorspace here: three.js docs
Thanks a lot for detailed answer, this is exactly what I was need for.
Even don’t know what I like more - your professional skills or sense of humor :).