#using the post processing composer in globe.gl (three-globe wrapper) to enable unrealbloompass

15 messages · Page 1 of 1 (latest)

hybrid harness
#

i have been working on a packet viewer on my website for a few weeks and got it to a place it looks quite nice
a live copy can be seen here: https://cqdx.uk/pkt/
though i am trying to add some bloom to the arcs like this: https://cqdx.uk/arms/
not quite so extreme but i think some bloom that lights up/reflects off the oceans of the earth would really make it quite beautiful but
you can see at the very bottom of the live copy i am trying to load unrealbloompass but i'm really lost at this point
docs found here: https://morioh.com/p/5e9aad9bc40a
the docs are awful

postProcessingComposer - Access the post-processing composer. Use this to add post-processing rendering effects to the scene. By default the composer has a single pass (RenderPass) that directly renders the scene without any effects.
but.... HOW.
https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html
example found here, which is a very nice demo.... but no simple code example
just an entire functional example
which is nice, but does not help me understand what the living hell i am doing
https://github.com/vasturiano/react-globe.gl/issues/2
https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/UnrealBloomPass.js
line 26
constructor( resolution, strength, radius, threshold ) {
https://threejs.org/docs/?ref=morioh.com&utm_source=morioh.com#examples/en/postprocessing/EffectComposer
Used to implement post-processing effects in three.js. The class manages a chain of post-processing passes to produce the final visual result. Post-processing passes are executed in order of their addition/insertion. The last pass is automatically rendered to screen.
i mean this is all so fragmented its horrific to navigate all this
but i can see i need to pass some params to the bloom pass
but i cannot see HOW i am meant to do this
so that's why i'm here, to ask for help understanding all this - maybe someone more experienced than i can point me in the right direction

A React component to represent data visualization layers on a 3-dimensional globe in a spherical projection, using ThreeJS/WebGL for 3D rendering.

GitHub

Is your feature request related to a problem? Please describe. I would like to be able to layer post processing over the globe. Describe the solution you'd like a good api for this would be...

somber bronze
#

FWIW the working demo you linked looks really bad

#

edges of the bloom look icky

hybrid harness
#
            async function tc(url = "") {
              const response = await fetch(url, {
                mode: "cors",
                cache: "no-cache",
              });
              return response.json();
            }
            function req() {
                tc(("http://192.168.2.36/query.php?QID=" + QID++ + Math.random())).then((data) => {
                    console.log(data);
                    for (var key in data) {
                        console.log(key);
                        QID = data[key].db.ID;
                        var dcoordstr = data[key].dstLoc.split(",");
                        var scoordstr = data[key].srcLoc.split(",");
                        if (isNaN(dcoordstr[1]) && isNaN(scoordstr[1])) {
                        } else {
                            if (dcoordstr[1] != null) {
                                var outsource = dcoordstr;
                                var outdest = [52.7197, -2.743];
                            } else {
                                var outsource = [52.7197, -2.743];
                                var outdest = scoordstr;
                            }
                            if (isNaN(outsource[0]) || isNaN(outsource[1]) || isNaN(outdest[0]) || isNaN(outdest[1])) {
                            } else {
                                emitArc([outsource[0], outsource[1]], [outdest[0], outdest[1]], data[key].result, data[key].protocol, data[key].dst, data[key].src);
                                QID = data[key].db.ID;
                            }
                        }
                    }
                });
            }
            req();
#

this loads json from server

#

i used to have this on a timer, every 2 sec

#

but sometimes it'd take more than 2 sec and it'd go and get more data when it hasn't even finished what it's got

#

i want it to complete it's current set before going to get more

#

but if i move that req(); line up into the req() func to make it loop itself, it only works on the first iteration

#

the rest return a blank array of 0

#

which is nonsense

#

this seems so simple to me

#

but javascript makes it incredibly difficult

#

have you any ideas how to achieve this? otherwise i'll open a new thread

somber bronze
#

never use var. prefer for..of. and don't use .then() when you know async/await.