Color Management Issue with Effect Composer
HTML
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/": "https://unpkg.com/three/",
"lil-gui": "./js/examples/jsm/libs/lil-gui.module.min.js"
}
}
</script>
JavaScript
import {
Scene,
PerspectiveCamera,
WebGLRenderer,
PlaneGeometry,
MeshBasicMaterial,
Mesh,
DoubleSide,
TextureLoader,
SRGBColorSpace
} from "three";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
let scene = null;
let camera = null;
let rtCamera = null;
let renderer = null;
let effectComposer = null;
let plane = null;
let rtPlane = null;
let panel = null;
scene = new Scene();
camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 50);
camera.position.z = 2;
rtCamera = new PerspectiveCamera(75, 1.6, 0.1, 50);
rtCamera.position.set(-1, 0, 0.65);
renderer = new WebGLRenderer({ antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
effectComposer = new EffectComposer(renderer);
effectComposer.addPass(new RenderPass(scene, rtCamera));
effectComposer.renderToScreen = false;
const panelGeometry = new PlaneGeometry(0.7, 1);
const planeGeometry = new PlaneGeometry(1.6, 1);
const planeMaterial = new MeshBasicMaterial({color: 0xffffff, side: DoubleSide});
const rtPlaneMaterial = new MeshBasicMaterial({color: 0xffffff, side: DoubleSide});
const panelMaterial = new MeshBasicMaterial({color: 0x000000, side: DoubleSide, transparent: true, opacity: 0.5});
plane = new Mesh(planeGeometry, planeMaterial);
rtPlane = new Mesh(planeGeometry, rtPlaneMaterial);
panel = new Mesh(panelGeometry, panelMaterial);
scene.add(plane, rtPlane, panel);
// The render target plane simply displays the output of the EffectComposer, which is rendering the left plane.
rtPlaneMaterial.map = effectComposer.readBuffer.texture;
new TextureLoader().load("https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg", texture => {
texture.colorSpace = SRGBColorSpace;
...