Stumbling upon an impressive code snippet by Andrew Berg, I discovered a method to create volumetric lights inside threejs. The mesmerizing effect can be witnessed here: https://codepen.io/abberg/pen/pbWkjg?editors=0010. This technique involves post-processing and shaders to produce a captivating ball of light.
An intriguing query arises - how can one modify the existing code to simultaneously render a static image in the background while utilizing the composer renderer to generate the volumetric light? Presently, it seems that either task can be accomplished individually but not both concurrently.
By eliminating the render(); call within the animate function and uncommenting the lines
//renderer.render(backgroundScene,backgroundCamera);
//renderer.render(scene,camera);The result displays the static background image successfully, yet the vital post-processing effects responsible for the Volumetric Light are omitted. Conversely, retaining the render(); function and leaving those same lines commented out allows the view of post processing effects along with the light ball shader.
main.js
var scene, camera, renderer,
testcube, composer;
var backgroundMesh, backgroundScene, backgroundCamera,
backgroundComposer;
var occlusionComposer, occlusionRenderTarget,
occlusionBox, lightSphere, sphereUniforms;
var OCCLUSION_LAYER, DEFAULT_LAYER;
var incr;
function init(){
// Your custom initialization function
}
// Other functions and code snippets follow
shader.js
THREE.VolumetericLightShader = {
// Shader details go here
};
THREE.AdditiveBlendingShader = {
// Additive blending shader definitions
};
THREE.PassThroughShader = {
// Pass-through shader details
};