Three.js: light rays?

[masel]

Awesome library and exciting examples thanks for the work :-)

I wonder it's possible to realize some kind of light / shadow rays on scenes with fog?

[alteredq]

There was an example by @rdad doing something like this:

http://www.whiteflashwhitehit.com/content/webgl/PP/forest.html

https://github.com/rdad/PP.js

[rdad]

Some explanations: I use multi shader :

1. trigger most lighted part of the final render
2. blur it with a direction blur filter
3. blend it with the final render

you can see the "step by step" texture in the control panel (show debug texture checkbox)

I use the PP.js library to do it all quickly:

PP.start();

PP.renderScene().toTexture('diffuse');

PP.get('treshold').set('textureIn').toTexture('diffuse');

PP.renderShader('treshold').toTexture('blurZoom');

PP.renderShader('blurZoom');

PP.get('blend').set('textureIn').toTexture('diffuse');
PP.get('blend').set('textureAdd').toTexture('blurZoom');

PP.renderShader('blend').toScene();

[masel]

thanks a lot, i played a bit around nice :-)

but PP.js "lightrayed" the whole scene. But i'm rather looking for something like this http://www.youtube.com/watch?v=XWz_U0v6I6U those independent lightrays there
any other tipps or examples?

[mrdoob]

To achieve a similar thing to that video. Take a look at the light beams section in this article.

[sjcobb]

Net magazine link from above is broken, if others also come across this in search, try: https://www.creativebloq.com/3d/behind-scenes-lights-latest-webgl-sensation-11116660

[Mugen87]

I've recently played around with light shafts. You might want to use the code from this fiddle:

https://jsfiddle.net/q0Lfm165/1/show

@mrdoob Could something like THREE.LightShaft be interesting for the project? I mean a class similar to THREE.Lensflare.

[mrdoob]

@Mugen87 Sounds good to me! 😀