Is it possible to match the colors perfectly?

Questions
,
1 
import { Canvas } from "@react-three/fiber";
import * as THREE from "three";
import { OrbitControls, Grid } from "@react-three/drei";

// r150
THREE.ColorManagement.enabled = true;

// r139-r149
THREE.ColorManagement.legacyMode = false;

function App() {
  const color = new THREE.Color(0x0000ff);

  return (
    <div className="App" style={{ width: "100vw", height: "100vh" }}>
      <Canvas
        camera={{
          fov: 25,
          near: 0.1,
          far: 100,
          position: [10, 12, 12],
        }}
        onCreated={({ gl }) => {
          gl.outputEncoding = THREE.sRGBEncoding;
        }}
      >
        <OrbitControls />
        <Grid cellColor="gray" sectionColor="gray" args={[10, 10]} />
        <mesh>
          <sphereGeometry args={[0.1, 32, 32]} />
          <meshBasicMaterial color={color} fog={false} />
        </mesh>
      </Canvas>
    </div>
  );
}

export default App;

Even if I describe it as above, the Color Eyedropper tool gives me #0F00DC. Is this a limitation? If anyone has a technique for matching colors, please advise! Thanks in advance. :grin:

1 Like
2 
// r150
THREE.ColorManagement.enabled = true;

// r139-r149
THREE.ColorManagement.legacyMode = false;

      <Canvas
        onCreated={({ gl }) => {
          gl.outputEncoding = THREE.sRGBEncoding;

all these are handled by canvas automatically, all you need is:

<Canvas>

what you want is

<meshBasicMaterial color={color} fog={false} toneMapped={false} />

and don’t get me wrong, tone mapping is extremely important. but on meshes that need to show a color as accurately as possible you want it off. but keep in mind that color isn’t an objective thing, color depends on light, the environment etc. without tonemapping you will get overblown hot spots, pitch black shadows, banding, …

1 Like
3

Thanks to you, the colors now match! I had to turn off tone mapping!
In the case of this sample, what I specified as [0000ff] only for blue is a little off [000DFF], is this unavoidable?

スクリーンショット 2023-04-03 23.27.13
スクリーンショット 2023-04-03 23.27.131920×1080 150 KB

4

i think so yes, it’s not 100% accurate. im sorry i have to ping @donmccurdy again but he’s the only one that can explain why. meanwhile you can read this: three.js docs

5

If you put one of these lines…

// r150
THREE.ColorManagement.enabled = true;

// r139-r149
THREE.ColorManagement.legacyMode = false;

… above your color declarations in the App.jsx file shown, does that fix the issue? (in addition to keeping tone mapping disabled)

6

ohhh, that again. didn’t catch that there were global colors. :sweat_smile:

7

You had to set both the color management settings and the tone mapping! Finally the colors matched! Thank you!

8

Thank you very much for your reply! Beginners stumble in the strangest places… Thank you for your help!

9

btw the reason why is that you have globally defined colors. if you moved these into a <Scene> component that renders within the canvas it wouldn’t be necessary. but since new THREE.Color(…) executes before fiber (which sets the encoding up as well as the color management), these colors aren’t managed. i hope this will be fixed in three soon enough though. :slight_smile:

10

Hello, @drcmda.
Nice to meet you.
Sorry for asking another question.
Do you remember replying the question “How to convert the format .step and .stp in gltf.” in July 2001?

I saw your reply a few days ago.
What interests me most in the answer is the image.
There was a website program that loaded and displayed a .stp file.
Do you know about that program?
Do you have it?
I would like to purchase the program and would like your help.
I will wait for your reply.
You may also send me an email.
luckyinspiration0129@gmail.com

11

Hello. Cool man, @drcmda
How are you?
I really need the program. Sorry but please help me.
Please.