CODEWITHSUNDEEP
three.js
Brage
Brage

Reputation: 759

Transparent object behind outline object

I have an outlined object.

enter image description here

Behind it I want to draw a transparent object. My problem is that the outline blends with the transparent object.

enter image description here

How can I draw the outline so it doesn't get blended?

# PLANE
geo1 = new THREE.PlaneGeometry 500, 500
mat1 = new THREE.MeshPhongMaterial({color: 0x00ff00, transparent: true, opacity: 0.5})
plane = new THREE.Mesh geo1, mat1
plane.position.z = -100
scene.add plane

# SHADED MODEL
torusKnotGeo = new THREE.TorusKnotGeometry 50, 10, 128, 16
phongMat2 = new THREE.MeshPhongMaterial 0xffffff
torusKnot = new THREE.Mesh torusKnotGeo, phongMat2
scene.add torusKnot

# OUTLINE
uniforms = offset:
    type: "f"
    value: 2
shader = shader['outline']
shaderMat = new THREE.ShaderMaterial
    uniforms: uniforms,
    vertexShader: shader.vertex_shader,
    fragmentShader: shader.fragment_shader,
torusKnotOutline = new THREE.Mesh torusKnotGeo, shaderMat
torusKnotOutline.material.depthWrite = false
outScene.add torusKnotOutline

jsfiddle (based on https://stackoverflow.com/a/23198184/2785396)

Upvotes: 0

Views: 1643

Answers (1)

Adrian Moisa
Adrian Moisa

Reputation: 4343

I cannot comment (not enough rep), so I will post an answer.

You took the example from the original JS fiddle: http://jsfiddle.net/Eskel/g593q/5/ and removed the composer. The composer ads a few extra operations in the rendering process. 

composer.addPass normal
composer.addPass mask
composer.addPass outline
composer.addPass clearMask
composer.addPass copyPass
  • First it renders the object scene, the outline scene and the mask scene.
  • Then it makes a mask onto which it renders the outline, and then it clears that mask. This part creates your outline and it is a very important step to make. Why? Because if I take your code and add an extra object, you will see that the outline is obscured by both objects. This happens regardles if the second object is in front or in the back of the scene, which I am sure you don't want to happen. Example: http://jsfiddle.net/adrian_moisa/84470k4n/1/
  • Lastly it copies the outline over the rendered scene.

My advice is to fork the original example and keep the composer intact. In case you don't get it to work, remember to include the following scripts from the original example. If any of these go missing in action you have a broken composer, which means your page won't render.

  • ShaderPass.js
  • RenderPass.js
  • MaskPass.js
  • EffectComposer.js
  • CopyShader.js
  • AdditiveBlendShader.js

Upvotes: 2

Related Questions