The effects for part

I want to achieve the effect that the post-processing only takes effect on the part that passes the stencil test, and the rest remains as it is. I have not found similar examples, may I ask how to achieve such effect through three.js.

could you go into more detail what the eventual outcome of this is? like when all technical details are fulfilled, what is it supposed to do and how is it going to look?

Looks like selective blur. AFAIK, there is no out-of-box solution for three.js.
There’s selective bloom though: three.js examples

So what I want to do is, I want to draw a normal graph now, which can easily be done globally in the post-processing according to the normal, but what I want in the end is to do the post-processing of the slope analysis based on an area that I directly selected, and leave the rest of it as it is, and the way I came up with it is the post-processing combined with stencil testing.

For example, I want the area in the red box to be a normal graph and the rest to be normal terrain

Thank you for your reply, but this may be a little different from the final effect I want. I feel that my scene needs stencil testing to meet it

do you really need postprocessing for that? you could have that just with stencil alone, by masking out contents that display over others. like this: Inverted stencil buffer - CodeSandbox the masking images above made it look like the postpro has to bleed into the non-affected region.

But only in the post-processor was I able to get the normal map

check MeshNormalMaterial - tis can get you normal map without postprocessing. then you dont really need to mess with a stencil to get screen-space rectangle, there is WebGLRenderer.setScissor for this kind of stuff

the terrain map is a tile map,It is a combination of many mesh, not a single mesh. Now I am faced with the situation that the contents inside are packaged, and I cannot get these mesh. The only way to get normal is the normal map in the post-processor

iirc there is scene.overrideMaterial and scene.traverse in case 1st option does not solve your problem (e g if you use normal maps)


May I ask if there is an example like the one above? The map above is not flat, you can specify the area and draw its slope on the ground

it is unlikely, of course. but hey, let me do jsfiddle real quick. 12:30 to… 12:44 damn, did not make it in 10 minutes :sweat_smile: - here

Good example, but I have a question, setScissor can only select a rectangular area, I want to be able to customize the selection of an area, you can draw a triangle, a five-pointed star, etc., that doesn’t seem to work with setScissor

for that you could create fullscreen quad with colorWrite=false material that will output minimum depth everywhere except the area you want, instead of scissor rect, and stick it in between clearDepth and 2nd render call. this is sort of manual stencil, I guess, but probably easier to set up than actual stencil :clown_face: (assuming you still specify the area in screen space; if you specify it in 3D actual stencil is what you want)

I don’t quite understand this implementation, may I ask if there is a similar example of three.js for reference