I'm a beginner in three.js and I am facing challenges in achieving a specific effect: rendering 2 scenes and blending them with a shader. The first TexturePass is working fine, but the second one is flickering like a strobe light. You can see the result here.
Below is the code snippet:
THREE.Custom = THREE.Custom || {};
// Shader code obtained from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/js/shaders/AdditiveBlendShader.js
THREE.Custom.AdditiveShader = {
uniforms: {
tDiffuse: { type: "t", value: null },
tAdd: { type: "t", value: null },
fCoeff: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform sampler2D tDiffuse;",
"uniform sampler2D tAdd;",
"uniform float fCoeff;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"vec4 add = texture2D( tAdd, vUv );",
"gl_FragColor = texel + add * fCoeff, 1.0;",
"}"
].join("\n")
};
var TestBlending = (function (){
var canvasWidth, canvasHeight, canvasRatio;
var clock = new THREE.Clock();
var container, camera, scene1, scene2, renderer;
var stats, statsDisplay = true;
var box1, box2;
var composerFinal, composerScene1, composerScene2, composerBlending, renderTarget;
var composerDebugScene1, composerDebugScene2;
var delta;
function createScene1 () {
scene1 = new THREE.Scene();
scene1.name = "scene1";
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 10, 20 );
light.name = "light1";
scene1.add(light);
var material = new THREE.MeshPhongMaterial( { color: 0xcc00cc } );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
box1 = new THREE.Mesh( geometry, material );
scene1.add( box1 );
}
function createScene2 () {
scene2 = new THREE.Scene();
scene2.name = "scene2";
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 10, 20 );
light.name = "light2";
scene2.add(light);
var material = new THREE.MeshPhongMaterial( { color: 0x33cc33 } );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
box2 = new THREE.Mesh( geometry, material );
scene...
If you're able to provide any assistance with this issue, it would be greatly appreciated. Thank you.