Issue with achieving the same result as with Threejs

[MaticDiba]

Hi, I'm trying to achieve the same result with angular-three as I got with using ThreeJs "vanilla" way. I prepared both examples on Stackblitz. There is a difference in color although I'm using the same parameters for all the lights, materials, and background. Could you please help me understand why there's a difference? Using ThreeJs: https://stackblitz.com/edit/angular-ivy-k2e13k Using Angular-Three: https://stackblitz.com/edit/angular-ivy-uefxeg

Also, I wasn't able to find a way to generate simple terrain without using physicBody. Therefore I defined geometry and material in code-behind. If there is some other way, I would much appreciate an example.

[nartc]

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

[nartc]

with `linear` with `linear` and `legacy` with `linear`, `legacy`, and `flat`

[nartc]

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?

[MaticDiba]

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.

[nartc]

@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

[nartc]

@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