panorama image is darker than original image #1636

takerfume · 2021-09-06T09:07:54Z

takerfume
Sep 6, 2021

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).

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.
https://codesandbox.io/s/r3f-ibl-envmap-simple-forked-mzju6?file=/src/App.js

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

Answered by takerfume

Sep 7, 2021

Hi, I can solve this problem by following advice in discord server.
I wrote the solution in forum of threejs.
https://discourse.threejs.org/t/panorama-image-is-darker-than-original-image/29640/4

Thank you for your help.

View full answer

drcmda · 2021-09-06T19:40:01Z

drcmda
Sep 6, 2021
Maintainer

i guess thats just how threejs renders it. i see no difference even when i switch color autocorrection off. you can try linearencoding on the texture, that makes it really bright but other than that i think the threejs people (their discord) will be able to help out better. drei btw has a readymade drop in environment https://github.com/pmndrs/drei#environment

1 reply

takerfume Sep 6, 2021
Author

@drcmda
Thank you for your reply.

I wonder if the technique written in the following url can solve this problem.
https://discoverthreejs.com/tips-and-tricks/#accurate-colors

How can I change gammaFactor and outputEncoding of renderer in r3f like the following code(written in pure three.js)?

renderer.gammaFactor = 2.2;
renderer.outputEncoding = THREE.sRGBEncoding;

How can I change color setting like the following code(written in pure three.js)?

const color = new Color(0x800080);
color.convertSRGBToLinear();

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

takerfume · 2021-09-07T07:45:29Z

takerfume
Sep 7, 2021
Author

Hi, I can solve this problem by following advice in discord server.
I wrote the solution in forum of threejs.
https://discourse.threejs.org/t/panorama-image-is-darker-than-original-image/29640/4

Thank you for your help.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

panorama image is darker than original image #1636

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

panorama image is darker than original image #1636

Uh oh!

Uh oh!

takerfume Sep 6, 2021

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

drcmda Sep 6, 2021 Maintainer

Uh oh!

Uh oh!

takerfume Sep 6, 2021 Author

Uh oh!

takerfume Sep 7, 2021 Author

takerfume
Sep 6, 2021

Replies: 2 comments 1 reply

drcmda
Sep 6, 2021
Maintainer

takerfume Sep 6, 2021
Author

takerfume
Sep 7, 2021
Author