Hello,
I’m working on web design project which include an interact scrolling background.
Here is my project, running on Eevee with emissive, reflections and geometry nodes
Do you guys think that it’s possible to run this animation with these parameters in web GL
Thanks for your help ! 
i know nothing about those kind of technologies but shouldnt be easier to put a video that only plays when the user scrolls down/up ?
Yes, the video is one of the solution if the webGL doesn’t work
But before abandoning webGL, I preferred to ask if anyone was able to do this kind of thing
Thanks for your answer
I’m a noob with that !
But wouldn’t that mean recreating the geo setup in webGL ?
I don’t think it’s easy to export animation from GN in such format…
I think it’s possible, but I don’t think it’ll work super well… you have to take into account download speeds, varying user specs, etc, and this will take quite a bit of processing power. In my experience as a web developer, usually stuff like this is cleverly rendered into a few videos- or preferably, some SVGs- and then CSS/JS handles the animation
It’s absolutely possible to do that in WebGL, provided you know how to code it. You can use Three.js if you know nothing about OpenGL API or you don’t want to have to write your own shaders. It’s pretty verbose though.
It’s possible for sure, I just worry that in terms of optimization, it’s not a good idea. All that code will have to run on the user’s GPU, and if the GPU isn’t up to the task, the website will lag, freeze, and/or crash.
It will also be a huge network payload, and page speed and payload are huge factors for things like Google rankings.
Having animation like this activate on scroll will require intense amounts of user resource usage every scroll event, not just once, which is guaranteed lag no matter how good your GPU is. JavaScript is not the fastest language out there and running a few MB of JS every time you scroll is bad design. At best, you lag, at worst, your computer fans start running at 100% whenever you open this website.
Working as a web developer, I’ve learned you should always expect your end users to use a worse computer than you’d think or hope. I’ve seen many ambitious sites with huge JS functionality justify it because “it’s 2022, everyone will be viewing this on a modern computer and browser!” Sadly, this is not the case.
I’m not saying you should be trying to be Internet Explorer compatible, but in this case, you’re assuming that all of your end users have a GPU that can do it, an internet connection that can handle the payload, enough spare RAM to open the page without crashing ( if you already had a few tabs open on a 4 GB RAM laptop, opening a tab with this on it would crash your browser)…
Short version is, if I did something like this in WebGL at work, my boss would say “that’s super cool dude, now go do it in SVG and we can actually use it”
Thanks a lot for your help!
If I decrease the number of generated cube do you think it’ll work better ?
And, as a Web Developer, do you think to put a video that only plays when the user scrolls down/up is a good way ?
Thank you for your explanations
Ideally, if your device has support for context3d and you generate everything client-side, you can save massively on bandwidth, so having a threejs reference implementation and loader for Geometry Nodes would be amazing… like Altermesh, but for WegGL…
If anyone knows of a project like this please share.
Depends on what you’re trying to save on… bandwidth, or client-PC resources?
WebGL solutions can potentially hog bandwidth and resources, whereas a video just hogs bandwidth.
On the other hand, when done in the DemoScene type of fashion, with WebGL you can potentially have 50kb of code create a 5 minute long interactive experience, but it will potentially use up all of the client’s GPU power to do so. Your options for optimization become vast so its hard to do well (with current tools).
As a web developer you should always be trying to keep things lean, and WebGL is appealing for that reason, but sometimes you have no choice but to fall back on something “bloated” just to support older devices.
Good luck.
If you’re going to do this as something that triggers when the user scrolls, it needs to be an SVG and CSS animation, not JS. Or to be more precise, use a simple JS scroll handler to drive an SVG animation
Nothing wrong with having animation on scroll, it’s more about the resource load than the experience, and if you can reduce the load, go wild
Try this:
1.Export animation as alembic .abc with face sets option activated for material support.
2.import .abc on Blender.
3.Bake animation (object>animation>bake action>visual keying to object).
4.Export as .gltf