Multiple GodRays Effects

Hi, my 3d configurator is almost finished but I’m stuck by the maximum effects in an EffectPass : I have 25 GodRays Effect but it looks like the maximum is 15.

The console shows this error :
THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog FRAGMENT shader texture image units count exceeds MAX_TEXTURE_IMAGE_UNITS(16)

I tried using a 2nd EffectPass in a 2nd Composer but it only renders one composer, and it’s very laggy.

Here is a codepen of my work :

My method may be wrong ? Is it possible to use 1 godrays for more than 1 object ?

Are the god rays for the light’s? It would be good if users coups zoom out a bit to see them. The car rotates, including them.

The godrays are faking lights, there is no lights coming from the car.
I intentionally disabled the zoom because there’s not much to see except the car

Hi @aurelientanguy,
Have you considered combining all geometries that use the same material, creating 1 mesh from the one merged geometry with a single material and running that one combined object through a single godrays pass? after looking at your scene you could get it down to 4 god Ray passes, one for orange, one for front white, 2 for red and white rear lights…

Just a suggestion but nevertheless it’s looking like great progress youve made!!!

1 Like

What I meant was I can’t see the actual rays, I guess because I’m on mobile perhaps.
I can only get a front view of them, then they go off screen if I want to see them from the side.

Hi @forerunrun thank you for replying again

Not sure about what you mean, as I’m using each material’s opacity to toggle “lights” on and off.
I can try your solution to merge objects that lights up together (like feuderoute1 and feuderoute2 as an example) so it would divide the GodRays Effects count by two I guess. But I can’t figure out how to reduce this count to only 4 godrays :face_with_monocle:

By the way, how would you merge those objects ? maybe something like this ?
let feuderoute = new THREE.Mesh(feuderoute1, feuderoute2);

@GlifTek I think you’re seeing it right, it’s normal that the effect disappear when object is hidden by the car because there’s no real lights, only meshs + godrays effects.

As I see it on my devices it looks the same on mobiles, tablets and laptops. I’m using an iphone 8 with ios 14 and it works on Safari and Chrome.

Maybe just try to rotate your mobile?

EDIT: just re-enabled zoom, I think it’s better when it’s disabled. Let me know

Yea I still can’t zoom back far enough to see them from the side. (Which is the effect you want people to observe)
I’ll look in desktop.
Sorry for the fuss.
Looks awesome regardless!

Edit: yeah sorry my accelerometer in my phone I think broke because of the cold this winter so I couldn’t see the headlight effect sideways.

Tried on a friend’s phone.
Looks great. Real nice effect!

@aurelientanguy

You have to import BufferGeometryutils and use like…

let g = BufferGeometryUtils.mergeBufferGeometries([geo, gCircle1, gCircle2]);

Where geo, gCircle and gCircle2 are the geometries you want to merge…

Also not tested but I’m sure you could group any other meshes that need to be seperated and run that group at once through the god rays effect where the rays don’t change meaning you could change the opacity of each childs material in the group, this would bring the god rays effect down to 4, as I say, 1. front white lights, 2.orange lights, 3. rear white lights, 4. Rear red lights…

Hope this helps, give it a try and let me know!

1 Like

Hey @aurelientanguy how’s it going with the project? Did you manage to make sense of the suggestion I made?

@forerunrun Just sent you a dm

UP

Im still stuck with this problem, the @forerunrun’s solution doesn’t work because I only have one geometry and all the meshes are created with it.

To make my problem more clear :

  • I have 25 meshes, and so 25 godrays effects. An effect pass only accepts 15 effects.
  • I’ve tried to create a second effect pass, but the composer only accepts one.
  • I’ve tried to create a second composer, but there is only one rendering (always the second composer to be mentionned in my render function)

Here is a codepen of my work so far

Still curious why you have the camera so close.
I want to see the effect be occluded then reveal. Impossible because of the camera cutoff.

Yeah it’s a difficult one, I was trying to have a play with the godrays but you’re not using es6 modules (three.module.js) to import, so BufferGeometryUtilis is not behaving as expected, I’ll have another look ASAP for you and see if I can help