How's the reflection made in this example?

Questions
,
1

I mean the floor, it reflects the white texture on runtime, you can even displace that and it’s reflected by the floor.

2

For reflections on flat surfaces you can use Reflector (to use roughness / normal mapping it would need to be extended a little though - if you’re familiar with react-three-fiber, this implementation includes distortion and blur.)

1 Like
3

Thanks for the reply. There’s a problem with the Reflector though, post-processing is super laggy and I infer at least one type of post processing method is used in there. As for roughness, is it possible to achieve similar effect without React?

4

Wdym? Reflector itself doesn’t use postprocessing (it just renders a flipped camera.)

Yep, react-three-fiber doesn’t really change anything in three’s core, so that part can likely be ported to vanilla js and work flawlessly (React & JSX is just a way of writing things down in this case.)

5

Yes, Reflector doesn’t use postprocessing, but I do.
If I use postprocessing + Reflector, 60fps drops to 15fps, even on simplest scenes. Can’t wrap my head around why that’s happening at all.

1 Like
6

What kind of postprocessing you mean exactly?

(Technically speaking, postprocessing should be applied at the very end of the pipeline, over a rendered scene - so what is or is not in that scene shouldn’t really matter. It may be a bug, a side-effect of swapping render targets when rendering the scene, or something is triggering shader re-compilation sometime in-between - /cc @Mugen87?)

7

I really tried that combination a few days ago with no luck and ended up deleting the whole chunk of code and unfortunately can’t provide the same on jsFiddle but I can confirm it certainly happened. Not sure if anyone had the same issue. I’ll provide an example as soon as I reproduce the same code.

Anyway, I used glitch, DOF and many more (one by one for testing). Literally anything.

8

I also found postprocessing with reflector will dramaticly reduce performance.

I guess may the onBeforeRender hook used in reflector and many renderTargets used in postprocessing causing some redundant circular call. I think it should only beautyRenderTarget need to trigger the reflector.

This is also very important to me, I’ll try to solve it.

DEMO

postprocessing with reflector:

QQ截图20210219011634_ssr_with_reflector
QQ截图20210219011634_ssr_with_reflector922×417 36.3 KB

postprocessing only:
QQ截图20210219011755_ssr_only

reflector only:

QQ截图20210219011726_reflector_only
QQ截图20210219011726_reflector_only705×407 32.6 KB

2 Likes
9

Realy, after a quick hack in SSRPass.js:

    renderer.setRenderTarget(this.beautyRenderTarget);
    renderer.clear();
    window.needReflector=true
    renderer.render(this.scene, this.camera);

and Reflector.js

	this.onBeforeRender = function (renderer, scene, camera) {
		if (!window.needReflector) return;
		window.needReflector=false

It runs much faster!

image

2 Likes
10

So the post-processing passes cause Reflector to re-render entirely :face_with_raised_eyebrow: ?

11

So the post-processing passes cause Reflector to re-render entirely :face_with_raised_eyebrow: ?

Yes, every renderTarget in postprocessing triger Reflector once, but just beautyRenderTarget truely need in my case.

12

Reflector and post processing doesnt play well. I’m using R3F in my project. I was using Reflector and tried to use Post processing bloom effect. FPS dropped to 13fps. Did ask the Discord community about this issue. I was pointed to this solution where Reflector and post processing works. It requires some manual work but its definitely possible. Also, i didnt use this solution because i ended up mocking the bloom effect using multiple textures. But heres the working example, all credit goes to @emmelleppi

2 Likes