Show HN: Open source balloon simulation with Three.js

(alexanderperrin.com.au)

307 points | by alexanderperrin 187 days ago

18 comments

  • alexanderperrin 187 days ago

    A couple of years ago I produced this as a study into procedural heightmaps, shadow mapping and online geometry loading with Three.js. I had big plans for it but abandoned it half way.

    I found it on my hard-drive the other day and thought it might be worth putting up in the case that it's of any use to anyone! The project is full of performance issues and other weird things but hey I hope it's worth something! Enjoy.

    Code lives here: https://github.com/alexanderperrin/threejs-ballooning

    Works on desktop and (most) mobiles. You can use the arrow keys or touch the screen to move the balloon.

    • salzig 186 days ago

      Im surprised, ever and ever again, how well this works on mobile.

      • alexanderperrin 186 days ago

        Super glad it's working for you! May I ask what sort of device you're using? I'm quite curious.

        • dvh 186 days ago

          To give you second data point, it crashes (probably OOM) on my $39 phone.

          • swiley 186 days ago

            Where do you get a $39 phone?

            • dvh 186 days ago

              It's myPhone Pocket, Android 6, 512MB ram, 4GB flash. I found it now cheapest for €42 [1], year ago I found it for €39. The only downside is that default apps cannot be uninstalled, that makes the phone almost unusable. It was never locked to any carrier. It's dual sim but I never had sim in it, I use it only as pocket-wifi-browser (102 grams!) and for app development.

              [1] https://www.gigastore.sk/4-az-48-vcetne/myphone-pocket-cerny...

              • vasiliys 186 days ago

                BestBuy has "disposable" androids - probably subsidized by the carrier they're locked to. Just checked - $25 for an ATT phone, used to be $30/$40 with/without sale.

                I'm certain other places do too.

            • saagarjha 186 days ago

              Works great on my iPhone SE–better than it does on my MacBook Pro.

              • knolan 186 days ago

                Works great on my iPhone 7.

                • jbay808 186 days ago

                  It runs beautifully on my Sony Xperia XZ1 compact. Firefox. Very nice.

                  • zius 186 days ago

                    Works flawlessly for me on a Pixel 2XL, quite surprised.

                    • osrec 186 days ago

                      On a high end phone such as yours, it should not be all that surprising that the performance is good!

                      On my low end Samsung J3, it is rather choppy, but I feel it can be improved, given that this animation is lovely and smooth: http://campoallecomete.it/#!/en

                      I think people assume rather quickly that animation in a mobile browser will be janky. Truth is, if done well, it really doesn't need to be.

                    • tnolet 186 days ago

                      Gorgeous, and works better on my Ipad than my Macbook. Does anyone have any idea why?

                      • alexanderperrin 186 days ago

                        Same goes with me actually. I'm not entirely sure but I think most of it is attributed to the huge amount of optimisations and refinements that have gone into the modern mobile GPU's. While the mobiles don't seem to be quite as diverse in their capability, they excel at what they can do!

                        The future is a strange place.

                      • tlarkworthy 186 days ago

                        Runs about 7fps on budget Android Samsung J530F, which cost 160 euros.

                        • webb5 186 days ago

                          Microsoft go/firefox working perfect. love it.

                          • arcbyte 186 days ago

                            What so you use your Go for and does the battery life bother you?

                            I want one, but 4 hours seems too short for me

                            • webb5 186 days ago

                              Was a present, and is treated as a play thing. General low level use gives about 6 hours, browsing and word etc, but if pushed by a game or couple of vbox nix v-machines (just to see if it could) about that 4 hour mark. As a secondary device it's not been a problem, and it charges pretty quick.

                              It's a nice thing. Best feature is the flap, imo. all tablet-like devices should have them! I've not got the proper keyboard, but am tempted.

                          • BiggusDijkus 186 days ago

                            €380 Pocophone F1 with Chrome. What an eye candy!

                            • dublo7 186 days ago

                              Moto g6 play smooth as can be

                              • punnerud 186 days ago

                                Works great on iPhone 6!

                                • rolleTx 186 days ago

                                  Works in my iPhone XR

                                  • salzig 186 days ago

                                    iPhone X.

                                    • nullandvoid 186 days ago

                                      S7 here on firefox and chrome @ 15-20 frames, looks like my phone is a little dated!

                                • androidgirl 186 days ago

                                  This is awesome!!! Amazing work.

                                  • johnmarinelli 186 days ago

                                    Nice pastoral-feeling work. In the readme you feature "Shore detection algorithms for boathouse placement". Does the algorithm have a name, or did you create it from scratch? I'd be curious to learn how it works.

                                    • alexanderperrin 186 days ago

                                      Thanks! I actually can't remember exactly how it worked, but I think it was a pretty simple process of selecting points at the level of the water combined with some sort of normal calculation. Just used it for placing the boathouses in semi-logical locations.

                                      I should probably take it out of the readme just in case someone gets all excited and then disappointed when they realise it's all smoke and mirrors and nonsense. Ha!

                                  • lucidstack 186 days ago

                                    Perhaps not as technically impressive, but this [0] other short game/experience from the same creator is extraordinarily charming and well produced!

                                    [0]: https://alexanderperrin.com.au/paper/shorttrip/

                                    • mcjiggerlog 186 days ago

                                      That was absolutely beautiful! Props to OP.

                                      • kumaraman 186 days ago

                                        I feel like this was a part of a chrome experiment in the early days of html5.

                                        • cptaj 186 days ago

                                          Love it

                                        • pasta 186 days ago

                                          Press space to see the world from another side.

                                          Use the left and right to 'steer'.

                                          Also checkout his Short Trip which was posted here some time ago: http://alexanderperrin.com.au/paper/shorttrip

                                          • nickthemagicman 186 days ago

                                            How was short trip made? That's super dope

                                            • alexanderperrin 186 days ago

                                              To put it simply, I hand drew the whole thing and then scanned it all in! Took about 2-3 years of (learning) programming, illustration and general R&D.

                                              • pasta 186 days ago

                                                My kids love it!

                                                "Waah stop the traain there is a station coming up!"

                                              • nickthemagicman 184 days ago

                                                Your work is really enjoyable, interesting, and unique. :) Please keep it up.

                                          • saagarjha 186 days ago

                                            Pretty! There's a lot of little details I appreciated, like the little boats and piers, as well as the fact that the birds would move to avoid you if you tried to collide with them.

                                            • alexanderperrin 186 days ago

                                              Thank you! I really wanted to add a bunch of other objects to decorate the landscape but it was a massive pain to get new models in. Glad you like what's there :)

                                              • saagarjha 186 days ago

                                                Honestly, I'm not sure that's a loss; there's something very pleasing about the minimal aesthetic.

                                            • technotarek 186 days ago

                                              Wow, things have come a long way.

                                              When CSS3 and jQuery first started gaining some traction (<8 years ago?), I tried a bunch of animations using layered images and image transformations. One of these "dreams" was of some hot air balloons as well. Desktop only:

                                              https://technotarek.com/sky (first balloon appears at ~10s)

                                              My favorite was a simple tail wag (https://technotarek.com/cat).

                                              Edit: noted desktop only

                                              • alexanderperrin 186 days ago

                                                This is really effective! Nice work. Indeed though there are some astonishing capabilities for the web out there now.

                                              • atum47 186 days ago

                                                if you change the canvas-container css to display:block you will get rid of those nasty scroll bars

                                                • alexanderperrin 186 days ago

                                                  Haha a fine contributor already made a PR fixing this! Good stuff

                                                • Pfhreak 186 days ago

                                                  I love this low poly aesthetic, and it's been a dream of mine to work on a little side project that uses it. You might have given me the inspiration to go out and mess around a bit and see what I can come up with.

                                                  I'm curious about your background. I've built games (and hacked SNES games), but always leaned heavily on others for art and audio, and I'm curious if those were skills you had coming into your projects.

                                                  • Epskampie 186 days ago

                                                    Hey Alexander, this game looks like so much fun! https://alexanderperrin.com.au/portfolio/ropejacks/

                                                    Aren't you going to finish it?

                                                    • alexanderperrin 186 days ago

                                                      Hey! If funding came our way we'd definitely look into it! Alas, the project's been put on a pretty indefinite hiatus. I'm starting to come around to the idea of just releasing all my unfinished things as open source projects, so maybe we'll end up doing the same with that one?

                                                      Glad you like the look of it though! Perhaps it'll start up again some day...

                                                    • citeguised 186 days ago

                                                      Cool! This is nice to just run locally and play around with the parameters. I know the feeling of rediscovering abandoned sketches and projects, and thinking that they're not so bad after all.

                                                      • alexanderperrin 186 days ago

                                                        Glad you got it running ok! There should be heaps to play with.

                                                        Yeah! I compare this to a lot of the work I'm doing currently and I start to wonder what on earth I'm doing... Gotta get back to pointless Three.js experiments! They were good days.

                                                      • cr0sh 186 days ago

                                                        This was amazing; thanks for posting it. Also, I love "Short Trip"!

                                                      • HipstaJules 186 days ago

                                                        Super cute!

                                                        • 2019ideas 186 days ago

                                                          My buddy is developing a fireworks Sim in js + embedded systems to coordinate with a fireworks show.

                                                          The embedded work is basically done, but he was considering using JS and three.js, any suggestions/advice?

                                                          • alexanderperrin 186 days ago

                                                            Ooh cool! That sounds fascinating. It would be valuable to know the context for which the simulation would be displayed (ie. where, for how long, does it have user interaction etc.) to make suggestions, but hey if you're just looking for a good recommendation for a JS rendering/scene-graph/animation framework then I couldn't recommend Three.js more.

                                                            I personally love it for the reason that it doesn't automagically do everything for you, and in that way if you've got any sort of experience with computer graphics and game engines then it's got a really gentle and intuitive learning curve. This said, if you're looking to get up-and-running with something really quickly or rapid prototype then you might want to look at something like https://pixijs.io.

                                                            I also wonder, if you're looking to do physical or live performance work then maybe it would be worth looking into something battle-tested and robust like Touch Designer? Not free like JS of course, but could be much more suited to a high-stakes live performance scenario as it sounds like he's putting together.

                                                            • acdanger 186 days ago

                                                              sounds interesting, any links?

                                                            • imazurenko 186 days ago

                                                              Не работает на Firefox 65.0 + linux

                                                              • lcfcjs2 186 days ago

                                                                This is very cool.

                                                                • denniskane2 186 days ago

                                                                  'Tis a fluid piece of work! I got Three.js and the ammo/bullet physics engine working together in Linux on the Web. You can go to https://linuxontheweb.org/desk.os, and then open the Applications app from the application launcher on the bottom of the page. Then scroll down to the webgl apps. The one called "Swinger" is a soft body physics simulation. You can use the "q" and "a" keys to control the arm. The app was taken from the examples of the threejs website. The system works best in Chrome. My last account "denniskane" seems to have gotten shadowbanned, lmao...

                                                                  • rplnt 186 days ago

                                                                    Sim is short for simulation. Generally you strip down some elements, but keep some true to reality. Steerable hot air balloon moving seemingly on its own is not that. So this is more of an arcade.