vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
2.02k stars 300 forks source link

bloomPass on certain objects only #33

Open fakkeldij opened 3 years ago

fakkeldij commented 3 years ago

Is your feature request related to a problem? Please describe. As per this example: https://jsfiddle.net/ghe27wmt

  if (elapsed > fpsInterval) {

                                worldGlobe.renderer().autoClear = false;
                                worldGlobe.renderer().clear();
                                worldGlobe.camera().layers.set(1);  // sets camera to layer 1, the object that has bloom is in layer1
                               if (finalComposer !=null ) {finalComposer.render();} // renders the composer of the bloom
                                worldGlobe.renderer().clearDepth();  
                                worldGlobe.camera().layers.set(0);//sets layer 0 (all the other non bloom objects)
                               worldGlobe.renderer().render(worldGlobe.scene(), worldGlobe.camera())

Describe the solution you'd like I am trying to get the bloomPass to work on a specific camera.layer (to bloom only objects that are set in layer 1) as per the example above. But the bloomEffect does not show.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. I tried adding the unrealBloomPass to worldGlobe.postProcessingComposer() and replacing the above: finalComposer.render() to worldGlobe.postProcessingComposer().render() although no errors, I see no bloom on the object.

Additional context So the short question is, whether it is somehow possible to only use a postprocessing pass on specific objects using camera layers. And how to go about it.

vasturiano commented 3 years ago

@oudekaas I do not know of any way to apply the filter to only parts of the scene / only some objects.

Bloom pass is applied as post-processing as the name implies. This means that its filter effect acts after the scene has been manipulated and as it's rendered to the screen.

From what I gather the snippet you show above uses multiple cameras to separate processed from non-processed objects. If you'd like to build such a setup I would recommend setting up your own scene and add the lower level module three-globe to it. That will give you more flexibility on how the cameras/renderers are setup.

fakkeldij commented 3 years ago

good morning Vasco,

thanks for your quick reply, I am using the polygon example/ coordinate system from globe.gl so it’s probably going to be hard to get that working on the three-globe?

But yes you are correct it seperates non processed from processed objects using the camera layer/ object layer.

I might be able for my initial cinematic scene to use three-globe, does the geometry of the three-globe look the same? Or will the earth look less rounded?

Thx for your help

kr,

Frank

Verstuurd vanaf mijn iPad

Op 19 feb. 2021 om 01:08 heeft Vasco Asturiano notifications@github.com het volgende geschreven:



@oudekaashttps://github.com/oudekaas I do not know of any way to apply the filter to only parts of the scene / only some objects.

Bloom pass is applied as post-processing as the name implies. This means that its filter effect acts after the scene has been manipulated and as it's rendered to the screen.

From what I gather the snippet you show above uses multiple cameras to separate processed from non-processed objects. If you'd like to build such a setup I would recommend setting up your own scene and add the lower level module three-globehttps://github.com/vasturiano/three-globe to it. That will give you more flexibility on how the cameras/renderers are setup.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/vasturiano/globe.gl/issues/33#issuecomment-781717626, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHYCOMGYJBAGBXOASVRTPXTS7WTWBANCNFSM4X2JBPSA.

vasturiano commented 3 years ago

@oudekaas three-globe has the exact same functionality regarding the geometries and layer manipulation. In fact, globe.gl uses three-globe as a dependency to calculate all the geometries. The only part that is not readily available there are pointer interactions as that's more related to the scene setup itself.

So, any example available in this repo you should be able to build using three-globe directly.

Also, the globe should appear the same, as long as you keep the correct pixel ratio in the scene.

fakkeldij commented 3 years ago

Brilliant Vasco thanks a lot for your help, that should work. 🙏

Verstuurd vanaf mijn iPad

Op 19 feb. 2021 om 12:38 heeft Vasco Asturiano notifications@github.com het volgende geschreven:



@oudekaashttps://github.com/oudekaas three-globe has the exact same functionality regarding the geometries and layer manipulation. In fact, globe.gl uses three-globe as a dependency to calculate all the geometries. The only part that is not readily available there are pointer interactions as that's more related to the scene setup itself.

So, any example available in this repo you should be able to build using three-globe directly.

Also, the globe should appear the same, as long as you keep the correct pixel ratio in the scene.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/vasturiano/globe.gl/issues/33#issuecomment-782021560, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHYCOMEXJTET3DOPWLQP2NDS7ZETTANCNFSM4X2JBPSA.