How to render only nearest depth level of transparent object in three.js?

Question

I am trying to render 3D object the way it will look as a hologram or x-ray in webGL using three.js library. It needs to be transparent in the center (to see background and maybe later some objects will be inside this volume) and have bright opaque color at the edges. Faces of back hidden side shouldn't be rendered. I am very newbie in web-based graphics, so I don't know either I should work with GLSL shader or play with blending options. Sorry for silly question.

I can reach similar result using custom glow shader according to this tutorial. But it doesn't solve the problem with back faces. I got a sufficient appearance in Blender creating a shader which eliminate such faces by restricting light path by transparency depth greater than 0.5. There is nodes of my Blender material. Is there a way to do similar thing in webGL? The screenshots of current situation and expected (second line) is here.

Currently I use OBJLoader, WebGLRenderer and ShaderMaterial from three.js library. Material defines as the following. CustomShader.js:

const customBrainShader = () => { return {

uniforms: 
{ 
    "c":   { type: "f", value: 1.0 },
    "p":   { type: "f", value: 1.9 },
    glowColor: { type: "c", value: new THREE.Color(0xcfdfff) },
    viewVector: { type: "v3", value: new Vector3(0, 100, 400) }
},

    vertexShader: vertexShaderSource,
    fragmentShader: fragmentShaderSource,

    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    depthTest: true,
    depthWrite: true,
    opacity: 0.5
}};
export { customBrainShader };

Fragment shader:

 uniform vec3 glowColor;
 varying float intensity;

 void main() 
 {
  vec3 glow = glowColor * intensity;
  gl_FragColor = vec4( glow, 1.0 );
 }

Vertex shader:

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;

void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
vec3 vCamera = vec3(0.0,0.0,1.0);
intensity = pow( c - dot(vNormal, vCamera), p );
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

TheJim01 · Accepted Answer

If I'm not mistaken, the effect below is what you are trying to achieve.

There are a couple interesting things going on here.

First, I'm setting renderer.autoClear = false, which prevents the renderer from clearing its buffers between calls to renderer.render. This allows calling that function multiple times to write to the buffers multiple times.

Next, I'm doing just that. I'm rendering the same scene twice. But you'll notice that the first time I render it, I'm setting a scene.overrideMaterial, which replaces all of the materials in the scene with the override. I need to do this for reasons within the override material.

In the override material, I'm setting colorWrite: false. This means that while the object will be "rendered," it won't draw any colors, so there is no visible effect (yet). It does write to the depth buffer, which is what we want, because the object is going to hide things behind it. It's like hiding something behind a magic piece of glass. (I also set the polygon offset here to avoid z-fighting, which is another topic entirely, so I won't go into any detail in this answer).

Finally, I render the scene again using the shader material you defined. The noColor render is occluding shapes that should be occluded, so you don't get unwanted bleed-through when a front-face is behind another part of the mesh. Your shader handles the rest, creating the glow effect.

// Your shader code
const fragmentShaderSource = `
 uniform vec3 glowColor;
 varying float intensity;

 void main() 
 {
  vec3 glow = glowColor * intensity;
  gl_FragColor = vec4( glow, 1.0 );
 }
`
const vertexShaderSource = `
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;

void main() 
{
  vec3 vNormal = normalize( normalMatrix * normal );
  vec3 vCamera = vec3(0.0,0.0,1.0);
  intensity = pow( c - dot(vNormal, vCamera), p );
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

const customBrainShader = new THREE.ShaderMaterial({
  uniforms: {
    c: {
      value: 1.0
    },
    p: {
      value: 1.9
    },
    glowColor: {
      value: new THREE.Color(0xcfdfff)
    },
    viewVector: {
      value: new THREE.Vector3(0, 100, 400)
    }
  },
  vertexShader: vertexShaderSource,
  fragmentShader: fragmentShaderSource,
  side: THREE.FrontSide,
  opacity: 0.5
})

// male02 model from the three.js examples
const modelPath = "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/male02/male02.obj"

const renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.autoClear = false
renderer.setSize(200, 200)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(28, 1, 1, 1000)
camera.position.set(0, 90, 500)
const cameraTarget = new THREE.Vector3(0, 90, 0)
camera.lookAt(cameraTarget)

const light = new THREE.PointLight(0xffffff, 1)
camera.add(light)

scene.add(camera)

function render() {
  renderer.clear()
  scene.overrideMaterial = noColor
  renderer.render(scene, camera)
  scene.overrideMaterial = null
  renderer.render(scene, camera)
}

const axis = new THREE.Vector3(0, 1, 0)
const noColor = new THREE.MeshBasicMaterial({
  colorWrite: false,
  polygonOffset: true,
  polygonOffsetUnits: 1,
  polygonOffsetFactor: 1
})

function animate() {
  requestAnimationFrame(animate)
  camera.position.applyAxisAngle(axis, 0.0025)
  camera.lookAt(cameraTarget)
  render()
}
animate()

const loader = new THREE.OBJLoader()
loader.load(modelPath, (results) => {
  results.traverse(node => {
    if (node instanceof THREE.Mesh) {
      node.material = customBrainShader
    }
  })
  scene.add(results)
})

How to render only nearest depth level of transparent object in three.js?

Answers (2)

Related Questions