Combining output of sobel edge detect with the final rendering

Problem Overview:
I am trying to show outlines on the object under mouse. I used the GPU Picking tutorial code and added sobel edge detection using the webgl_postprocessing_sobel example that comes with threejs.

Issue:
The edge detection works and I get the correct outlines upon where the mouse it as shown below.


i now want to overlay these on the final rendering but it is not working. I get my scene rendered without the outlines.

Current Approach:
I have two effectcomposers.

  1. for sobel edge detection on the pickingscene (the code is as per the threejs sobel edge example)
    ‘’‘composer = new EffectComposer( renderer );
    const renderPass = new RenderPass( pickingScene, camera );
    composer.addPass( renderPass );
    // color to grayscale conversion
    const effectGrayScale = new ShaderPass( LuminosityShader );
    composer.addPass( effectGrayScale );
    // Sobel operator
    effectSobel = new ShaderPass( SobelOperatorShader );
    effectSobel.uniforms[ ‘resolution’ ].value.x = window.innerWidth * window.devicePixelRatio;
    effectSobel.uniforms[ ‘resolution’ ].value.y = window.innerHeight * window.devicePixelRatio;
    composer.addPass( effectSobel );’’’

  2. finalcomposer to merge the final render scene with the edge detection output from 1. This is taking code frm the selctive unreal bloom example of threejs.
    ‘’‘const renderPass2 = new RenderPass( scene, camera );
    const finalPass = new ShaderPass(
    new THREE.ShaderMaterial( {
    uniforms: {
    baseTexture: { value: null },
    bloomTexture: { value: composer.renderTarget2.texture }
    },
    vertexShader: document.getElementById( ‘vertexshader’ ).textContent,
    fragmentShader: document.getElementById( ‘fragmentshader’ ).textContent,
    defines: {}
    } ), “baseTexture”
    );
    finalPass.needsSwap = true;
    finalcomposer = new EffectComposer( renderer );
    finalcomposer.addPass( renderPass2 );
    finalcomposer.addPass( finalPass );’’’

Any idea what could be wrong?

Regards,
MMMovania

OK I got it working. Two things that I did and it worked.

  1. I was not resizing the finalcomposer in the onWindowResize handler.
  2. I was not calling the composer.render function before the finalcomposer.render function.
    Doing the above two things worked and I get the correct output.
1 Like