Show HN: I made a site where you can travel in space in your browser(spaceinbrowser.com)
spaceinbrowser.com
Show HN: I made a site where you can travel in space in your browser
https://spaceinbrowser.com/
81 comments
Neat.
The relative sizes are super inaccurate. I know you know this, and I know in many ways it helps to have them be inaccurate so you can find anything in space, but the Earth and Moon look to be almost touching. In actuality, you can nearly fit every single planet in the solar system in a line between the Earth and Moon.
It's slightly more accurate when you click on the Earth, but the solar system view they look like they're nearly touching.
Also, small nit-pick, but I wouldn't use the term "dark side of the moon," and you also deepen this misconception by having it be literally dark and need to be lit up using a light bulb. The "far side of the moon" (better terminology) gets just as much light as the near side.
The relative sizes are super inaccurate. I know you know this, and I know in many ways it helps to have them be inaccurate so you can find anything in space, but the Earth and Moon look to be almost touching. In actuality, you can nearly fit every single planet in the solar system in a line between the Earth and Moon.
It's slightly more accurate when you click on the Earth, but the solar system view they look like they're nearly touching.
Also, small nit-pick, but I wouldn't use the term "dark side of the moon," and you also deepen this misconception by having it be literally dark and need to be lit up using a light bulb. The "far side of the moon" (better terminology) gets just as much light as the near side.
Absolutely! Not accurate at all! I had this debate a lot during the development: being realistic vs being user-friendly. I'd still choose being realistic because I don't want to build a game but to 'simulate' a real space.
When it comes to the distance between the Moon and the Earth, I think the problem there is more about the sizes of them rather than distance.
Agree with "far side". I'll change it, let's not mislead people:) Thanks for the comment. Very helpful!
When it comes to the distance between the Moon and the Earth, I think the problem there is more about the sizes of them rather than distance.
Agree with "far side". I'll change it, let's not mislead people:) Thanks for the comment. Very helpful!
Not in the browser but if you want the best "tries to be accurate" version of this concept I recommend Space Engine. Have yet to see anything else that comes close.
Space Engine (avail for free on its website, or on Steam to support devs) is amazing! Beautiful, amazing attention to detail, and realistic. Shows objects we know details about with those details (eg things in our solar system), and procedurally generates the rest.
In browser, I'd recommend NASA Eyes.
Doesn't the dark side of the moon get more light than the near side, because when it's facing the sun Earth doesn't block .1% or whatever of the sunlight that it does for the near side?
As other folk have said, only during an eclipse. More specifically, light doesn't really diffuse like it does in atmosphere, because there aren't any particles to bounce off of. Technically space isn't a perfect vacuum, as there's stray particles all over the place. It's hardly enough to matter.
It seems like the near side of the moon could theoretically get more light on average. When light travels through the fringe of the Earth's atmosphere, it will diffuse and refract a bit. To some extent, some of that light will end up hitting the moon when it otherwise wouldn't have had the Earth not been there.
It seems like the near side of the moon could theoretically get more light on average. When light travels through the fringe of the Earth's atmosphere, it will diffuse and refract a bit. To some extent, some of that light will end up hitting the moon when it otherwise wouldn't have had the Earth not been there.
Only during a lunar eclipse or partial eclipse.
I was actually going to add that to my post, but then figured another commenter would prefer to have the pleasure. ;)
I was actually going to add that to my post, but then figured another commenter would prefer to have the pleasure. ;)
Very neat!
This is similar in concept to the Celestia: https://celestia.space/ Celestia has been around for years so the spaceinbrowser site can't really compare in terms of features. But being able to run in a browser rather than having to download and install a desktop application makes it so much more accessible.
The effort put into performance optimization shows. I'd love to see more planets added.
This is similar in concept to the Celestia: https://celestia.space/ Celestia has been around for years so the spaceinbrowser site can't really compare in terms of features. But being able to run in a browser rather than having to download and install a desktop application makes it so much more accessible.
The effort put into performance optimization shows. I'd love to see more planets added.
I've been wishing for a while for someone to successfully port Celestia to wasm+WebGL; It's a bit beyond my capabilities, but there's nothing keeping it from being possible (the codebase already supports multiple frontends / build targets / graphics backends).
The same here. That was the motivation to start learning WebGL. As I'm a JS developer, R3F was the most comfortable 'WebGL-like thing' to go for me.
So far I'm happy with R3F, but it's even more powerful when you can build your own 3D models (in engines like 'Blender' for instance) and integrate them into the canvas.
So far I'm happy with R3F, but it's even more powerful when you can build your own 3D models (in engines like 'Blender' for instance) and integrate them into the canvas.
Yes! That's the motivation I've too. Bringing all these experience to browser without downloading anything.
More planets, more space stations coming soon. Stay tuned!:)
More planets, more space stations coming soon. Stay tuned!:)
I believe you, but personally I can't travel anywhere on my Firefox on Mac. All I can do is turn around
I had trouble moving around at first too, but after maximizing my FF window I was able to see a navigation/teleport panel that had been hidden off the right side of the screen. It should have a couple of buttons with points of interest to jump to.
These CSS media queries will kill me one day -_- Sorry for the trouble you had there.
Don't feel too bad, browser differences is probably the biggest pain point in modern webdev today.
Just put a "Best Viewed in Chrome" animated gif at the bottom to cover your butt!
Just put a "Best Viewed in Chrome" animated gif at the bottom to cover your butt!
HAHA...Love aLtErNaTiVe SoLuTiOnS!:v
For absolute best-practices, there should be an animated under construction gif above the 'best viewed in' gif. Also, make sure to specify a very specific version of chrome that is out of date by at least 1 major version. That will definitely inspire confidence that this is a highly professional product.
Cool site though, very fun example of what can be accomplished in a browser.
Cool site though, very fun example of what can be accomplished in a browser.
Under construction GIFs were deprecated in favor of the streamlined and better engineered dancing baby GIFs. There's a few stealth startups that are rumored to be developing dancing skeleton GIFs, but you didn't hear that from me. Get it in on the ground floor, it'll be a gold rush.
consider tailwinds library/framework
it has this stuff defined under classes pretty well
it has this stuff defined under classes pretty well
Thanks!
oh wow, I'm using an ultra-wide screen (with my browser window only occupying a portion) and had to do this too! I was so lost at first
yeah, OP is going to have to learn these CSS media queries (or use a framework with everything already defined) like they said.
yeah, OP is going to have to learn these CSS media queries (or use a framework with everything already defined) like they said.
Let's 'teleport' for now. We'll 'travel' in the upcoming versions:)
Shameless plug for JPLs tool that has a similar role re exploring space missions and Planets.
https://space.jpl.nasa.gov/
https://www.jpl.nasa.gov/apps
esp
https://eyes.nasa.gov/apps/orrery/#/home
You should apply to work on these tools here at JPL as often as you can. the application queue is occasionally flushed but new jobs are posted all the time.
https://JPL.jobs
https://space.jpl.nasa.gov/
https://www.jpl.nasa.gov/apps
esp
https://eyes.nasa.gov/apps/orrery/#/home
You should apply to work on these tools here at JPL as often as you can. the application queue is occasionally flushed but new jobs are posted all the time.
https://JPL.jobs
Thanks for the links!
I can't seem to get anywhere but earth, moon and mars. How do you navigate further?
My bad...I should've used the word 'teleport' not 'travel':P
Oh, from the title I was really hoping this was a relativity simulator. It would be neat to travel between stars at different speeds and see them age weirdly.
Maybe one day;)
The web site states, as a matter of fact, that all engineering problems to colonize Mars must be first solved on the moon. That's not really a fact, though, is it? Like, it seems like a reasonable plan for incrementally derisking things, but it doesn't seem strictly necessary.
It also seems like there's technical problems that are unique to Mars, and technical problems that are unique to the moon. For example, landing on the moon can only really be done propulsively due to the lack of atmosphere. On Mars, though, there's atmosphere to aero-brake with. Or, insulation is relatively easy on the moon because of the lack of convection and conduction, while it's really difficult on Mars despite the temperature swings being considerably less severe.
It also seems like there's technical problems that are unique to Mars, and technical problems that are unique to the moon. For example, landing on the moon can only really be done propulsively due to the lack of atmosphere. On Mars, though, there's atmosphere to aero-brake with. Or, insulation is relatively easy on the moon because of the lack of convection and conduction, while it's really difficult on Mars despite the temperature swings being considerably less severe.
Thanks for an interesting comment. I wouldn't say that the website states specifically about 'all engineering problems' but more a 'salesy' statement (also sounded several times by NASA while explaining their Artemis mission - 'https://www.youtube.com/watch?v=_T8cn2J13-4&t=22s').
But like everything else, there is some truth to this that without a base on the Moon, the possibility of facing unpleasant surprises on Mars is even more. Additional to the experiments in 'Mars-like' places on the Earth, it would add more value by making similar experiences in outer space such as on the Moon.
Agree with you that Mars introduces technical challenges (like the atmospheric ones you mentioned) that are not specific to the Moon.
IMO, also the spacecraft aiming to travel to Mars (such as 'Starship') should prove their reliability to the distances that have already been traveled (like ISS, Moon) before sending them to unknown territories.
But like everything else, there is some truth to this that without a base on the Moon, the possibility of facing unpleasant surprises on Mars is even more. Additional to the experiments in 'Mars-like' places on the Earth, it would add more value by making similar experiences in outer space such as on the Moon.
Agree with you that Mars introduces technical challenges (like the atmospheric ones you mentioned) that are not specific to the Moon.
IMO, also the spacecraft aiming to travel to Mars (such as 'Starship') should prove their reliability to the distances that have already been traveled (like ISS, Moon) before sending them to unknown territories.
Very nice. I really like working in R3F too.
Windows doesn't autohide scrollbars like mac, so the infobox you get these big always shown empty scrollbars. See: https://ibb.co/SxBvfZS Also, when I click around, the logo image also occasionally gets selected due to rapid clicking and moving.
Consider adding css to change overflow-y to auto on the infobox rather than scroll, and user-select: none; to the canvas element.
Windows doesn't autohide scrollbars like mac, so the infobox you get these big always shown empty scrollbars. See: https://ibb.co/SxBvfZS Also, when I click around, the logo image also occasionally gets selected due to rapid clicking and moving.
Consider adding css to change overflow-y to auto on the infobox rather than scroll, and user-select: none; to the canvas element.
Oh, I was struggling with the scrollbars issue. What you mentioned seems like a solution. I'll def try it. Thanks!
Thank you all for the great comments. I'm glad most of you liked it!
It's just the beginning of the journey for SpaceInBrowser. If you would like to know about the upcoming developments, consider following SIB's Twitter account: https://twitter.com/spaceinbrowser
It's just the beginning of the journey for SpaceInBrowser. If you would like to know about the upcoming developments, consider following SIB's Twitter account: https://twitter.com/spaceinbrowser
I like it. Particularly how the navigation is ‘on rails’ and users can get around to meaningful places and not get lost.
Glad to hear it! Enjoy!;)
I want to be able to pinch and zoom out in google earth. And keep going, and going, and going…
I disabled the zooming option on purpose as 3JS geometries (the celestial bodies) are empty inside. Any 3D dev who knows how to fix this issue, please let me know:)
I checked the location of ISS (against https://www.astroviewer.net/iss/en/ ), sadly it's not accurate.
Yeap, it's not a real animation of the ISS (at least its real speed is much slower than it shows in the app). Sorry for disappointment lol
Hopefully soon I'll be able to integrate it to some open APIs (showing real ISS location). Thanks!
Hopefully soon I'll be able to integrate it to some open APIs (showing real ISS location). Thanks!
fwiw I created a version of this a couple years ago that does actually do distances to scale, and tries to simulate actual motion: http://uncharted.bpodgursky.com/
It's gone stale and has some visual glitches, but should still mostly work. (source https://github.com/bpodgursky/uncharted)
It's gone stale and has some visual glitches, but should still mostly work. (source https://github.com/bpodgursky/uncharted)
That's beautiful. Thanks for sharing!
This is cool! Note that Starbase is listed as an active crew launch site, but it's actually a development facility with no certain future as a launch site for crewed missions.
Right! I just couldn't stop myself from not adding Starbase to this project!:D
Well...maybe I should add a new category (work-in-progress launch sites). Noted;)
Well...maybe I should add a new category (work-in-progress launch sites). Noted;)
Mars population says 0, hope that will change end of this century.
End of this century is too late!:P
Great. Looks fun.
I tried this on Firefox on Linux (Ubuntu/desktop).
If I travel to the moon and rotate it a bit, the Earth becomes quite elongated.
Thanks! Interesting...Tbh, I was expecting responsive design issues. Would you mind to tell me what device you're using? Knowing the screen sizes might help me to fix it.
Dell XPS desktop. The monitor is an Asus screen with a resolution of 1600 x 900. But the problem is the same on other devices using Windows (tested on laptop and desktop using Chrome and Firefox). Turn on the light to see the Earth more clearly.
I do see the spinning cube in the test site but your site is black in Firefox Android. Oh well, space is very black so I shouldn't complain.
Good humor!;) Hmmm...How about you check this open-source racing game which is also R3F project (not by me): https://github.com/pmndrs/racing-game
Let me know if your screen is black for this game as well.
Let me know if your screen is black for this game as well.
The racing game works on desktop Firefox on Ubuntu. Kind of. I get only jumpy spinning random frames once the car starts. Maybe it's https://github.com/pmndrs/racing-game/issues/152
The space travel site works on desktop Firefox but I can only click and drag. I didn't find any way to zoom. Basically I'm stuck on the objects I can see: Earth, Moon and Mars. But I didn't even looked for help in the other comments. Got work to do now.
Thanks for answering :-)
The space travel site works on desktop Firefox but I can only click and drag. I didn't find any way to zoom. Basically I'm stuck on the objects I can see: Earth, Moon and Mars. But I didn't even looked for help in the other comments. Got work to do now.
Thanks for answering :-)
Wow, I like how depending on the object you're looking at you can get different information, and the added humor is definitely a plus.
Glad you noticed the details;)
Performance is really bad, ~20 fps on chrome linux, but feels slower than that.
Edit: oh it suddenly shot up to 60 fps. Weird
Edit: oh it suddenly shot up to 60 fps. Weird
Check out https://eyes.nasa.gov
I know about NASA Eyes. That's the greatest and most realistic illustration of the space I've ever seen in the browser. The Beta version of my project might look similar to NASA Eyes, but it'll start to differ soon once developed further.
One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to.
One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to.
> One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to.
I have no idea what this means...
I have no idea what this means...
> One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to.
Same bit of confusion as above, and by your name being 'cryptography' I guess I'm just hoping this isn't a planet-based NFT project :(
Same bit of confusion as above, and by your name being 'cryptography' I guess I'm just hoping this isn't a planet-based NFT project :(
HAHA it's not, no worries! The goal is to bring the most space-like experience to your browser, the rest is not important.
Quite amazing, works well on mobile with some distortion on the moon in one quick look around.
I wasn't sure about responsiveness in the mobile version...glad it works fine. Enjoy!
[deleted]
I made... everything I made is an absolute pile of crap compared to this. Good job!
Emmm...Thank you!
Doesn't seem like you can "travel" (just jump around), and it looks like just (low poly) models of Earth/Moon/Mars (so not quite 'space'). The relative sizes and distances are wrong.
Are you sure you didn't want to spend a little bit more time on it before showing it off?
Are you sure you didn't want to spend a little bit more time on it before showing it off?
[deleted]
Looks interesting. How long did it take to build it all?
Thanks! It's my first project on R3F. So I was both learning and building. It took less than 2 months: I spent last 2 weeks mainly on performance optimization as it was super slow.
the music is great. i will now go and listen to more laser hawk.
Check out this album too: https://lazerhawk.bandcamp.com/album/redline
If you're looking for other space-themed music to play, might I suggest
https://spacejunkisforever.bandcamp.com/album/space-junk-is-...
https://spacejunkisforever.bandcamp.com/album/space-junk-is-...
Noted. Thanks for sharing!
Reminds me of Celestia.
Reminds me of Visible Solar System
https://archive.org/details/d64_Visible_Solar_System_1982_Co...
https://archive.org/details/d64_Visible_Solar_System_1982_Co...
[deleted]
The celestial bodies are Three.JS meshes.
I used loaders (namely 'useLoader' from R3F and 'GLTFLoader' from 3JS) to import 3D models, such as International Space Station. More on loading models in R3F: https://docs.pmnd.rs/react-three-fiber/tutorials/loading-mod...
I've future plans for this side project. It would be great to hear from the HN community before diving into them. Enjoy!
P.S: Getting an empty (probably black) screen? This app shows up in browsers that support WebGL2.0 (most modern browsers do). Check this site to see whether your browser supports WebGL2.0: https://get.webgl.org/webgl2/
P.S.S: There'll probably be responsive design issues. I'd highly encourage you to use a desktop version or rotate to landscape while using a mobile version.