Hello, this is my first question on this board and i am learning vanilla js vs three js at the same time, so i apologies for newbie questions.
I am trying to apply postprocessing selectively.
I have two scenes - cubes and shadow. I want to apply bloom postprocessing only on shadow scene and then on the top of everything apply film pass.
Unfortunately no errors in console and i only see white blank screen.
Would greatly appreciate if someone can point me to the right direction.
Here is my code:
0 - Blueprints body { margin: 0;height: 100vh;background-color: white; } canvas { display: block;} #c {background-color: white;} nav {position: absolute;right: 10%;top:10%;} nav a {font-size:25px;;display: block;text-decoration: none;color:black;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin:5% 0}</head>
<body>
<canvas id="c"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script src="js/EffectComposer.js"></script>
<script src="js/RenderPass.js"></script>
<script src="js/ShaderPass.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/ClearPass.js"></script>
<script src="js/MaskPass.js"></script>
<script type="module">
import {BloomPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/BloomPass.js';
import {FilmPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/FilmPass.js';
// variables
let scene, camera, renderer, canvas, mesh;
let init = function() {
// create the scene
let shadowscene = new THREE.Scene();
let cubescene = new THREE.Scene();
// create an locate the camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 8;
camera.position.y = 0;
camera.position.x = 1;
// responsive adjustments
window.addEventListener('resize', () =>{
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
// create the ground plane
let planeGeometry = new THREE.PlaneGeometry(60, 40, 120, 120);
let planeMaterial = new THREE.ShadowMaterial();
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 1;
plane.position.y = -3;
plane.position.z = -10;
shadowscene.add(plane);
//cubescene.add(plane);
// Geometry Globals
const boxWidth = 1.5;
const boxHeight = 1.5;
const boxDepth = 1.5;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
// Box
const material = new THREE.MeshPhongMaterial({color:0x44aa88});
const cube = new THREE.Mesh(geometry, material);
cubescene.add(cube);
cube.castShadow = false;
cube.position.x = -3;
cube.position.y = .2;
cube.position.z = 0;
// Box for casting shadow on the plane only
const materialTransparent = new THREE.MeshPhongMaterial({color:0x44aa88, opacity: 0.001}); // material opacity set to low, so we see only shadow on the plane
const cubeShadowOnly = new THREE.Mesh(geometry, materialTransparent);
shadowscene.add(cubeShadowOnly);
cubeShadowOnly.castShadow = true;
cubeShadowOnly.position.x = -3;
cubeShadowOnly.position.y = .2;
cubeShadowOnly.position.z = 0;
// light parameters
const color = 0xFFFFFF;
const intensity = 1;
// light Shadows Only
const light = new THREE.DirectionalLight(color, intensity);
light.castShadow = true;
light.position.set(0, 10, 0);
light.target.position.set(-4, 0, -4);
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 20;
light.shadow.camera.left = -100;
light.shadow.camera.bottom = -100;
light.shadow.camera.right = 100;
light.shadow.camera.top = 100;
light.shadow.camera.zoom = 1;
shadowscene.add(light);
shadowscene.add(light.target);
// light Geometry Only
const lightGeometryOnly = new THREE.DirectionalLight(color, intensity);
lightGeometryOnly.castShadow = false;
lightGeometryOnly.position.set(0, 10, 0);
lightGeometryOnly.target.position.set(-4, 0, -4);
lightGeometryOnly.shadow.camera.near = 0.5;
lightGeometryOnly.shadow.camera.far = 20;
lightGeometryOnly.shadow.camera.left = -100;
lightGeometryOnly.shadow.camera.bottom = -100;
lightGeometryOnly.shadow.camera.right = 100;
lightGeometryOnly.shadow.camera.top = 100;
lightGeometryOnly.shadow.camera.zoom = 1;
cubescene.add(lightGeometryOnly);
cubescene.add(lightGeometryOnly.target);
// create the renderer
canvas = document.querySelector('#c');
renderer = new THREE.WebGLRenderer({canvas,antialias:true, alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// setup passes. First the main renderpasses. Note that
// only the bgRenderpass clears the screen.
var shadowscenePass = new THREE.RenderPass(shadowscene, camera);
shadowscenePass.clear = false;
var cubescenePass = new THREE.RenderPass(cubescene, camera);
cubescenePass.clear = false;
// setup the mask
var clearMask = new THREE.ClearMaskPass();
var shadowsceneMask = new THREE.MaskPass(shadowscene, camera);
var cubesceneMask = new THREE.MaskPass(cubescene, camera);
// setup some effects to apply
let bloomPass = new BloomPass(
1, // strength
25, // kernel size
4, // sigma ?
256, // blur render target resolution
);
let filmPass = new FilmPass(
0.35, // noise intensity
0.025, // scanline intensity
648, // scanline count
false, // grayscale
);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;
composer.addPass(cubescenePass);
composer.addPass(cubesceneMask);
composer.addPass(filmPass);
composer.addPass(clearMask);
composer.addPass(shadowscenePass);
composer.addPass(shadowsceneMask);
composer.addPass(bloomPass);
composer.addPass(clearMask);
composer.addPass(effectCopy);
function render(time) {
cube.rotation.x += 0.01;
cubeShadowOnly.rotation.x += 0.01;
requestAnimationFrame(render);
};
requestAnimationFrame(render);
}
///////////////////////////////////////////////
init();
</script>