Normal map reveal threes (flat shading behavior)

Russo-creation commented 2 years ago

  "dependencies": {
    "@react-three/drei": "^8.1.0",
    "@react-three/fiber": "^7.0.26",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "three": "^0.136.0"
  },

Problem description:

Hi,

I'm facing with strange issue which I'm not fully sure if the problem is caused by @react-three/drei or @react-three/fiber (maybe even non of this library- three-stdlib?)

When I'm adding normal map to the object then shade smooth seems not working (or working partially)- trees are clearly visible on the object.

I tried to reproduce this on code sandbox https://codesandbox.io/s/threejs-normal-map-issue-ywg5jt?file=/src/object.js and I noticed this behavior when switching between @react-three/drei: 8.4 and @react-three/drei: 8.3.1

@react-three/drei: 8.4

@react-three/drei <= 8.3.1

But the real issue begin when I'm trying to use same dependencies on desktop but even then downgrading drei doesn't help (link to repo).

Does anyone noticed same issue and can confirm?

Edit:

I updated all dependencies to to the newest versions and the same issue is there- https://codesandbox.io/s/threejs-normal-map-issue-forked-qfiuxn?file=/src/index.js

drcmda commented 2 years ago

i don't see where r3f or drei could be related to broken normals tbh, unless it has something to do with gltfloader. there seem to be no relevant changes at first sight: https://github.com/pmndrs/drei/compare/v8.3.1...v8.4.0 but it certainly is strange.

drcmda commented 2 years ago

the change seems to happen between three 136 and 137.5, drei being 8.3.1. i think that was the one that removed RGB format. 137.0-4 show a black texture, .5 starts to work, but now it hs broken normals. must've faced more issues in that regard.

btw, if i just do <mesh geometry={...} material={nodes.athlete_statue.material} /> it works, so most likely your custom material doesn't bring over enough data.

edit:

there are no changes to package.json between 8.3.1 and 8.4.0 either, both use "three-stdlib": "^2.6.1", and "three": ">=0.134"

drcmda commented 2 years ago

ok i think i got it: https://codesandbox.io/s/threejs-normal-map-issue-forked-ol102y?file=/src/object.js:384-525

normalMap={nodes.athlete_statue.material.normalMap}
normalMap-flipY={false}
normalMap-encoding={THREE.LinearEncoding}

i still don't know why a change in drei without any dependency change would trigger it, maybe it's about codesandbox using cjs instead of esm, which can cause mix-ups (two threes being loaded). but the root issue is this: three changed color spaces. i have no idea why srgb will flip normals but that's something that needs to be asked on three's github.

i will remove color correction in v8 completely because finally threejs switches to srgb in 139.

pmndrs / drei

Normal map reveal threes (flat shading behavior) #793

Problem description:

Edit: