# How to be closest as possible to that render shadow diffuse (animated)?

**URL:** <https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923>\
**Category:** Questions\
**Tags:** shadows, textures, geometry, shaders\
**Created:** [December 25, 2020, 12:30am UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923 "2020-12-25T00:30:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bramich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bramich/32/14954_2.png) [@bramich](https://discourse.threejs.org/u/bramich)\
**Post date:** [December 25, 2020, 12:30am UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/1 "2020-12-25T00:30:12Z")

</div>

Hello guys,

Need your advice, how can i do to be closest as possible to that render ?

This 3D dino mesh in the screen is a GLTF imported which is animated with a clip.

Is AO post processing needed ? Any idea or link shared are welcomed, thanks again guys you rock !

 ![Capture d’écran 2020-12-25 à 01.28.00](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/02e8d29190c7a1ae1e8ec237322135f5fcd74c98.jpeg)

---

<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:** [December 25, 2020, 1:01am UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/2 "2020-12-25T01:01:56Z")

</div>

Contact shadows: [https://threejs.org/examples/?q=contact#webgl\_shadow\_contact](https://threejs.org/examples/?q=contact#webgl_shadow_contact)  
Ambient Occlusion: [https://threejs.org/examples/?q=ao#webgl\_postprocessing\_sao](https://threejs.org/examples/?q=ao#webgl_postprocessing_sao)  
Noise: [https://threejs.org/examples/?q=postprocess#webgl\_postprocessing\_advanced](https://threejs.org/examples/?q=postprocess#webgl_postprocessing_advanced)

These combined should do the trick (in this specific scene at least.)

---

<div class="post-metadata">

**Author:** ![bramich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bramich/32/14954_2.png) [@bramich](https://discourse.threejs.org/u/bramich)\
**Post date:** [December 25, 2020, 1:18am UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/3 "2020-12-25T01:18:38Z")

</div>

Oh ! Didnt know about the Shadow Contact, looks so cool thanks a lot @mjurczyk !!

But for the noise maybe could be an issue, cause if you look at the sceen, the noise is only present in shadows

---

<div class="post-metadata">

**Author:** ![bramich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bramich/32/14954_2.png) [@bramich](https://discourse.threejs.org/u/bramich)\
**Post date:** [December 25, 2020, 1:01pm UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/4 "2020-12-25T13:01:03Z")

</div>

Can’t implement the renderer target of a glb that contain more than 1 mesh on it, do you have any sandbox with a gltf that got more than 1 mesh on it, and uses shadow contact (renderer target blurs) ??

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 25, 2020, 4:08pm UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/5 "2020-12-25T16:08:15Z")

</div>

I don’t think you can do it like that with contact shadows. pc soft shadows on the other hand, yes: [https://codesandbox.io/embed/r3f-soft-shadows-dh2jc](https://codesandbox.io/embed/r3f-soft-shadows-dh2jc) you can use the global function in this box in plain three, no react needed. They’re hard to place and get right but once you have it they look nice. Kind of on the expensive side though.

---

<div class="post-metadata">

**Author:** ![bramich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bramich/32/14954_2.png) [@bramich](https://discourse.threejs.org/u/bramich)\
**Post date:** [December 25, 2020, 4:35pm UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/6 "2020-12-25T16:35:23Z")

</div>

Hello @drcmda thanks for answering me !

You mean by using [https://github.com/pmndrs/drei/blob/08539605247e5f64aa3cfbefb0ce4767e49825a2/src/softShadows.tsx](https://github.com/pmndrs/drei/blob/08539605247e5f64aa3cfbefb0ce4767e49825a2/src/softShadows.tsx) into js and use it as global func right ?

---

<div class="post-metadata">

**Author:** ![bramich](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bramich/32/14954_2.png) [@bramich](https://discourse.threejs.org/u/bramich)\
**Post date:** [December 25, 2020, 4:48pm UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/7 "2020-12-25T16:48:14Z")

</div>

Ok it is working, need to adjust parameters now thanks a lot @drcmda

I create the canvas on click on image that open a modal (where is insert the canvas ), but using the PCSS with shaders create errors when i close and open again that modal due to ‘redefinition’, do you have any fixe against that ? or anyone … Thanks 🙏

 ![Capture d’écran 2020-12-25 à 17.46.00](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/40dd901da875f19b3d7a10bae0cce92d606846e6.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 25, 2020, 4:59pm UTC](https://discourse.threejs.org/t/how-to-be-closest-as-possible-to-that-render-shadow-diffuse-animated/21923/8 "2020-12-25T16:59:29Z")

</div>

no idea, this code is straight from [https://threejs.org/examples/?q=soft#webgl\_shadowmap\_pcss](https://threejs.org/examples/?q=soft#webgl_shadowmap_pcss)