Three-good-godrays: screen-space godrays for Three.JS

Resources
, ,
1

Good godrays effect, ready for use in your next Three.JS project! Built on the pmndrs postprocessing library for easy integration + interoperation with other effects.

Code: https://github.com/ameobea/three-good-godrays

Demo: https://three-good-godrays.ameo.design

A bright pink light shines through a vertical array of black slats set in the side of a huge indistinct black structure in the background. There are very prominent and intense godrays in the air, giving it the appearance of being very humid or smokey. The ground is rock and there are black pillars casting long and stark shadows across it.

@N8Programs has been releasing some really awesome demos for Three.JS over the past months. Most recently, he put out a godrays demo that blew me away. I reached out, and I expressed my interest in making that demo into a standalone module.

three-good-godrays is the result! I’ve already added it to one of my own projects and am extremely happy with the results.

Give it a try and let us know what you think!

16 Likes
2

Works Great. love the name! :+1:

1 Like
3

Excuse me, I followed the github example, but it doesn’t seem to be working. Here’s the link to codenpen:

I would appreciate it if you could spare your precious time to take a look at it for me.

4

Hi, I found some problems with the demo you linked and have fixed them:

The imports were broken; I switched them to ES module imports with an import map. I’m not super familiar with codepen, but switching them to es module imports seems to work.

The scene you were trying to load wasn’t working because it was referencing a local file. I downloaded the scene from the point light demo (https://three-good-godrays.ameo.design/demo_pointlight.glb) ad re-hosted it on an fileserver with CORS enabled so (ameo.link/u/) so that it would work for this.

Those were the main issues; I also tweaked some other things with your scene like the resize handler and gltf loading to get it looking decent and working properly.

4 Likes
5

Hi, ameo. Your contribution makes my love for Threejs even further. Thank you for your patiently answer. Please allow me to say to you in poor English: Happy 1024.

2 Likes
6

Bye the way, this is the best gift I have ever received in this day. Thanks again.

2 Likes
7

You’re welcome! I’m glad I could help out.

Thanks for checking out the project :slight_smile:

4 Likes
8

I’ve just published version 0.5.0 of three-good-godrays

It contains a fix for bad color banding on newer Three.JS/postprocessing library versions due to the color format on internal frame buffers not being high enough.

It also includes fixes from previous versions that work around bugs in postprocessing involving recursive depth texture bindings that can happen in some circumstances.

3 Likes
9

does this current build support 132? ive installed the postprocessing version v6.29.3 which is three ≥ 0.125.0 < 0.149.0 but when i try to install god rays it says i need a higher version of postprocessing ? which takes me out of the r132 zone where can i down the 0.4.0 version?