Synchronize a 3D scene across multiple windows using Three.js and localStorage | Hacker News Reader

Synchronize a 3D scene across multiple windows using Three.js and localStorage

github.com

45 pointsandsoitis19 comments

A link to try this yourself: https://bgstaal.github.io/multipleWindow3dScene

The popular version by the same author with the very fancy graphics:

https://twitter.com/_nonfigurativ_/status/172732259457002734... (Code is not public, this demo sparked the whole thing)

The other project like this on HN the other day used Broadcast Channels instead of localStorage, so it didn't have the delay this one has:

GitHub (has a GIF): https://github.com/Momciloo/fun-with-sockets/ HN discussion: https://news.ycombinator.com/item?id=38413660

In my opinion, the magic here is the `window.screen[XY]`, not the communication method, which could be anything.

As others have mentioned, you can do this with localStorage, websockets or even Cookies. The novelty is that each window knows its size and location (through `window.*`) and renders something interesting.

I was a bit surprised to see that the browser gives information of where the window is in the window manager as I would have guessed that to be privileged information and a potential security issue, but what do I know.

>I was a bit surprised to see that the browser gives information of where the window is in the window manager as I would have guessed that to be privileged information and a potential security issue, but what do I know.

My browser doesn't do that. Well it always reports. [0,0]

Going to let us in on the secret?

Is there some reason to prefer localStorage over https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_C... ?

Broadcast is messaging only, localStorage can elegantly handle messaging and state data.

Broadcast gives access to structuredClone and transferable objects. i.e. much reduced latency, which I would have thought desirable for this specific use-case (synchronising a 3d scene)

Saw a great lightning talk about Three.js this summer. Had no idea what could be done with it before and it was a little mind blowing.

https://youtu.be/QXPYYfxnTPU?si=Y56UmEhC8y3HkIPj

Nice discussion here :

https://www.reddit.com/r/nextfuckinglevel/s/d7J6dCZ5s9

I would be fun to create a game with this.

I'm imagining something where the different windows allow different affordances. E.g. one window is your night-vision specs and the other is your HUD. Or perhaps you have six or more windows of some fixed small size, but you need to keep track of a large and changing scene, so you need to place them carefully to track as much of the landscape as possible. Maybe each window is one of a spider's eight eyes.

Discussed the other day here

https://news.ycombinator.com/item?id=38413660

i wonder if a visual of any kind would help

I believe that it's this: https://twitter.com/_nonfigurativ_/status/172732259457002734...

That is neat as hell!

This can be said about 99% of GitHub repositories.

When I first started using GitHub, I thought there must be some reason that no one ever included images in their README. Maybe it's not considered cool, I thought.

Visuals are hard to include because you need to store them somewhere. If you store the in the git repo, they bloat the repo. It's really annoying to clone a repo and having to wait forever because it has a bunch of binaries in it. I try to use SVG whenever possible, sometimes animated with CSS (see example[1]) as they are made if text and are much smaller. When I need non-SVG images, I host them externally, but that's a bit if an overhead and you need to make sure you don't break the image link accidentally.

[1] https://github.com/gotesttools/gotestfmt

I believe if you just copy paste an image in the GitHub text editor, or drag and drop one into it, GitHub will automatically upload it to their own image upload service and will insert the markdown code to show it.

I believe that's true, but I'd guess most people don't edit their README using the GitHub editor.

Yeah, it's confusing to see empty READMEs like this, especially for a visual effect. The demo is at https://bgstaal.github.io/multipleWindow3dScene/ if you want to play around with it.

Reply on news.ycombinator.com