Repository navigation
Request for Feature: Screen Space Reflections #8248
Description
One thing that I find missing from ThreeJS that would be amazing to have would be screen space reflections.
Here are some references for the ambitious coder:
Example code from the talented Morgan McGuire:
Example open source code for Unity 5:
http://www.kode80.com/blog/2015/03/11/screen-space-reflections-in-unity-5/
https://github.com/kode80/kode80SSR
Reacted by Robin Hawkes, Bruno Quintela, Tom Delerue, fish, Nikita Pchelintsev, cloud, Vincent Van Ghelue, Michal Kulinski, Tom Norton, Kael and 9 more
Reacted by Arjan Wiegel, fish, Michal Kulinski, Tom Norton, Astrak and Vis
Activity
jgwinner commentedon Nov 16, 2017
My only concern here is that it doesn't work really well with stereo Rendering, so it would be tough in WebVR, but please don't think I'm against the feature :) 👍
bhouston commentedon Nov 16, 2017
Just turn it off in VR. A lot of the costly effects do not work well in VR. UE4 even suggests going with forward rendering rather than deferred in the VR context for speed purposes.
jgwinner commentedon Nov 16, 2017
Exactly, which is why I'm not against it.
I stumbled on here while working on a React Native implementation of reflection mapping, Screen space reflections are great for non-VR games.
mrdoob commentedon Nov 16, 2017
THREE.Reflectorworks in VR ✌️https://threejs.org/examples/webvr_sandbox.html
jgwinner commentedon Nov 16, 2017
Nice!
Although even on Nightly I get "VR Not found" but I'll check it out.
My particular problem (which isn't the OP's) wasn't to solve the reflection problem, it was how to create three.js native objects, and render them within ReactVR's existing scene and renderer. I got OK results, the only thing was the background image was a little strange, so reflections look weird - but that's as expected, React VR creates an inside-out sphere for the background pano. I haven't tried a cube map, but that might work better.
I'm WAY over on pages on the book so I'll probably leave the existing demo the way it is, but this looks like a great technique.
gkjohnson commentedon Jul 28, 2018
I've been wanting to learn more about this type of effect so I tried my hand at making a composer effect for it. There's still some work that could be done but here's what I put together based on Kode80's implementation and Morgan McGuire's blogpost (the sponza scene takes a bit to load in):
https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/
Some things to do next would be cleaning up the jitter artifacts, glossy reflections (with a blur pass or mip map sampling + depth map pyramid) and multiple bounces via temporal reprojection.
If anyone is actually interested in using this effect I'd be happy to work with someone to polish this out a bit more!
WestLangley commentedon Jul 29, 2018
@gkjohnson Sweet. Your scene may be too complex, however. In any event, your demo seems to be largely unresponsive. Can you create a simpler example? Also, an on-off toggle would be nice.
gkjohnson commentedon Jul 29, 2018
@WestLangley
Are you able to see the demo? The screen may be black for a few seconds or so because the Sponza scene will take a little bit to download depending on your connection.
If it's not working at all I can take a look at creating something simpler -- it works on my Pixel 2, though
Turning the "intensity" slider down to 0 looks the same as turning it off, though ray tracing is still happening so there won't be any performance difference in that case if that's what you're looking for.
WestLangley commentedon Jul 29, 2018
@gkjohnson Got it. On my mac, your demo is black for awhile, and then the frame rate is 4.
gkjohnson commentedon Jul 29, 2018
@WestLangley It's a very resolution-dependent effect so if you make your window smaller the framerate will probably go up. Doing the ray tracing at a lower resolution and then compositing with the full resolution buffer would help make the effect more scalable, but I haven't taken the time to optimize it.
bicubic commentedon Aug 23, 2018
@gkjohnson how would you mask it to reflective surfaces only? If I crank up the intensity everything starts reflecting and there are some pretty jarring artefacts.
gkjohnson commentedon Aug 23, 2018
@bicubic At the moment no surface attributes are being taken into account but it shouldn't be too hard to add a basic version of that. You could fade or blur the effect based on the specular / roughness attribute of the material.
Unfortunately I have no use for the effect at the moment so I haven't gone out of my way to add these other features. Like I mentioned before, though, if there's interest in using it for something I'd be happy to collaborate and round out the effect!
looeee commentedon Aug 23, 2018
It would be more useful to be able to specify objects as reflective / non-reflective. At the moment everything is reflective, including things like curtains and plants. Ideally, only the floor should be reflective in this demo.
20 remaining items
gonnavis commentedon Aug 25, 2020
@WestLangley Thanks! but when I use Spector.js on Sketchfab, I got "No frames with gl commands detected. Try moving the camera." error.
I doubt that after SSRPass is optimized as I said earlier, the performance of Sketchfab will still lead significantly. Especially in the case of continuous rendering and no downgrade strategy as @bhouston @looeee mentioned. I even think that if don’t talk about the implementation details, the core concept of this SSRPass may be already the optimal solution.
@gkjohnson Thank you for your information and support! I'll keep improving.
mrdoob commentedon Aug 25, 2020
@gonnavis
I recommend Safari's Graphics tab:
If you use Linux you can use Epiphany (aka Gnome Web):
https://webkit.org/downloads/
I don't think there is any WebKit build for Windows though...
gonnavis commentedon Aug 25, 2020
@mrdoob Thanks! Though I mainly use windows, I'll try on Mac if needed.
But I'm wondering whether it is allowed to upload Sketchfab's code to open source library, if find any useful stuff such as glsl function?
This SSRPass's structure is base on three.js SSAOPass, and demo scene uses three.js webgl_shading_physical example, key pointToLineDistance function comes from wolfram.com, and others mainly wrote by my own (of course is based on a lot of other previous experience, especially other three.js examples ). I think these all no any problem, but is it the same case of Sketchfab's code?
WestLangley commentedon Aug 25, 2020
Scroll the mouse to zoom the camera. That should be sufficient to trigger Spector.
Also, use a static scene in your example that does not require a render loop. Currently, the frame rate is too low to be acceptable.
gonnavis commentedon Aug 25, 2020
@WestLangley Succeeded in this scene, thanks!
bhouston commentedon Aug 25, 2020
gonnavis commentedon Aug 25, 2020
@bhouston OK, for reference only if necessary.
I even often feel that, after receiving some inspiration, keep looking at other people’s paper and code is more difficult than writing it myself, especially when in different environment.
For example, this time, I was mainly inspired by this tut, but it is difficult to clearly understand the meaning of the text at start, and because of the different coordinate system he uses, and I don't know how to run the .cxx file, so I only read a little text and hardly read the code. So in the end, the two pictures imgA imgB that helped me the most.
gonnavis commentedon Aug 26, 2020
Add some demos.
Demo, Demo2, Demo3, Demo4, SelectiveDemo, OrthographicDemo.
gkjohnson commentedon Sep 19, 2020
Inspired by @gonnavis I finally got around to trying out a few new things in the SSR implementation I posted a couple years ago so I thought I'd share here. I have no plans to use this in a real project so it's not optimized and at this point and it's become a heap of different SSR features but I've learned most of what I want to from it so I'm going to call it "done" for now. Perhaps there are a few things others can take, though. There are still things that I know could be added or improved but maybe if I ever pick it back up I'll leverage some features in WebGL2 to simplify things.
Some of the new features:
It is a pretty intensive effect but I feel like with a mix of reflection upscaling, blur, jitter, and low step count you could something that works well especially with smaller embedded canvases rather than full window apps. By resolving the final image over multiple frames like has been discussed in #14048 you could probably get decent glossy reflections, as well. Of course as has been mentioned elsewhere the reflections still won't be really right without separate passes for diffuse and whatnot but there's always something else to improve.
Here are a few screenshots with higher step counts:
And here's the demo:
https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/
Ben-Mack commentedon Sep 27, 2020
There's a slide in Siggraph 2015 about "Stochastic Screen-Space Reflections" that you might be interested: http://advances.realtimerendering.com/s2015/index.html
01000001khan commentedon Aug 6, 2024
Was support for disabling reflections on rough surfaces ever added? This is something I'm struggling to figure out in my project. I don't need diffuse reflections on rough surfaces, just the ability to turn them off per object or material.
gonnavis commentedon Aug 6, 2024
I've tried #21487, but full PBR integration was too challenging for me and I couldn't complete it yet. However, it might still be helpful as a reference.
01000001khan commentedon Aug 6, 2024
Oh wow, good luck! I had thought
roughnessCutoffmight be what I was looking for, but I guess not?