Add SSRPass (screen space reflection)

[gonnavis]

Continue from #20061 (only support OrthographicCamera).

Now support PerspectiveCamera.

Demo, Demo2, Demo3, Demo4, SelectiveDemo, OrthographicDemo.

No SSR

SSR Only

SSR With Reflector.js As GroundPlane
(Now just add a reflector to hide the obvious flaw of SSR at ground, need more integration afterwards)

Below All SSR Only

[gonnavis]

Many thanks to Lonely_Wanderer for letting me give priority to performance issues after turning on Reflector.

Now with SSR and Reflector both on, iphone6sp can run at 40~50 fps, P40 can smoothly run at 90fps.
Better than only SSR. Yeah, Realy, both on better than only SSR on, Surprising! Because of using Reflector's result first, thus can skip a large amout of SSR calculations.

Demo

[mrdoob]

Thanks!

[gonnavis]

Wow, It's my pleasure! Thanks Mr.doob! Thanks every contributor and tutorial writer!

[webglzhang]

that's so cool

[mjurczyk]

First of all - I absolutely love it, it is truly magnificent, @gonnavis 😳 🙌 I noticed an interesting issue though (while also spending the entire night trying to debug it :') )

I made this-small-SSRr-experiment-to-which-GIF-twitter-seems-to-have-hidden-a-direct-URL-so-here-is-an-entire-tweet-URL-pls-remember-to-leave-a-like-and-subscribe - long story short, the sphere is within a SSRr box. And, the entire scene is a single exported Blender GLB (that single glb-root is kinda the important part):

SSR / SSRr do not seem to see things that are not at the root of the scene, or are not directly connected to an object that is in the root (and I couldn't find a note mentioning that they have to be there 🤔 .)

(1) SSRrPass.OUTPUT.Default with all objects in the root of the scene (red cube is not SSRr'd here to make it visible):

(2) SSRrPass.OUTPUT.NormalSelects with all objects added manually to the root of the scene:

const sceneChildren = [ /* traversed GLB and put all children here */ ];

sceneChildren.forEach(child => {
  objects.push(child);

  scene.add(child); // NOTE Manually move every child from GLB structure to the root of the scene (it has to be done for at least the objects that SSRr should apply to.)

  if (child.userData.useSSRr) {
    selects.push(child);
  }
});

(Note: it also seems to work if you just add the root of the GLB to selects - children can then use SSRr properly - but SSRr will be applied to all of them which is not perfect.)

(3) SSRrPass.OUTPUT.NormalSelects with unmodified GLB (just load, add to scene, add child to selects):

const sceneChildren = [ /* traversed GLB and put all children here */ ];

sceneChildren.forEach(child => {
  objects.push(child);

  // scene.add(child); // NOTE Skip this step

  if (child.userData.useSSRr) {
    selects.push(child);
  }
});

Both cube and the box around the sphere should use SSRr, but only the cube is visible (since the crystal box is not in scene root.)

If SSRr requires objects to be in the root, it could be a good idea to add a note about it - since in the example all the objects are only in the root, so there's no easy way to realise that limitation 🤔

[gonnavis]

@mjurczyk Thanks for you feedback! And sorry for not clarify.
Yes, for simplicity, I only implemented trasparent objects directly belong to the scene in SSRrPass, not support hierarchy now.

I'll try to finish this pr and copy the logic to SSRrPass in this development cycle, which I think will also solve the hierachy problem.
If can't, a note is really need to be added.

PS: Your demo using SSRrPass ( screen space refraction ) which introduced in that pr,
not this SSRPass ( screen space reflection ) pr.😊

[mjurczyk]

Your demo using SSRrPass ( screen space refraction ) which introduced in

True, just reckoned it may also apply to SSR and also had this issue in browser bookmarks from earlier. :')

If can't, a note is really need to be added.

To be honest this isn't a huge limitation that'd need an urgent fix - just a note should be enough, so nobody gets stuck 👀