Hacker News new | past | comments | ask | show | jobs | submit login
Vanta.js: Animated 3D backgrounds for websites (vantajs.com)
377 points by NKosmatos on Jan 3, 2022 | hide | past | favorite | 97 comments



The attitude in this thread is the exact opposite of constructive. It is a great library that the person is giving you for free. Yes it can be improved, yes it you should not use it everywhere, but can you at least appreciate the execution and the fact that there is a real person behind it who can read the entitled diarrhea y'all "hur dur the internet should be just html and usenet" ppl are spewing?

HN has become one of the worst places to have one's work demonstrated at.


Some are constructive criticism in that a lot of despise the direction of over engineering websites that take away from the core purpose. You can do that respectfully however. I'm sure the coding and end result are unique and nice to look at but why should I clam up every time something like this comes out? Something like this makes sense for a web based game or kid's site but lord help us if it becomes expected, so we speak out. For example I'm viewing this on an older machine that I'm vnc'd into. My cpu useage on the 12 cores went from 1-8% usage to 40-60% usage per core. To me that is wasted CPU. I'm sure the author can just ignore those comments and move on to ones that are more appreciative and concentrate on their contribution to the community. You have to have a thick skin as an open source (or even regular) developer.


so just don't let noscript run it. your browser is under your control, right?


This looks like a case of the contrarian dynamic [1]. Dismissive comments tend to appear first, not because they represent the community, but because they're the fastest to write. Often there's a wave of such comments objecting to the OP, followed by a second wave objecting to the objections with some variation of "I can't believe how negative the comments here are". The irony is that they're driven by the same impulse—to make objections—they're just objecting to different things.

The second wave of objections tends (ironically!) to get upvoted to the top of the thread. Whether that's because people's minds are open to the creativity in the OP or because they enjoy disses of other people (i.e. the rest of the community) even more than they enjoy disses of someone's work, we can leave as an exercise to the reader.

This impulse governs the internet but it isn't the greatest thing on a site that values intellectual curiosity [2], because it's essentially reflexive: people see something that activates a previously existing grievance (be it battery-draining websites, bad internet comments, or what have you), which generates irritation and therefore energy to produce a post, but the post is actually litigating the generic grievance rather than responding to anything interestingly new. To get the latter, one has to perceive the new information and digest it in a way that leads to a new response—that is, one must be reflective rather than reflexive [3]—and that is a much slower process. But we definitely want reflective comments here.

[1] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...

[2] https://news.ycombinator.com/newsguidelines.html

[3] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...

---

Edit: I'd like to add a response specifically to this:

> HN has become one of the worst places to have one's work demonstrated at

... by pointing out that https://news.ycombinator.com/item?id=29786132 is currently at #1 on the front page. It's very much a question of which examples you notice and how much weight you put on them.


Idk. Feels like HN has been veering this direction over the last year or so, and the comments are becoming markedly negative, critical comments about everything. I'm not sure it's a problem HN can solve at all. But I definitely agree with GP.

The post the other day about the individual leaving the C++ community (something like "Wrapping Up 2021") was an absolute nightmare thread basically dismissing the author as mentally unsound without really addressing the content.

Every post about nuclear causes a massive fight without even addressing the contents.

Every post about COVID is a shitshow.

Anything having to do with programming languages devolves into a war.

Not every thread is like this of course but a lot of these harmless, cool submissions often get completely wrecked by nay-sayers and just generally unpleasant people anymore, it seems.

I'm not sure what the solution is but I've definitely been discouraged from coming around as much as I used to.


I think we all need to be cautious about such perceptions. It's easy to see this sort of thing and derive a general conclusion of deterioration, but people have been making such pronouncements about HN for well over a decade—basically since the beginning of the site.

The way these perceptions tend to work is that we notice a few data points and then jump to a general conclusion. Remember the so-called primitive tribe that supposedly could only count "1, 2, 3, many"? It seems that's basically how all our minds work. The trouble is that a stochastic data feed like HN inevitably generates as many such sequences as you could ask for. It's really the mind that decides which sequence to pick out and deem representative. This leads to false feelings of generality (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...).

(Edit: for example, look at https://news.ycombinator.com/item?id=29781019 and how positive the top comments are at the moment. The stochastic feed generates lots of those datapoints too!)

What's worse, those feelings have consequences, since they lead to a "why bother" sense of no longer needing to take care of this place or do one's part of build up the culture. If it's all just a shitshow, why not just add more shit? everyone else is, right? Well, no—that's not true at all.

This is not to say that the problems you mention aren't real. They are, and it's important to work on them, and we spend a lot of time trying to persuade people to work on them. It's in everyone's interest to do that, so we can achieve at least part of what we all want here, which is to have an interesting internet forum that doesn't suck.

We should also all be cautious about seeing other people as the problem ("completely wrecked by nay-sayers and just generally unpleasant people anymore, it seems"). My experience is that if we look honestly at ourselves we find all the same things to be true there too, and that's a more productive place to work.


Thanks. I, for one, will evaluate my own dyspepsia.


HN has been like that for a long, long time. You are probably only now starting to notice.


I've had "automatic top dismissive HN comment" on my list of project ideas for at least 7 years ^_^

FWIW, I actually feel like it used to be much worse than it is today. At one point, it felt like it was practically a meme that the top post would be someone poo-pooing whatever was being discussed / shared. Maybe I've just become purposefully blind to the negativity or something, but I feel like I see a lot more interesting comments at the top these days.


I sure hope so. Maybe the coolest thing we've learned about moderation in the last 5 years or so is that downweighting top subthreads when they fall into certain categories (e.g. generic, indignant, predictable, meta) is one of the highest-leverage things we can do for thread quality.

It's not that those comments are necessarily bad—it's rather that those categories of comment reliably attract lots of upvotes for reasons other than intellectual curiosity. It's not in HN's interest to have them at the top of a thread, because their tendency to attract upvotes creates a feedback loop that the system can't break itself out of. They just sit there, accruing ever more mass and choking out more interesting conversation.

The solution is to have moderation (and to some extent software) carry out a countervailing function. That's basically what moderation is for, anyhow—to jig the system out of its default failure modes.

I was just writing about this here, btw: https://news.ycombinator.com/item?id=29788303

(Someone observant might ask why we didn't do that to this very subthread, i.e. https://news.ycombinator.com/item?id=29781971, which is still at the top of the page. The answer is that the rest of the thread wasn't that great in this case. Had there been lots of curious conversation going on elsewhere on the page, we'd have downweighted the generic/meta subthread. It's still helpful to let those run sometimes, though, as a kind of valve for community self-reflection—we just want that to happen in places where it isn't choking out something better.)


In fairness, is there anything new here that wasn't a screensaver in 1996, except repacked as a script include to be a background on what would surely be a terrible website? I totally commend the effort they put into the screen saver controls (more polygons, more lines) but, is this what Flying Toasters died for? I was gonna say Tom Dowdy but that's just rude. People are probably right to slam this, and that's a considered decision and not driven by irritation or a generic grievance. It's so mundane I wouldn't have given it a second of thought or written a word about it if it wasn't here, but it's here.


It wouldn't be a terrible website. These animations are beautiful, some just need some power on the client. Like any font, color scheme, layout, effect ... awesome if properly implemented.


mmmmmm... what kind of website would you put this moving background to?


What if we force people to wait before they can comment?


We tend to be wary of technical solutions to human problems. I fear the unintended side effects.


HN is rife with "technical solutions to human problems" already, which is why new users can't downvote posts. It improved Stack Overflow, it would work here.


This "don't let new users comment right away" idea is a frequent suggestion on HN, and one obvious problem with it is that some of the best threads on HN happen when the subject of a story posted here jumps into an HN thread for the first time to answer questions. Case in point: Nick Kokonas from Alinea Group has an account on HN ('nkokonas) because Tock, the restaurant booking company started out of Alinea, got mentioned here.

Delaying comments from new users would be of dubious benefit to the community (many of the worst comments on HN are not as a rule coming from fresh new accounts, and that safeguard is easily gamed), and what we'd lose in exchange is pretty clear. It hasn't been adopted here for a reason, not just out of laziness.


Like, what if we make them wait forever? That would be awesome. FWIW as much as I hate to accept dang's logic of the overcoming anti-anti-ness of every thread, it does seem true, so why not just let the thing play out...?


> why not just let the thing play out

I think because it could kill the thread, or demotivate the OP. People reflexively rejecting my contributions would demotivate me.


Naw. You have to just gird yourself for the hit. It's true, what he says. The first wave is brutal. Nothing _anyone_ says should demotivate _you_. Your motivation has to come from your own inside vision. Having people talk shit about it is actually a sign that you're doing something right, because they're jealous. The only time you should worry is if they say nothing at all.. =\


[flagged]


Please don't post supercilious dismissals of other people. We all do it, and we all like it, but it's not intellectually interesting and therefore should be resisted on this site.

https://news.ycombinator.com/newsguidelines.html

Edit: the parent comment originally read "You have a bunch of engineers and designers that have been programmed to think they have to improve everything they come across. Its hard for them to appreciate anything without imagining how they would've done it. Relax people."

Please don't make retaliatory edits. It deprives threads of their context and is not in the spirit of the site.


Pretty sure the clouds one is a straight rip from one of Inigo Quilez's shaders: https://www.shadertoy.com/view/XslGRr (note the licence at the top...)


https://github.com/tengbao/vanta/blob/master/src/vanta.cloud...

Definitely getting some 'can I copy your homework' vibes. But then again, if you use the original shader to educate yourself on how to render volumetric clouds... this is the kind of code you'll end up writing afterwards.

And pretty much everyone writing any shadercompo-style code ever ends up borrowing some techniques from iq :).


It is based off it for sure, the credits are on the Github repository[0]. The CDN version has no comments, but the source JS file really should have the source in a comment.

[0]: https://github.com/tengbao/vanta


The birds look like this three.js example, too. https://threejs.org/examples/?q=bird#webgl_gpgpu_birds


They should have just stuck with Apache or GPL license, as now any derivative work nullifies that adamant license and requires no attribution

ngmi


Apache or GPL do not allow you to ban selling or minting NFTs.


Well! I suppose we are at an impasse!

Jokes aside, pretty much no client side javascript allows this restriction. Its a tale as old as view source.

My mantra is “do things worth suing over”. Prideful restrictive in line comments don't pass that bar for me.


The "Why?" section on this site says things like 'it runs fast, can be customized to match branding, has a small filesize' etc.. But I'd like to know "Why?" as in "Why even add this supposed eye-candy to a web page in the first place?" I assume the answer is that it makes the page seem luxurious and opulent, which translates into the viewer believing that the page was probably time-consuming (and possibly expensive) to build, which translates into a sense of legitimacy and trustworthiness.

That explanation might have made more sense a decade ago before these types of effects were ubiquitous on the web. Now, it's easier than ever for anyone to drag and drop one of these preset visual effects onto their webpage. There's nothing to it anymore, people have seen them, the shine has worn off: There's no longer anything 'special' about these special effects.

Worse (as another commenter posted about always seeing these effects on 'crypto coin' sites) these effects are often used on sites engaging in confidence tricks - relying on dazzling the viewer with visual effects to convince them that their fraudulent scheme is legitimate. I associate stuff like this [0] with 'scam'

[0] https://img.freepik.com/free-photo/gradient-dark-blue-futuri...


If you looked closely you would see that it has been developed by a company selling a site builder tool. So, yes, it is probably offered as a drop in piece of content in that context. You won't believe what the hoi polloi are allowed to do with themes and builders these days.


"Animated website backgrounds in a few lines of code."

https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.m... - 631.12kB https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.m... - 15.20 kB

Few lines where?

That said, I love it, reminds me of the long gone http://www.dhteumeuleu.com/ projects. I would never, ever actually deploy it though, it's grindingly slow.


That three.min.js is 128kb over the wire compressed, which isn't too terrible.

It's hard to judge from the linked page, since it's showing all the available effects. But I imagine if you're using just one that it adds up to something smaller than the typical huge "hero images" on a lot of pages.


The over the wire argument is the most flawed of all, ever. It's the code executed, thst matters, when it comes to wasting cpu.


The performance difference around download times and time-to-being-usable are quite obvious if I turn off gzip/deflate in the client, so I'm not sure it's "most flawed".

I did also mention an unofficial builder where you can bundle just the parts of three.js you need in another comment.


Similar background generator found here https://www.finisher.co/lab/header/


Thanks for the link. I needed something like this a few months ago (I eventually built it using SVG).

Very cool tool!


This looks great, but it requires all of ThreeJS, even for the backgrounds that are really just some shaders. You don't really need a complete 3D library to just render 2 triangles that fill the entire screen and apply a shader to them.


There's an unofficial "builder" here where you could try and just use the parts of three.js that you need: http://marcinwieprzkowicz.github.io/three.js-builder/


ThreeJS is a fucking great library, though.


That's true, but that doesn't mean you should use it everywhere. Using Three.js to render a single quad is like using Rust+WASM to add two numbers.


Depends how many times you're gonna add two numbers though, right?


Not necessarily. If data is moving from JS to Rust too much it may even be slower than just using JS.

Also, the simpler the operation, the higher the chance v8 optimises it pretty well.


Agreed, it's probably the best library for 3d graphics in JavaScript. That being said, if you want websites that load fast and perform well on a large number of devices, avoid using ThreeJS unless it's absolutely essential.


I used to use a really great lightweight (5k) library in Flash for simple 3D geometry, polygon shading, etc. (anything simple that could be handled on CPU without uploading anything to GPU; I'm not sure I would attempt to do a full screen terrain with it, but a test would tell). So yeah obviously if you need a couple triangles, look elsewhere than ThreeJS. I'm just saying it's a fantastic library... there's really nothing else equivalent in the ecosystem at this point. It is what Away3D was to Flash, which is a compliment.


if you have a direct fiber internet connection to your house page size doesn't even matter.


I hope you're not a web developer. That's a very bad attitude.


Sorry haha I was being very sarcastic. It didn't covey well in text.


And what if I'm on mobile with a spotty connection where I average < 1 mbps?


My rule on mobile is if it takes more than 5 seconds to load it's time to hit the X and go somewhere else (unless it's my bank's page or something that's actually necessary)


Neat. This can run as a Windows background using https://github.com/rocksdanister/lively


check your CPU/GPU usage before and after to make sure you want to pay that price



Ooh! finally I can make one of those 3D network backgrounds so visitors will think my next crypto coin is the future of web 3.0.


Is there browser any blocker for background 3D yet?


Actually I've never been to a page and seen a 3d active background start up. Do you know of any?


They may be something other than 3d active, but have that appearance:

https://www.crowdstrike.com/

https://www.bain.com/

https://www.accenture.com/us-en

That's with a few minutes of just searching various consulting type firms.


NoJS


This is nice stuff - I just wish it wasn't "for website backgrounds"...?! Can these just be screensavers? Please?


Lively[1] does this with desktop wallpapers if that helps and is FOSS. Additional shaders can be found on shadertoy[2] and others.

It can be a good way of turning your computer into a heater ;)

[1] https://rocksdanister.github.io/lively/

[2] https://www.shadertoy.com/


That's really nice. Mac OS needs to get some shadertoy desktops asap. I can't even get a toaster to fly anymore :(


Toasters and more... https://www.bryanbraun.com/after-dark-css/ (Well, it mimics the old screensavers, anyway.)


It can be whatever you want it to be


Awesome job! The cloud one is going to be my new animated background in most of my OBS scenes from tomorrow :D


Wow, very smooth. Once I wanted to do a similar thing to the "Net" visualization with plain 2D canvas (without WebGL) and it was so slooow.

Side-note to waste of battery/compute: it was not for a general purpose web page, but for a tablet device that is always plugged in to act as a idle animation.


I can foresee the clouds will be used in some religion-related websites, and the "futuristic-looking" animations in crypto websites.


Crashed latest iOS safari. Something like this probably should be disabled on mobile anyways to be nice to visitors’ battery


The clouds made my top spec 2019 16" MBP completely unresponsive on Safari. Regardless of how well the library may or may not be written, it's kinda scary a web page can do that. I'm talking about the entire OS becoming unresponsive and 2 secs between UI frame refreshes …


I mean, it should be a given that when it comes to 3D stuff on the web that iOS browser(s since they're all forced to use Safari underneath) will crash.

Anyhow, works fine with Chrome on Linux and on Android. And probably every other combo that's not Apple.


Works fine for me, getting 60FPS on my 2018 iPhone XS


People will say “works fine for me” but I’ve experienced this with iOS Safari (and particularly webviews) repeatedly. Crashes are incredibly hard to pin down and replicate (maybe there’s also another tab dominating CPU? Maybe you’re on a lower end device like an iPhone 6? Maybe you’re on an older iOS version?). Some of the most frustrating user feedback to get.


I'm on the highest end iPhone with no tabs, definitely from this script - easily reproducible for me.


And I’m on an iPhone 13 Mini… can’t reproduce.


It's crazy how little memory browser tabs and webviews get on iOS. With the devices themselves having memory crunch, with hardly ~1gb of usable ram available, there's so much pressure on efficiency everywhere ~ modelling, loading, rendering.


What's crazy is 1gb of memory in a browser tab, when Steve-O said Flash games that took up 1Mb were too heavy.


I must say it works great on Firefox on my old OnePlus 5 phone.

I really like the Waves preset.


Beautiful, but astoundingly wasteful of both network and (especially) compute resources. If you are going to spin your users' CPU/GPU, at least do it for something in the foreground!


Oh no... I suspect we're going to see this everywhere now.


"Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something."

https://news.ycombinator.com/newsguidelines.html


Well, here it is in another story https://news.ycombinator.com/item?id=29779753


I’ll take this over the faux PowerPoint slide presentations that caught on the last few years.

Repeat after me:

It’s a website, not a power point presentation

It’s a website, not a power point presentation

It’s a website, not a power point presentation


What if a website IS a PowerPoint presentation?


When I was in 10th grade, in the late 90s, our history teacher gave us a an assignment to “make a website.”

It turned out that by make a website she meant create a power point presentation that she could upload to the internet.


Do you have an example?


https://www.apple.com/iphone-13-pro/

And that’s supposed to be good version of this, so imagine all the copy cat knock offs.



Won't even load in Brave on Mac.


Ah, yes. A good way to turn my phone into a heating pad on this cold winter morning.


It is nice!!


Or maybe don't


Safari on top-spec M1 > entire system lags


My top spec M1 max has to be restarted (windowserver) anytime anything goes full screen for a few minutes. *Nicest keyboard on a laptop I ever owned though.


Sounds like a safari problem: Android chrome is just fine.


60fps with chromium on a 2012 thinkpad. I've heard good things about the m1...safari not so much


Pure svg can do very similar, minus the blobby gradient type stuff


Why would you want to drain your customer's batteries?


Maybe it's a marketing scheme for a business that provides battery replacement services?


More useless bloat on the web. Fantastic. Because everyone has 256 GB of RAM and an internet connection measured in GB/s, right?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: