Suggestions: about usability & visual quality

[luan007]

🎉🎉 Thank you for such amazing library! A great piece for vue x three community.

For me (heavy threejs + raf oriented user) this is already perfect! but looking at react-three-fibers, I've got 1-2 suggestions for contributors to consider.

1. Better visual quality by default (I can see we already have postprocessing & efforts put in visual quality, thus raising this visual-oriented suggestion could be relevant) we may provide nice default value + expose options around:

_dpi: Auto DPI scaling (setPixelRatio) _toneMapping: ACES ToneMapping _shadows: PCSS & VSM Shadow _colors: this might be a bit involved (trois/src/materials/Texture.js), could we auto-fix encoding for all textures (also on colors : convertSRGBToLinear when possible, don't know how to proceed though)?

2. Usability add-ons

for ordinary vue-users, layout in the 3D world can be tough.. this is a heavy one too, but libs like Yoga could be used to provide layout 'containers'.

Please consider this as my own to-do too, I'll try to do something in next-proj if any of those sounds useful.

[klevron]

Thanks for the suggestions, I will handle this after the heavy typescript refactoring

[klevron]

Hi @luan007, typescript refactoring is done :) About the texture, you need a param so that every texture will use the same encoding ? Can you explain what you need about convertSRGBToLinear ?

[luan007]

@klevron thank you for your efforts.. I'm referring to https://github.com/pmndrs/react-three-fiber/issues/344 or https://github.com/pmndrs/react-three-fiber/commit/9f9883121beb54d6f6a9b588c041ae55357bdbf6

basically to get 'good looking & correct looking' images, users would do:

rndr.toneMapping = THREE.ACESFilmicToneMapping
rndr.outputEncoding = THREE.sRGBEncoding

after which, when using THREE.Texture

tx.encoding = THREE.sRGBEncoding

must be called to ensure correctness of color space, or it would result in visual inconsistencies.

Same logic applies to THREE.Color after tonemap

col.convertSRGBToLinear()

should be called when using tonemapping.

Thus in react-three-fibers, due to being essentially wrapper of three objects, these things can be called 'automatically' upon mount / change, thus I'm thinking if it is possible to do the same in vue context.

Thank you again!