Chapter Eleven of my Learning Three.js book showcases a fascinating noise animation created by the author using
var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);In the code example from the book, it is interesting to note that removing the orbit animation does not affect the noise effect in any way. This indicates that the noise animation is not dependent on textures or other elements.
I am intrigued by how this noise effect was achieved solely through the use of THREE.FilmPass().
When attempting to replicate the effect in my own experiment, I encountered difficulties as I only managed to get the standard scan line effect without any noise. The differences in my approach include utilizing 2D geometry instead of 3D, omitting the use of two cameras and directional lights, not applying THREE.CopyShader for geometry reuse, and avoiding orbiting altogether.
function init() {
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var coupleTexture = THREE.ImageUtils.loadTexture('./sina1.jpg');
var planeGeometry = new THREE.PlaneGeometry(1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({map: coupleTexture,
depthTest: false });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.scale.set(1000, 1000, 1, 1);
scene.add(plane);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
var renderPass = new THREE.RenderPass(scene, camera);
var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
effectFilm.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectFilm);
render();
function render() {
stats.update();
requestAnimationFrame(render);
composer.render(scene, camera);
}