# How to use outlinePass to a line object

**URL:** <https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767>\
**Category:** Questions\
**Tags:** outlinepass, outline, line, post-processing\
**Created:** [July 4, 2021, 7:18am UTC](https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767 "2021-07-04T07:18:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bighansen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bighansen/32/19240_2.png) [@bighansen](https://discourse.threejs.org/u/bighansen)\
**Post date:** [July 4, 2021, 7:18am UTC](https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767/1 "2021-07-04T07:18:45Z")

</div>

I can add the outline effect to a mesh object , but it not works on a line, why?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 4, 2021, 7:31am UTC](https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767/2 "2021-07-04T07:31:54Z")

</div>

`OutlinePass` does not support points and lines because its implementation is only compatible with triangles. Related GitHub issue:

> <https://github.com/mrdoob/three.js/issues/20428>
>
> \*\*Describe the bug\*\*
> 
> When having at least one object in the outline pass sele…ctedObjects array and a scene that also has a points object, the outline pass gets rendered in the middle of the points. This does not happen in desktop chrome in windows nor could I reproduce it in a new iPad or iPhone. It does happen in all of the Android Chromes that I have tested and also on an iMac (tested by @Mugen87 ).
> 
> \*\*To Reproduce\*\*
> 
> Steps to reproduce the behavior:
> 1. Create a simple object and add it to the scene
> 2. Create a points cloud and add it to the scene
> 3. Add effect composer, render pass, and outline pass
> 4. Add the simple object to the outline selectedObjects array
> 5. Make the particles move a little to make the bug appear more clearly
> 6. Render the scene with the composer
> 
> \*\*\*Live example\*\*\*
> 
> \* \[jsfiddle-latest-release\](https://jsfiddle.net/Norppa/04t6rjoh/3/show)
> 
> \*\*Expected behavior\*\*
> 
> I would expect the outline pass artefact not to show up on points on any of the platforms and browsers.
> 
> \*\*Screenshots\*\*
> 
> !\[a18aac64ab90c4cb82e709ba18a2d48a7d0e08d5\](https://user-images.githubusercontent.com/4513523/94448049-0e0c0100-01dd-11eb-8f57-0da68e43d382.png)
> 
> \*\*Platform:\*\*
> 
> - Device: mobile and desktop (iMac)
> - OS: Android (could not reproduce this on iOS)
> - Browser: Chrome (not Windows desktop)
> - Three.js version: r120 (latest at this point)

---

<div class="post-metadata">

**Author:** ![bighansen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bighansen/32/19240_2.png) [@bighansen](https://discourse.threejs.org/u/bighansen)\
**Post date:** [July 4, 2021, 7:40am UTC](https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767/3 "2021-07-04T07:40:53Z")

</div>

So if I want to add the selected status of lines, are there any alternative methods ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 4, 2021, 7:42am UTC](https://discourse.threejs.org/t/how-to-use-outlinepass-to-a-line-object/27767/4 "2021-07-04T07:42:16Z")

</div>

Have you considered to implement the highlight by using vertex colors?

You need to work with line segments though. If so, you can change the vertex colors of the specific start and end vertices of the selected line segment.