HueSaturationShader test
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/VignetteShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/HueSaturationShader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body{
overflow: hidden;
margin: 0;
}
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(-7, 7, 7);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff );
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));
var obj = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshLambertMaterial({color: 0xff0505, wireframe: false}));
obj.position.z = 0.25;
scene.add(obj);
/** COMPOSER */
composer = new THREE.EffectComposer( renderer )
composer.setSize( window.innerWidth, window.innerHeight )
renderScene = new THREE.RenderPass( scene, camera )
composer.addPass( renderScene )
const effectVignette = new THREE.ShaderPass(THREE.VignetteShader )
effectVignette.uniforms[ "offset" ].value = 1;
effectVignette.uniforms[ "darkness" ].value = 2.3;
composer.addPass(effectVignette)
const hueSaturationShader = new THREE.ShaderPass(THREE.HueSaturationShader)
hueSaturationShader.uniforms['hue'].value = -0.5
hueSaturationShader.uniforms['saturation'].value = 1
composer.addPass(hueSaturationShader)
render();
function render(){
requestAnimationFrame(render);
//renderer.autoClear = false;
//renderer.clear();
composer.render();
//renderer.clearDepth();
//renderer.render(scene, camera);
}