question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CubeCamera washes out the colors

See original GitHub issue

go to the codepen from #18840 and paste following code in (sorry, dont have an account and cant save codepens):

import {
  AxesHelper,
  Color,
  CubeCamera,
  HemisphereLight,
  LinearEncoding,
  MeshStandardMaterial,
  Mesh,
  PerspectiveCamera,
  PMREMGenerator,
  sRGBEncoding,
  SphereGeometry,
  Scene,
  UnsignedByteType,
  WebGLRenderer
} from "https://cdn.jsdelivr.net/npm/three@0.114.0/build/three.module.js";

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/controls/OrbitControls.js";

import { RGBELoader } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/RGBELoader.js";

const envMapURL =
  "https://rawcdn.githack.com/mrdoob/three.js/3a7b71e0f47fb105e1ecd63b152f1c09fac6d015/examples/textures/equirectangular/royal_esplanade_1k.hdr";

async function init() {
  const renderer = new WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.outputEncoding = sRGBEncoding;

  document.body.appendChild(renderer.domElement);

  const pmremGenerator = new PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();

  const scene = new Scene();
  scene.background = new Color(0x4285f4);

  const camera = new PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(20, 20, 20);

  new OrbitControls(camera, renderer.domElement);

  const geometry = new SphereGeometry(5, 12, 8);

  const material = new MeshStandardMaterial({
    // create all colors this way
    // if you are trying to match CSS or photo colors
    color: new Color(0x4285f4).convertSRGBToLinear(),
    metalness: 1, roughness: 0
  });

  const mesh = new Mesh(geometry, material);

  const envMap = await loadEnvironment();

  const envMapPMREM = createPMREM(pmremGenerator, envMap);
  scene.background = envMapPMREM;
  scene.environment = envMapPMREM;

  const cubeCamera = new CubeCamera(1, 2, 512); 
  cubeCamera.update(renderer, scene);
  scene.background = cubeCamera.renderTarget;
  
  scene.add(mesh);
  scene.add(new AxesHelper(20));

  renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
  });

  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight);
  });
}

async function loadEnvironment() {
  const loader = new RGBELoader().setDataType(UnsignedByteType);

  return new Promise((resolve, reject) => {
    loader.load(envMapURL, data => resolve(data), null, reject);
  });
}

function createPMREM(pmremGenerator, texture) {
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  texture.dispose();
  pmremGenerator.dispose();

  return envMap;
}

init();

you will see this: Screen Shot 2020-03-21 at 18 50 18

expected result: Screen Shot 2020-03-21 at 18 49 18

(what you get by commenting scene.background = cubeCamera.renderTarget; out)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:36 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
WestLangleycommented, Mar 21, 2020
cubeCamera.update( renderer, scene );

cubeCamera.renderTarget.texture.encoding = sRGBEncoding;

scene.background = cubeCamera.renderTarget;
1reaction
bhoustoncommented, Apr 14, 2020

I would like to get rid of code-injection, TBH.

I think switching from code-injection to switch statements is fine, as long as there isn’t a significant speed impact.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Digital Camera - Why are my colors so washed out?
There could be a few reasons why colour is washed out – one being batteries low on power! usually Exposure can affect images...
Read more >
Gamma correction on transparent objects - three.js forum
There's no cube camera involved like in CubeCamera washes out the colors ... differently compared to the inline color space converison.
Read more >
Polaroid's $100 Cube Camera Is Cute, but No GoPro - Vox
The Cube comes in black, red or blue, and the body of the camera is shockproof and weatherproof. I used the camera while...
Read more >
Washed out color in ShaderMaterial - three.js - Stack Overflow
Culprit #1: using mapTexelToLinear , this is loaded based on Material.map property, since mine is a custom material and I don't use map ......
Read more >
Camera Cube | Peak Design Official Site
Ultra-protective yet easily accessible, Peak Design Camera Cubes take the pain and hassle out of traveling with photo, video, or drone gear.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found