Highlight or Spotlight Effect

[Sudhir_Kumar]

How can I create an effect in my AR scene where clicking on an entity makes it appear as though a spotlight is shining on it, while everything else is cast in shadow? Those all the entities are the child of the main map.

[GeorgeButler]

I’d recommend creating a custom shader! You can check out this sample project to get on the right track.

[Ashutosh_Singh]

But by using this camera shader We will have the shader applied over the camera visuals not the 3d object.
Can You guide us to a path so that we can write a shader that effect on the object not on the camera feed.

[GeorgeButler]

I’d start by setting up my scene, camera, and renderer like usual. Then, I’d create an offscreen render target using THREE.WebGLRenderTarget so I can render the scene without the spotlight effect first. After that, I’d render the scene to this target. Next, I’d make a fullscreen quad and use a shader material to apply the spotlight effect.

The shader would darken the screen while keeping a circular spotlight area untouched. In the fragment shader, I’d calculate the distance from each pixel to the spotlight’s position and use a smoothstep function to darken the areas outside the spotlight’s radius. If there are objects I want to exclude from the darkening, I’d render them separately after the quad, so they show up on top of the effect.

Here’s an example where I’ve set it up so the mouse position controls where the spotlight is.

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

const spotlightMaterial = new THREE.ShaderMaterial({
  uniforms: {
    tDiffuse: { value: renderTarget.texture },
    spotlightPosition: { value: new THREE.Vector2(0.5, 0.5) },
    spotlightRadius: { value: 0.25 }
  },
  vertexShader: vertexShaderCode,
  fragmentShader: fragmentShaderCode
});

const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), spotlightMaterial);

document.addEventListener('mousemove', (event) => {
  spotlightMaterial.uniforms.spotlightPosition.value.set(
    event.clientX / window.innerWidth,
    1.0 - event.clientY / window.innerHeight
  );
});