Can glow be applied to reflections?

Questions
1

I have a mesh with an emissive material added to a glow layer effect that I’m reflecting with a mirror texture, but the mesh does not glow in the reflection. Is there a way to make it glow in the reflection?

2

pinging @sebavan

3

Unfortunately, not at all :frowning: cause the glow is a full screen effect.

I ll try to think of it to see how hard it would be.

5

What about using the old school trick of rendering out a flipped scene to a second camera and then using thats output as the texture output for your mirror.

Then you could apply the glow I would assume.

In Duke Nukem way way back they literally had a second room behind the “mirror” where they had a second Avatar running around mirroring the movements of Duke.

1 Like
6

I think I’m close to getting what I want with two cameras. I don’t know how to invert the 2nd camera’s projection, though, so I’m getting a mirrored view that moves left when the main camera moves right, and vice-versa.

Here’s a playground showing what I mean…
https://playground.babylonjs.com/#HH1AM7#13
Move left and right to see what I’m talking about.

How do I flip the 2nd camera’s projection left to right?

1 Like
7 
mirrorCamera.position.set(-camera.position.x

https://playground.babylonjs.com/#HH1AM7#14

Old schooool methods for the win!

1 Like
8

Thanks but my example didn’t do a good job showing the issue. Look at this one to see what I’m talking about…

https://playground.babylonjs.com/#HH1AM7#21

The mirror camera’s projection has to be reversed at some point. That’s what I’m wondering how to do now.

9

attach a post process to it and just draw it as texture(textureSampler. vec2(1.0-vUV.x, vUV.y))?

You are trying to inverse the image right?

also it’s hard to tell what what, maybe set the reflected meshes material to a different color for now.

and we could use a point of refrence.

10

Ya, but if I do that then won’t I lose the emissive material properties that make the glow layer work?

11

I don’t think so, if the glow layer has already rendered, I think the textureSampler to the postprocess should see it? Effects are supposed to be chainable.

12

https://playground.babylonjs.com/#6ZVKE3#21

it works

2 Likes
13

Ok, thanks. I’ll try figuring out the post-process effect.

14 
BABYLON.Effect.ShadersStore["flipImageFragmentShader"] = `
        #ifdef GL_ES
            precision highp float;
        #endif
        // Samplers
        varying vec2 vUV;
        uniform sampler2D textureSampler;
        void main(void){
            gl_FragColor = texture2D(textureSampler, vec2(1.0-vUV.x, vUV.y));            
        }
        `;

        var postProcess = new BABYLON.PostProcess("flip", "flipImage", [], null, 1, camera);
3 Likes
15

Awesome! Thank you for the examples. They are very helpful to me.

16

Thanks to @Pryme8 I was able to get the glow layer in a mirror/reflection working with 2 cameras and a postprocess on the 2nd camera making the reflection to invert the coordinates.

Here’s is a playground example I made that shows @Pryme8’s solution.

Relevant replies in this thread…

2 Likes
17

Unfortunately, I am not able to get the 2nd camera for the mirror/reflection working in a WebXR session.

The reflective surface will always be a flat plane at y = 0 so I am now considering duplicating all meshes with their y coordinates flipped to simulate their reflections instead of using a 2nd camera that is flipped.

My question now: Is there a way to insert or append a vertex shader in an existing material that flips the y coordinates? …or do I have to completely replace the material’s vertex shader (and maybe fragment shader too?) and re-implement everything else the shaders do, too.

18

If you use a StandarMaterial / PBRMaterial you can use the “custom” variations to modify the y coordinate:

https://playground.babylonjs.com/#XR68UB

Change reverse to true in the code to see the reversed scene.

However:

  • the ligthing may no be what you want on the reversed meshes
  • you will need to tweak the bounding boxes/spheres of the reversed meshes if you don’t want them to disappear from the screen too early (I have made the changes for the cube only).
19

Ok, thank you. Sounds more difficult than I thought. I’ll try to come up with a different look that doesn’t require a mirror on the ground.