Panorama image is darker than original image

Questions
,
1

I set equirectangular image as panorama by the following code.

However, the color is darker than original image.
(Maybe gamma factor is not appropriate?)

This is the comparison between the original image (left) and the panorama image rendered by r3f(right).
If you see red area, you can see the panorama image(right) is darker than original(left).
image

Could you please tell me how to fix this?

import * as THREE from 'three'
import React, { useState, Suspense } from 'react'
import { Canvas, useThree, useLoader, useFrame } from 'react-three-fiber'
import { OrbitControls, Html } from 'drei'

export default function App() {
  const [fov, setFov] = useState(80)

  function onMouseWheel(e) {
    const fovVal = Math.sign(e.deltaY) * 0.05 + fov + e.deltaY * 0.3
    setFov(THREE.MathUtils.clamp(fovVal, 10, 80))
  }

  function Environment() {
    const { scene } = useThree()
    const texture = useLoader(THREE.TextureLoader, 'https://storage.googleapis.com/sekokan-dev/4efe1f00-fbfa-4784-8602-c400c68c1d9f')
    texture.mapping = THREE.EquirectangularReflectionMapping
    texture.encoding = THREE.sRGBEncoding
    scene.background = texture
    useFrame((state) => {
      state.camera.fov = fov
      state.camera.updateProjectionMatrix()
    })

    return null
  }

  return (
    <>
      <div className="r3fCanvas" onWheel={onMouseWheel}>
        <Canvas
          className="canvas"
          camera={{ position: [0, 0, 2.75], fov: fov }}
          // pixelRatio={[1, 2]}
        >
          <OrbitControls enableDamping enableZoom={false} enablePan={false} dampingFactor={0.05} rotateSpeed={-1.1} />
          <Suspense fallback={<Html>loading..</Html>}>
            <Environment />
          </Suspense>
        </Canvas>
      </div>
      <style jsx global>
        {`
          .componentNotZoom {
            position: relative;
            background-position: left top;
            background-repeat: no-repeat;
            background-size: auto 10%;
            height: 30%;
            width: 10%;
          }

          img {
            width: 250px;
            // visibility:hidden;
          }

          .canvas {
            touch-action: none;
          }

          .r3fCanvas {
            height: 100%;
            touch-action: none;
          }
        `}
      </style>
    </>
  )
}

Here is the link of code sandbox.

and this is the original image I use in code sandbox.

R0011423_20210907125416
R0011423_202109071254165376×2688 391 KB

Here is the comparison between panorama and original.
If you compare original image (left) and panorama image in code sandbox(right), you can see that panorama image is darker than original.

スクリーンショット 2021-09-07 12.59.52
スクリーンショット 2021-09-07 12.59.521920×1120 163 KB

2

BTW, I fixed the code of code sandbox that had bug when i posted this question.

3

Can you post your renderer settings? :thinking:

4

Hi, I don’t explicitly defined renderer in my code.
I think Canvas component automatically generate renderer in react-three-fiber(Maybe).

By the way,
in discord of threejs, kind person tell me how to fix.

Here is my procedure.

  1. I remove this line.
texture.encoding = THREE.sRGBEncoding
  1. upgrade r3f
  2. set flat and linear props of Canvas component as true.

Then, the color is same as original! here is the code i already fixed r3f ibl envmap simple (forked) - CodeSandbox

Thank you for your help!