Issue with achieving the same result as with Threejs about angular-three HOT 6 OPEN

hi @MaticDiba, I'm not well versed in THREE to know for sure. But it seems like it's some Color Space issue. Are you sure both Stackblitz use the same THREE.js version? In some later version, THREE.js has ColorManagement automatically. On the Angular version, you can try using the following inputs on ngt-canvas to test it out: legacy, linear, and flat

from angular-three.

from angular-three.

Hi again, I just tested this the new Angular Three (in a different repo, different package, still in beta) https://stackblitz.com/edit/angular-three-demo-template-6c2vs4?file=package.json,src%2Fmain.ts,src%2Fapp%2Fscene.component.ts,src%2Fapp%2Fapp.component.ts

Also, I tested the same setup with React Three Fiber (https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) and they seem to have the same output (https://codesandbox.io/s/youthful-solomon-u5i314?file=/src/App.js)

Both Angular Three and React Three Fiber have automatic color management (and rely on THREE.js ColorManagement prop)

Thoughts?

from angular-three.

Thanks for your fast replay :)
I think that using all three: legacy linear flat are getting closer to the result. But still not there.

I guess I would need to somehow figure it out how to achieve the same coloring with automatic color management. I am quite fresh with Threejs.

from angular-three.

@MaticDiba it is easier to rewrite your example with vanilla JS without any framework then use my R3F codesandbox and ask about the issue in React Three Fiber github discussion. I think you'd get better answers there than here

from angular-three.

@MaticDiba I think I figured out the differences but it doesn't apply to the current version of Angular Three. The new Angular Three (from Stackblitz I shared above) DOES apply. I just wanted to let you know the differences so you're aware

Both Angular Three and React Three Fiber set up some defaults:

• ColorManagement.legacyMode = false on THREE.js 0.139 and older
• WebGLRenderer.outputEncoding = THREE.sRGBEncoding
• WebGLRenderer.toneMapping = THREE.ACESFilmicToneMapping

On this Stackblitz (https://stackblitz.com/edit/angular-three-demo-template-6c2vs4?file=package.json,src%2Fmain.ts,src%2Fapp%2Fscene.component.ts,src%2Fapp%2Fapp.component.ts), you can add [linear]=true to change the outputEncoding and [flat] = true to change the toneMapping. Then the result will be the same as the plain THREE.js sample. However, please be advised that the defaults Angular Three (and React Three Fiber) sets are to provide more correctness to the color space.

https://threejs.org/docs/#manual/en/introduction/Color-management

from angular-three.