CubeCamera washes out the colors
See original GitHub issuego 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:
expected result:
(what you get by commenting scene.background = cubeCamera.renderTarget;
out)
Issue Analytics
- State:
- Created 4 years ago
- Comments:36 (12 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think switching from code-injection to switch statements is fine, as long as there isn’t a significant speed impact.