# How to create this smooth cartoon style with outlines in Three.js?

**URL:** <https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862>\
**Category:** Questions\
**Tags:** lights, shaders\
**Created:** [January 29, 2024, 11:49pm UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862 "2024-01-29T23:49:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CHOIX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/choix/32/294_2.png) [@CHOIX](https://discourse.threejs.org/u/CHOIX)\
**Post date:** [January 29, 2024, 11:49pm UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/1 "2024-01-29T23:49:53Z")

</div>

I am not talking about the masking/portal, but just the rendering style and colors, how to achieve this in threejs?

https://sketchfab.com/models/7b2ce68e765f4b53b569ff3da4b1d3a4/embed?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 30, 2024, 6:45am UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/2 "2024-01-30T06:45:07Z")

</div>

Something similar to this: [LDraw-like edges - #12 by gkjohnson](https://discourse.threejs.org/t/ldraw-like-edges/17100/12)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 30, 2024, 9:24pm UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/3 "2024-01-30T21:24:11Z")

</div>

Or try `OutlineEffect` 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/576932949ee084def36401cc160b0be20a1ae4f6.png)  
Demo: [https://codepen.io/prisoner849/pen/NWJywxL](https://codepen.io/prisoner849/pen/NWJywxL)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 30, 2024, 9:34pm UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/4 "2024-01-30T21:34:16Z")

</div>

`OutlineEffect` paired with `MeshToonMaterial` would be lush 👌😊

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [January 31, 2024, 3:12am UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/5 "2024-01-31T03:12:09Z")

</div>

Is this a bug in outline effect? I’m seeing that the outlines get really odd when the aspect ratio is stretched:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/76c1b6b00da97eb85473f3ef410c0db96d366e4d.png)

In cool, bunch of eyeballs kinda way, though.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 31, 2024, 6:38am UTC](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862/6 "2024-01-31T06:38:40Z")

</div>

Ha! True.  
My usual layout is this:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/a/aa27872e07fb724c6e6b63824aa72e28324b91f9.png)  
So I didn’t have that funny effect of eyeballs, making the demo.