# Outlinepass is showing nothing

**URL:** <https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [April 6, 2021, 1:54pm UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100 "2021-04-06T13:54:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anurag](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anurag](https://discourse.threejs.org/u/anurag)\
**Post date:** [April 6, 2021, 1:54pm UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100/1 "2021-04-06T13:54:55Z")

</div>

I have added post-processing in gltf model on mouse over but it is not showing anything-  
Code-

import { Component, Input ,Output, EventEmitter, OnInit} from ‘@angular/core’;  
import \* as THREE from ‘three’;  
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;  
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;  
import { RGBELoader } from ‘three/examples/jsm/loaders/RGBELoader.js’;  
import Stats from ‘three/examples/jsm/libs/stats.module’;  
import { TWEEN } from ‘three/examples/jsm/libs/tween.module.min’;  
import { RoughnessMipmapper } from ‘three/examples/jsm/utils/RoughnessMipmapper.js’;  
import { CSS2DRenderer, CSS2DObject } from ‘three/examples/jsm/renderers/CSS2DRenderer.js’;//(to be used later);  
import { EffectComposer } from ‘three/examples/jsm/postprocessing/EffectComposer.js’;  
import { RenderPass } from ‘three/examples/jsm/postprocessing/RenderPass.js’;  
import { ShaderPass } from ‘three/examples/jsm/postprocessing/ShaderPass.js’;  
import { FXAAShader } from ‘three/examples/jsm/shaders/FXAAShader.js’;  
import { OutlinePass } from ‘three/examples/jsm/postprocessing/OutlinePass.js’ //(to be used later);  
import { GUI } from ‘three/examples/jsm/libs/dat.gui.module.js’;

@Component({  
selector: ‘espo-app’,  
templateUrl:’./expoview.component.html’,  
styleUrls: [’./expoview.component.css’]  
})

export class ExpoViewComponent implements OnInit {  
name = ‘Expoview’;  
private scene;  
private rgbLoader;  
private controls;  
private annotations;  
private raycaster;  
private sceneMeshes;  
private stats;  
private labelRenderer;  
private mixer;  
private model;  
private ignorObj;  
private camera;  
private renderer;  
private teen;  
private clock;  
private container;  
private composer ;  
private outlinePass;  
private selectedObjects;  
private envMap;  
private texture;  
private pmremGenerator;  
public annotationMarkers: THREE.Sprite[] = []; // (to be used later)  
private progressBar;

```
constructor() {
 this.annotations; 
 this.sceneMeshes;
 this.stats;
 this.labelRenderer;
 this.rgbLoader;
 this.mixer;
 this.model;
 this.container;
 this.texture;
 this.envMap;
 this.pmremGenerator;
 this.progressBar;
 this.ignorObj = ['Material #2']; // (to be used later)
 this.scene = new THREE.Scene();
 this.scene.background = null ;//'0xffffff';
 this.selectedObjects = [];  
 this.raycaster = new THREE.Raycaster();
 this.teen = new TWEEN.Tween();
 this.clock = new THREE.Clock(); 
 this.camera = new THREE.PerspectiveCamera(20,window.innerWidth / window.innerHeight,0.1,1000);    
 this.renderer = new THREE.WebGLRenderer({
  antialias: true //alpha: true 
     });
  this.controls = new OrbitControls( this.camera, this.renderer.domElement );   
  this.composer = new EffectComposer( this.renderer );
  this.outlinePass;// = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera );
      
}

async ngOnInit() {
    this.container = document.createElement( 'div' );
    document.getElementById("espo-app").appendChild( this.container ); 
    this.progressBar = document.getElementById('progressBar') as HTMLProgressElement;
     //get environment
     this.rgbLoader = new RGBELoader();
     this.rgbLoader.setPath( 'assets/model/');       
     this.texture = await new Promise(resolve => this.rgbLoader.load('environment.hdr', texture => resolve(texture)));
     this.loadHdr();           
    //get textures
    const loader = new GLTFLoader().setPath( 'assets/model/' );
    this.model = await new Promise(resolve => loader.load('ex_i-manual.gltf', gltf => resolve(gltf)));
    this.loadTexture();

```

}

//set textures  
loadTexture = async() =\> {  
console.log(“model”, this.model);  
// loading textures  
await this.loadTexturesModel(this.model.scene, this.envMap).then((model)=\>{  
this.scene.add( model )  
this.init();  
});

}

// set environment  
loadHdr = async ()=\> {  
console.log(“run”)  
this.scene = new THREE.Scene();  
this.camera.position.set( 5, 0, -300 );

```
this.camera.lookAt(0,0,0)

// Lights
let ambientLight = new THREE.AmbientLight( 0xffffff,10);
this.scene.add( ambientLight ); 

this.pmremGenerator = new THREE.PMREMGenerator( this.renderer );
this.pmremGenerator.compileEquirectangularShader();      
this.envMap = this.pmremGenerator.fromEquirectangular( this.texture ).texture;
this.scene.background = this.envMap;
      this.scene.environment = this.envMap;
      this.texture.dispose();
      this.pmremGenerator.dispose();                      
      this.envMap = this.envMap;  

```

}

initComposer = async () =\> {  
this.composer = new EffectComposer(this.renderer);

```
var renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);

// the error emits from this below line
this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
this.outlinePass.edgeStrength = 6;
this.outlinePass.edgeGlow = 1;
this.outlinePass.edgeThickness = 4;
this.outlinePass.pulsePeriod = 2;
this.outlinePass.visibleEdgeColor = 0xffff00;
this.outlinePass.hiddenEdgeColor = 0xffffff;
this.composer.addPass(this.outlinePass);

```

let FXAA = new ShaderPass(new FXAAShader);  
FXAA.uniforms[‘resolution’].value.set(1 / window.innerWidth, 1 / window.innerHeight);  
FXAA.renderToScreen = true;  
this.composer.addPass(FXAA);  
}

```
init = async ()=> {                                                           
                this.initComposer();                                                                                             
                this.renderer.setPixelRatio( window.devicePixelRatio );
                this.renderer.setSize( window.innerWidth, window.innerHeight );
                this.container.appendChild( this.renderer.domElement );
 
          

                this.controls = new OrbitControls( this.camera, this.renderer.domElement );
                //currentRef.controls.addEventListener( 'change', currentRef.render ); // use if there is no animation loop
                
                this.controls.minDistance = 2;
                this.controls.maxDistance = 10;
                this.controls.target.set( 0, 0, - 0.2 );
                this.controls.update();

 window.addEventListener( 'resize', this.onWindowResize.bind(Event, this.model), false)
 window.addEventListener('dblclick', this.onDoubleClick, false);
 window.addEventListener('click', this.onClick.bind(Event, this.model), false);
 window.addEventListener('pointermove', this.onMouseMove.bind(Event), false);

 const stats = Stats()
 document.body.appendChild(stats.dom);
 this.progressBar.style.display = "none";    
 this.render();

```

}

onWindowResize = (model:any , event: MouseEvent) =\>{  
this.camera.aspect = window.innerWidth / window.innerHeight;  
this.camera.updateProjectionMatrix();  
this.renderer.setSize( window.innerWidth, window.innerHeight );  
this.render();  
}

onDoubleClick = (event: MouseEvent) =\> {  
this.raycaster = new THREE.Raycaster();  
this.raycaster.setFromCamera({  
x: (event.clientX / this.renderer.domElement.clientWidth) \* 2 - 1,  
y: -(event.clientY / this.renderer.domElement.clientHeight) \* 2 + 1  
}, this.camera);

```
  const intersects = this.raycaster.intersectObjects(this.sceneMeshes, true); 
  if (intersects.length > 0) {  
      const p = intersects[0].point  
      this.teen = new TWEEN.Tween(this.controls.target);
      this.teen.to({
              x: p.x,
              y: p.y,
              z: p.z
           }, 500)
          .easing(TWEEN.Easing.Cubic.Out)
          .start()
  }

```

}

onMouseMove = (event: MouseEvent) =\> {  
this.raycaster.setFromCamera({  
x: (event.clientX / this.renderer.domElement.clientWidth) \* 2 - 1,  
y: -(event.clientY / this.renderer.domElement.clientHeight) \* 2 + 1  
}, this.camera);

const intersects = this.raycaster.intersectObjects(this.model.scene.children, true);  
if (intersects.length \> 0) {  
let clips = this.model.animations;  
clips.forEach((clip) =\> {

```
   if (clip.name == intersects[0].object.name){
     let groupName = intersects[0].object.userData.gltfExtensions.S8S_v3d_node_data.groupNames[0];             
      intersects.forEach((intersect) => {   
        if (typeof intersect.object.userData.gltfExtensions !== 'undefined' 
        && typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data !== 'undefined'
        && typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames !== 'undefined'){
          if (intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames.includes(groupName)){
         
         //outlinepass                 
         this.outlinePass.selectedObjects = [intersect.object];           
        //outlinepass                
        this.render();

           } 
        }                   
      }) 
   }
 })        

```

}

}  
onClick = ( model:any , event: MouseEvent) =\> {

this.raycaster = new THREE.Raycaster();  
this.raycaster.setFromCamera({  
x: (event.clientX / this.renderer.domElement.clientWidth) \* 2 - 1,  
y: -(event.clientY / this.renderer.domElement.clientHeight) \* 2 + 1  
}, this.camera);

const intersects = this.raycaster.intersectObjects(model.scene.children, true);

if (intersects.length \> 0) {  
let clips = model.animations;  
clips.forEach((clip) =\> {  
if (clip.name == intersects[0].object.name){  
this.mixer = new THREE.AnimationMixer(model.scene);  
this.mixer.clipAction(clip).play();

```
   }
 })        

```

}  
// this.animate();  
this.render();  
}

animate = () =\> {  
requestAnimationFrame(this.animate)

```
if(this.mixer){
    this.mixer.update(this.clock.getDelta());
}
this.controls.update();

this.render() 

```

};

csvJSON(csv) {  
const lines = csv.split(’\n’)  
const result = []  
const headers = lines[0].split(’;’)  
for (let i = 1; i \< lines.length; i++) {  
if (!lines[i])  
continue  
const obj = {}  
const currentline = lines[i].split(’;’)  
for (let j = 0; j \< headers.length; j++) {  
obj[headers[j]] = currentline[j]  
}  
result.push(obj)  
}  
return result  
}

loadTexturesModel = async (model:any, envMap:any) =\> {  
const manager = new THREE.LoadingManager();  
var roughnessMipmapper = new RoughnessMipmapper( this.renderer);  
const textureLoader = new THREE.TextureLoader(manager);

```
   model.traverse( ( o ) => {   
  
    if ( o.isMesh ) {   
      if (o.material.userData.gltfExtensions.S8S_v3d_material_data.nodeGraph.nodes.length > 2){                    
          let textName = o.material.userData.gltfExtensions.S8S_v3d_material_data.nodeGraph.nodes[2].name;                            
          if(textName !== 'Material #2'){ 
          o.material = new THREE.MeshStandardMaterial({map: textureLoader.load(`assets/model/${textName}.png`)});
          roughnessMipmapper.generateMipmaps(o.material);              
          o.material.smoothShading = true;
      // o.material.envMap = envMap;
          o.material.roughness = 1;
          o.material.metalness = 1;
      }
    }else {
        o.material.roughness = 0;                               
    } 
   
  }

```

})

return model;  
}

render = () =\> {  
this.controls.update()  
this.composer.render();  
this.renderer.render(this.scene, this.camera);  
}

}

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 7, 2021, 12:26am UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100/2 "2021-04-07T00:26:43Z")

</div>

It’s obviously because of that missing semicolon you’ve got in that line up there. 🙃

(And on a more serious note - it’s not really possible to help, you just pasted 400+ lines of unformatted code, without context / explanation / live preview. To get outlinePass to work you usually only need [to add it to the composer](https://github.com/mrdoob/three.js/blob/e48fc94dfeaecfcbfa977ba67549e6108b370cbf/examples/webgl_postprocessing_outline.html#L247).)

---

<div class="post-metadata">

**Author:** ![anurag](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anurag](https://discourse.threejs.org/u/anurag)\
**Post date:** [April 7, 2021, 4:39am UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100/3 "2021-04-07T04:39:04Z")

</div>

Yes i know that it’s hard to debug the whole code but i am not able to make it live now but there is piece of code that can help for post-processing.  
It’s a initComposer function that call in init function-\>

initComposer = async () =\> {  
this.composer = new EffectComposer(this.renderer);

```javascript
var renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);

// the error emits from this below line
this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
this.outlinePass.edgeStrength = 6;
this.outlinePass.edgeGlow = 1;
this.outlinePass.edgeThickness = 4;
this.outlinePass.pulsePeriod = 2;
this.outlinePass.visibleEdgeColor = 0xffff00;
this.outlinePass.hiddenEdgeColor = 0xffffff;
this.composer.addPass(this.outlinePass);

```

let FXAA = new ShaderPass(new FXAAShader);  
FXAA.uniforms[‘resolution’].value.set(1 / window.innerWidth, 1 / window.innerHeight);  
FXAA.renderToScreen = true;  
this.composer.addPass(FXAA);  
}

and selected object provided in mouse over function-\>  
onMouseMove = (event: MouseEvent) =\> {  
this.raycaster.setFromCamera({  
x: (event.clientX / this.renderer.domElement.clientWidth) \* 2 - 1,  
y: -(event.clientY / this.renderer.domElement.clientHeight) \* 2 + 1  
}, this.camera);

const intersects = this.raycaster.intersectObjects(this.model.scene.children, true);  
if (intersects.length \> 0) {  
let clips = this.model.animations;  
clips.forEach((clip) =\> {

```javascript
   if (clip.name == intersects[0].object.name){
     let groupName = intersects[0].object.userData.gltfExtensions.S8S_v3d_node_data.groupNames[0];             
      intersects.forEach((intersect) => {   
        if (typeof intersect.object.userData.gltfExtensions !== 'undefined' 
        && typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data !== 'undefined'
        && typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames !== 'undefined'){
          if (intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames.includes(groupName)){
         
         //outlinepass                 
         this.outlinePass.selectedObjects = [intersect.object];           
        //outlinepass                
        this.render();

           } 
        }                   
      }) 
   }
 })      

I just try to show outline effect on mouse over of clickable area that is in same group of objects.

that is my composer render function->
render = () => {
this.controls.update()
this.composer.render();
this.renderer.render(this.scene, this.camera);
}

}
```

---

<div class="post-metadata">

**Author:** ![anurag](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anurag](https://discourse.threejs.org/u/anurag)\
**Post date:** [April 7, 2021, 4:44am UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100/4 "2021-04-07T04:44:35Z")

</div>

Also i am loading gltf model with hdr environment all are working fine but when i mouse over the clickable area it blur all model for some time and doesn’t show the outline effects.

Before Mouse over-\>

 ![Annotate-a-local-image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ff7d746c48ddc48c442a073b523ca3e40597e75b.png)

after mouse over or post processing-\>

 ![Annotate-a-local-image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/30a2945525f0940add2e98e9f8f462f6930a4130.png)

---

<div class="post-metadata">

**Author:** ![anurag](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anurag](https://discourse.threejs.org/u/anurag)\
**Post date:** [April 21, 2021, 6:10am UTC](https://discourse.threejs.org/t/outlinepass-is-showing-nothing/25100/5 "2021-04-21T06:10:53Z")

</div>

Done by adding these lines before composer render-  
this.camera.aspect = this.container.clientWidth / this.container.clientHeight;  
this.camera.updateProjectionMatrix();