# Can't make horizontal and vertical blur render together

**URL:** <https://discourse.threejs.org/t/cant-make-horizontal-and-vertical-blur-render-together/46008>\
**Category:** Questions\
**Tags:** render-target\
**Created:** [December 20, 2022, 10:16am UTC](https://discourse.threejs.org/t/cant-make-horizontal-and-vertical-blur-render-together/46008 "2022-12-20T10:16:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kovacsv](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kovacsv/32/31917_2.png) [@kovacsv](https://discourse.threejs.org/u/kovacsv)\
**Post date:** [December 20, 2022, 10:16am UTC](https://discourse.threejs.org/t/cant-make-horizontal-and-vertical-blur-render-together/46008/1 "2022-12-20T10:16:23Z")

</div>

I’m trying to implement contact shadows based on [this example](https://threejs.org/examples/webgl_shadow_contact.html). I managed to create a render target (`shadowRenderTarget`) where the base of the contact shadow appears. Now I’d like to blur it like in the example. I have another render target (`blurRenderTarget`) to achieve this.

When I do the horizontal blur it seems working:

```plaintext
blurPlaneMesh.material = horizontalBlurMaterial;
blurPlaneMesh.material.uniforms.tDiffuse.value = shadowRenderTarget.texture;
horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
renderer.setRenderTarget (blurRenderTarget);
renderer.render (blurPlaneMesh, shadowCamera);

```

The blurred shadow appears on the `blurPlaneMesh`. But when I try to do the vertical blur targeting the original render target it becomes completely white.

```plaintext
blurPlaneMesh.material = verticalBlurMaterial;
blurPlaneMesh.material.uniforms.tDiffuse.value = blurRenderTarget.texture;
verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
renderer.setRenderTarget (shadowRenderTarget);
renderer.render (blurPlaneMesh, shadowCamera);

```

I have no idea what I’m doing wrong. Here is a JSFiddle with my result. If you comment out the blurring part at the end you can see that it seems working fine without the blurring.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/kovacsv/mp1rut96/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<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 20, 2022, 10:51am UTC](https://discourse.threejs.org/t/cant-make-horizontal-and-vertical-blur-render-together/46008/2 "2022-12-20T10:51:21Z")

</div>

i struggled a lot with that example, it’s very cryptic, maybe it helps to compare notes with this one. it’s a slightly improved implementation, it looks better and can handle [color falloff](https://drei.pmnd.rs/?path=/story/staging-contactshadows--contact-shadow-st-color).

```javascript
import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib'

const smooth = true
const renderer = ...
const scene = ...
const blur = 1
const color = "black"
const resolution = 512
const width = 10
const height = 10

const renderTarget = new THREE.WebGLRenderTarget(resolution, resolution)
const renderTargetBlur = new THREE.WebGLRenderTarget(resolution, resolution)
renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false
const planeGeometry = new THREE.PlaneGeometry(width, height).rotateX(Math.PI / 2)
const blurPlane = new THREE.Mesh(planeGeometry)
const depthMaterial = new THREE.MeshDepthMaterial()
depthMaterial.depthTest = depthMaterial.depthWrite = false
depthMaterial.onBeforeCompile = (shader) => {
  shader.uniforms = {
    ...shader.uniforms,
    ucolor: { value: new THREE.Color(color) },
  }
  shader.fragmentShader = shader.fragmentShader.replace(
    `void main() {`, //
    `uniform vec3 ucolor;
     void main() {
    `
  )
  shader.fragmentShader = shader.fragmentShader.replace(
    'vec4( vec3( 1.0 - fragCoordZ ), opacity );',
    // Colorize the shadow, multiply by the falloff so that the center can remain darker
    'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );'
  )
}

const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader)
const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader)
verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false

const blurShadows = (blur) => {
  blurPlane.visible = true

  blurPlane.material = horizontalBlurMaterial
  horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture
  horizontalBlurMaterial.uniforms.h.value = (blur * 1) / 256

  renderer.setRenderTarget(renderTargetBlur)
  renderer.render(blurPlane, shadowCamera.current)

  blurPlane.material = verticalBlurMaterial
  verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture
  verticalBlurMaterial.uniforms.v.value = (blur * 1) / 256

  renderer.setRenderTarget(renderTarget)
  renderer.render(blurPlane, shadowCamera.current)

  blurPlane.visible = false
}

function renderloop() {
  const initialBackground = scene.background
  scene.background = null
  const initialOverrideMaterial = scene.overrideMaterial
  scene.overrideMaterial = depthMaterial
  renderer.setRenderTarget(renderTarget)
  renderer.render(scene, shadowCamera.current)
  scene.overrideMaterial = initialOverrideMaterial

  blurShadows(blur)
  if (smooth) blurShadows(blur * 0.4)

  renderer.setRenderTarget(null)
  scene.background = initialBackground

```

you would need the following structure, i’ll leave this in jsx because you most likely have that already, the rotations are necessary.

```plaintext
<group rotation-x={Math.PI / 2} {...props} ref={ref as any}>
  <mesh renderOrder={renderOrder} geometry={planeGeometry} scale={[1, -1, 1]} rotation={[-Math.PI / 2, 0, 0]}>
    <meshBasicMaterial
      map={renderTarget.texture}
      map-encoding={gl.outputEncoding}
      transparent
      opacity={opacity}
      depthWrite={depthWrite}
    />
  </mesh>
  <orthographicCamera ref={shadowCamera} args={[-width / 2, width / 2, height / 2, -height / 2, 0, far]} />
</group>

```

```javascript

```

---

<div class="post-metadata">

**Author:** ![kovacsv](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kovacsv/32/31917_2.png) [@kovacsv](https://discourse.threejs.org/u/kovacsv)\
**Post date:** [December 20, 2022, 1:59pm UTC](https://discourse.threejs.org/t/cant-make-horizontal-and-vertical-blur-render-together/46008/3 "2022-12-20T13:59:45Z")

</div>

Thanks for the link! Finally I managed to solve the situation, something was off with my camera so I ended up using a completely separate camera for blurring, and now it seems working.