CubeCamera washes out the colors

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)

1 possible answer(s) on “CubeCamera washes out the colors

  1. cubeCamera.update( renderer, scene );
    
    cubeCamera.renderTarget.texture.encoding = sRGBEncoding;
    
    scene.background = cubeCamera.renderTarget;