JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/GammaCorrectionShader.js"></script>
<div id="d0"></div>
JavaScript
$(function() {
let useComposer = true;
// EffectComposer copied from https://threejs.org/examples/js/postprocessing/EffectComposer.js
// with one line added in the parameters defined in the constructor
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.EffectComposer = function(renderer, renderTarget) {
this.renderer = renderer;
if (renderTarget === undefined) {
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false,
type: THREE.FloatType // line not present in original code
};
var size = renderer.getSize(new THREE.Vector2());
this._pixelRatio = renderer.getPixelRatio();
this._width = size.width;
this._height = size.height;
renderTarget = new THREE.WebGLRenderTarget(this._width * this._pixelRatio, this._height * this._pixelRatio, parameters);
renderTarget.texture.name = 'EffectComposer.rt1';
} else {
this._pixelRatio = 1;
this._width = renderTarget.width;
this._height = renderTarget.height;
}
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.renderTarget2.texture.name = 'EffectComposer.rt2';
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.renderToScreen = true;
this.passes = [];
// dependencies
if (THREE.CopyShader === undefined) {
console.error('THREE.EffectComposer relies on THREE.CopyShader');
}
if (THREE.ShaderPass === undefined) {
console.error('THREE.EffectComposer relies on THREE.ShaderPass');
}
this.copyPass = new THREE.ShaderPass(THREE.CopyShader);
this.clock = new THREE.Clock();
// for VR
var rendererSize = new THREE.Vector2();
var scope = this;
function onSessionStateChange() {
renderer.getDrawingBufferSize(rendererSize);
...