How's the reflection made in this example?

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

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

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?

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.)

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

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?)

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.

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:

postprocessing only:
QQ截图20210219011755_ssr_only

reflector only:

2 Likes

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

1 Like

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

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.

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