# Rendering Style

**URL:** <https://discourse.threejs.org/t/rendering-style/12593>\
**Category:** Questions\
**Tags:** materials\
**Created:** [February 7, 2020, 11:17am UTC](https://discourse.threejs.org/t/rendering-style/12593 "2020-02-07T11:17:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![snick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/snick/32/9117_2.png) [@snick](https://discourse.threejs.org/u/snick)\
**Post date:** [February 7, 2020, 11:17am UTC](https://discourse.threejs.org/t/rendering-style/12593/1 "2020-02-07T11:17:54Z")

</div>

Hello everyone,  
I was wondering if you can help me figuring our how I can obtain this 2 rendering effects:

1- [Carttonish with outlines with stronger strokes](https://images.squarespace-cdn.com/content/v1/51819b9fe4b03000ce6f03ea/1513690243258-MCK423Z5A9LBM343Q9CH/ke17ZwdGBToddI8pDm48kOxLRGAfd8DHyn-VO-OS79h7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0s0XaMNjCqAzRibjnE_wBlnKv1yxoTk5msUVUpzS-jwidPkl-46T667XTMzLYTMBnw/Poshtel_%C2%A9EFFEKT_4.jpg?format=2500w)

and

2- [Semi photo realistic](https://images.squarespace-cdn.com/content/v1/51819b9fe4b03000ce6f03ea/1511524621321-9YHJJTOA3AHAL2324JFO/ke17ZwdGBToddI8pDm48kOxLRGAfd8DHyn-VO-OS79h7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0s0XaMNjCqAzRibjnE_wBlnKv1yxoTk5msUVUpzS-jwidPkl-46T667XTMzLYTMBnw/Poshtel_%C2%A9EFFEKT12.jpg?format=2500w)

( i see there is some gaussian noise on top, some good use of shadows to give depth.

Any advise?  
Thank you

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [February 7, 2020, 12:19pm UTC](https://discourse.threejs.org/t/rendering-style/12593/2 "2020-02-07T12:19:31Z")

</div>

What do you have?

There is a [example](https://threejs.org/examples/?q=outline#webgl_postprocessing_outline) for using outlines. For a toon shading effect, there would be [this](https://threejs.org/docs/#api/en/materials/MeshToonMaterial).

If you wanna do realistic renderings, its a bit more tricky. Threejs does not yet support path/ray tracing. Stuff as [Ambient Occlusion](https://threejs.org/examples/?q=sao#webgl_postprocessing_sao) or Global Illumination is only possible via fake shaders.  
If your objs do not move, you can bake lightmaps and ambientocclusionmaps (all kinds of maps) in for example blender.

---

<div class="post-metadata">

**Author:** ![snick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/snick/32/9117_2.png) [@snick](https://discourse.threejs.org/u/snick)\
**Post date:** [February 7, 2020, 12:33pm UTC](https://discourse.threejs.org/t/rendering-style/12593/3 "2020-02-07T12:33:49Z")

</div>

Perfect, that answer my questions!

On #1 with the two links I have what I need.

On #2. Do you think would be possible to reach the level of ‘realism’ of the picture I posted ? The ambient occlusion example that you linked seems to get close enough, and the realism of the picture I posted, is not of photographic quality (and I’m happy with that style). Unfortunately I need the composition to move.

---

<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:** [February 7, 2020, 2:22pm UTC](https://discourse.threejs.org/t/rendering-style/12593/4 "2020-02-07T14:22:44Z")

</div>

> [@Fluqz](#):
>
> There is a [example](https://threejs.org/examples/?q=outline#webgl_postprocessing_outline) for using outlines.

If you want to permantently render outlines in context of toon shading, it’s actually better to use `OutlineEffect` like in this example:

[https://threejs.org/examples/webgl\_materials\_variations\_toon](https://threejs.org/examples/webgl_materials_variations_toon)

The post-processing example is more intended to highlight objects in context of user interaction.

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [February 7, 2020, 2:26pm UTC](https://discourse.threejs.org/t/rendering-style/12593/5 "2020-02-07T14:26:03Z")

</div>

It strongly depends on how you set it up. Even though objs are moving, you can stil bake a fake shadowmap which will be static, but can give a nice look. [Like here](https://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html), I think the car has a shadowmap for the shadow directly below the car on the street.  
The main problems are the soft shadows thoughout the house model. They are very soft and nicely blended. Light sources in threejs will cast a rather hard shadow.

There are a lot of threads about getting realism done. [Here are some startings](https://stackoverflow.com/questions/19914697/ambient-occlusion-in-threejs)