Add Haze Pass #41
Add Haze Pass #41
Conversation
app.js
Outdated
| @@ -85,6 +87,8 @@ class App { | |||
| this.infoDetailsClose = document.getElementById("info-details-close"); | |||
| this.infoDetailsDisplayed = false; | |||
|
|
|||
| this.urlParams = new URLSearchParams(window.location.search); | |||
There was a problem hiding this comment.
Would you mind moving the new url params into main.js so they're handled the same as the current url params (the pattern is that the url params are parsed in main.js and loaded into an "options" object which is passed to the App construtor).
There was a problem hiding this comment.
Much cleaner, done.
| @@ -693,22 +697,67 @@ class App { | |||
|
|
|||
| this.scene.add(this.camera); | |||
|
|
|||
| this.composer = new THREE.EffectComposer(this.renderer); | |||
| // Set up render target for holding depth information. | |||
There was a problem hiding this comment.
It'd be great to make all the new composers/passes conditional on a url param, so if it's not enabled, the behavior/rendering is unchanged from before. This will make it easier to deploy this new feature while we experiment with and tweak it, without changing the current user experience. (At the moment it looks to me like there is a bit of a haze effect, or maybe it's just the antialising, I'm not sure, even if the new haze & depth params aren't present in the url. Also, eventually we might want different haze settings for birds-eye vs street-level views. In any case, if we can make it so that none of this is enabled, and the user sees the same result as before, unless they add special url params, then we can go ahead and deploy it and start experimenting with it.
There was a problem hiding this comment.
Good note, I'll work on that. I think the current "haze" when the haze feature is disabled actually comes from the softening of the edges with the antialising from a previous merge, but I'll double check that.
There was a problem hiding this comment.
I think the fuzziness is from the screen I captured it on, which has a lower resolution. I've taken another screenshot (attached) with all the new features disabled (which is the default). Certainly looks less fuzzy now I think.
For a city to look more alive, we should include a slight environmental haze to indicate depth.
I added two passes - depth pass and haze pass.
These two passes rely on accessing the depth buffer, which needs to be rendered to in a separate composer pipeline.
Depth Change
The depth pass displays the depth buffer which is useful for debugging some rendering effects. This can be enabled by appending
&debug=true&depth=trueto the URL parameters.Haze Change
The haze pass adds a haze to the final image, which depends on the depth (objects further away are hazier, closer are clearer). This can be enabled by appending
&haze=trueto the URL parameters.Before (No Haze)
After (Haze)