Plane mesh is not showing the pmndrs postprocessing OutlineEffect at the back

Questions
, ,
1

I have the full code below to display an outline on the plane mesh. However, it is not showing the outline when we look at the back of the Object3D. It works fine on all sides for other geometries. I don’t really want to create another plane, reverse it and merge it with the first plane. Is this a bug with the OutlineEffect?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js OutlineEffect Example</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script type="module">

import { EffectComposer, RenderPass, EffectPass, OutlineEffect } from 'postprocessing'

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);

composer.addPass(renderPass);

const outlineEffect = new OutlineEffect(scene, camera, { 'visibleEdgeColor': 'gold', 'edgeStrength': 10 });
const effectPass = new EffectPass(camera, outlineEffect);

outlineEffect['selection'].set([plane]);

composer.addPass(effectPass);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    plane.rotation.y += 0.01;
    composer.render();
}

animate();
2

I don’t really know,

Here is a live editable version of the above code in case anybody else knows.

Edit and share to generate a new snapshot of the edited code.

1 Like
3

postprocessing outlines seems to ignore if you set the planes material.side.

so you can fake it,

modulate the rotation 180°

I know its not a real solution.

4

A very thin box geometry looks like a plane and works.

1 Like
5

Yeah, I tried that and that causes some major flickering of the faces when you have an image texture. Maybe the solution is to tweak the PlaneGeometry? :cowboy_hat_face:

6

It looks ok to me.

Anyway, your problem isn’t with the plane geometry.

It is with a third party library who’s official repository is at https://github.com/pmndrs/postprocessing

You could ask for help there in their issues tracker.

Or on the pmndrs discord.

There is probably a good reason for why postprocessing outlines appears to ignore the material.side property.

1 Like