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.
-
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 );’’’ -
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
