Help! help! I desperately need a distance based fog!

Questions
1

I want to achieve a fog effect similar to League of Legends. The fog gradually disappears within the specified radius of the character, and nothing can be seen outside the radius.
I’m trying to use a custom shader, since I don’t know anything about GLSL, I haven’t been able to convert the coordinates of people in the 3D world, to screen coordinates in the fragment shader
The above content is translated by Google, it may not be very accurate, maybe I did not express it very clearly, I am very sorry.

Fog in three.js

image
image592×523 6.93 KB

what i want

image
image589×520 11.3 KB

1 Like
2

I assume you want to create something like a cloud where a mesh inside is hidden? You can create a fog mesh check whatever is intersected/inside gets the effect and is then hidden with object3d.visible = false.

3

Hiding the fog? This is a path I never imagined, do you have an example, I am looking forward to seeing it, thank you very much.

4

This is a kind of screen-based fog, not 3D-world-based fog. I think it is related to the vignette postprocessing effect. I might have seen vignette effect for Three.js somewhere in Github, although I have never used it.

In any case, if everything else fails, you can try to do the fog without Three.js. Here is a live demo:

https://codepen.io/boytchev/full/rNQLaQZ

image

3 Likes
5

Wow, worship Daniel, this is a simpler and faster way, which I never thought of, thank you very much for the code

6

in that case, if this is an option for you, drei/meshportalmaterial would effortlessly be able to do it:

it wouldn’t be more than this

<mesh>
  <circleGeometry />
  <MeshPortalMaterial blur={0.5}>
    <YourModelHere />
1 Like
7

Oh no, I don’t know why, but when I open this page, it’s blank.

image
image1205×845 46.6 KB

8

This solution is not feasible, because I found that the platform I am currently using only allows one canvas element to appear, and other elements are not allowed to appear. I now want to add a radial gradient to the front of the camera, with transparent center and solid color around.

9

If you cannot use a second HTML element*, then implement the gradient as a texture, map it to a plane and put the plane just in front of the camera.

* Honestly, I have never seen a platform so restrictive, that it allows only a single HTML element to show up.

11

Thanks a lot, I have implemented this functionality with your idea, thanks PavelBoytchev.
About the platform: This platform refers to the WeChat “small program” platform. The technology of this platform is very limited, and I am still stepping on the pit step by step~

image
image464×974 38.5 KB

Instead of rendering as a texture, I chose to do the radial gradient in the fragment shader, because I also want to control the size of the radial gradient, lol.

3 Likes