Inspired by the classic game Marble Madness, we created a gamified experience where users control a ball through playful, interactive levels. The goal was to blend marketing content with the look and feel of a game to engage users.
The app is built with Three.js [1], using our custom render pipeline and shaders, and uses Rapier for physics simulation [2]. The 2D content is overlaid on the WebGL view using CSS 3D transforms for a seamless integration with the 3D view.
We’d love for you to try it out and share your thoughts!
EDIT: More info on this project here: https://www.littleworkshop.fr/projects/5milliondevs/
More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/
During the project, we discussed adding a speed-run mode but ultimately had to drop this feature due to time constraints. However, we intentionally included some shortcuts in the level design with that intent in mind.
Still, very cool. Too cool to waste on marketing in fact :)
It's okay if the reason is, "because we make websites and the programming we know is Javascript" or whatever. It doesn't have to be about some objective comparison, like optimization or whatever, which isn't going to be true or necessarily matter anyway.
However, mobile browsers will be supported with Unity 6 web exports, still experimental currently AFAIK, but that should become a viable option soon.
Hmm... Unity WebGL has worked correctly on Mobile Safari since 2013. Support has probably been flawless since around 2019. It has been supported in all the ways that matter for a long time.
From the article:
Android and iOS browser support has arrived With Unity 6 Preview. Now, you can run your Unity games anywhere on the web, without limiting your browser games to desktop platforms.
https://unity.com/blog/engine-platform/unity-6-preview-relea...
Not OP but, what exactly you feel like is missing tutorials? It's a nice little polished experience, but I don't think there is anything particularly innovative or difficult to build with the resources that exists today. Or is there something in particular that looks/seems difficult from what they shared?
In practice building something like this with resources that exist today can still mean a stream of issues specific to a given platform, browser, library, programming language, IDE, issues related to a combination of any earlier two and a yak that needs shaving[1].
Meanwhile this project is described as[2]:
> fully optimized for both desktop and mobile browsers, with user controls and UI components tailored for each device, ensuring intuitive navigation and interaction across all platforms.
If this process was easy and well documented, Netlify wouldn't hire an external agency.
Right, I agree, most of the time will be spent in the polish. But is there really no resources out there on how to polish? Assuming there isn't, what would you want a tutorial to contain to make it apply to a wider audience, as polish is typically hyper-specific to the project.
> If this process was easy and well documented, Netlify wouldn't hire an external agency.
Companies don't typically hire external agencies because something is difficult for them to do per se, but more that it would be wasteful for them to spend the time building something like that instead of focusing on things core to the business.
FWIW: I'm asked parent about this in order to see if there are actual gaps in the available resources today for what parent wanted to do, hence the question to specify what exactly they're looking for. I guess "how to polish" is a valid answer, but again, there are resources out there to help understand how to approach that.
Companies like Figma have shown that there is a huge appetite for solutions built on top of Canvas or WebGL, but if you don't have the privilege of working for one of these companies that built up lots of proprietary building blocks from scratch, it's much more difficult to get started.
> The 2D content is overlaid on the WebGL view using CSS 3D transforms for a seamless integration with the 3D view.
Maybe a simple example of this with code?
More info here: https://threejs.org/docs/index.html?q=css3D#examples/en/rend...
And some code samples from the Three.js website: https://threejs.org/examples/?q=CSS3D#css3d_periodictable https://threejs.org/examples/?q=CSS3D#css3d_molecules
Time to start speed running!
4 minutes and 21 seconds after few more attempts.
3 minutes and 59 seconds. Sub 4 is good enough for me :)
The 45 degree rotation does require more dual input than I care for which makes me wonder if that is a design choice.
Well they say "A Marble Madness-inspired WebGL game" so there is not much choice about the rotation [1]
Of all the programming I find the 3D gaming to be the most complex and unattainable at my current knowledge or intelligence level.
The dual input is indeed a consequence of our isometric-view design choice, which I agree may not be the easiest way to control the ball. But the 45 degree angle just looks cooler in our opinion.
What's your company called?
Our studio is called Little Workshop. You can find more info about us here: https://www.littleworkshop.fr
#1. I could not find pricing anywhere.
#2. The "ROI calculator" steered me to enter in my name, e-mail, and phone number. I don't want to sign up to get spam from a salesman just to find out the basics about some tool or platform.
#3. Wikipedia's page for Netlify has a content warning that the content appears to be an ad brochure, but at least it said this:
"Netlify is a remote-first cloud computing company that offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites.
The company enables building, deploying, and scaling websites whose source files are stored in the version control system Git and then generated into static web content files served via a content delivery network."
Still have no idea what Netlify does (beyond what I can already do with git with a few clicks), or if it's right for our team, or if we can even afford it.
The Marble game was quite fun, however...
#4. The main thing that stuck in my mind from the little "milestones" about Netlify was that they changed their logo. This may seem significant to the Netlify team, but is completely irrelevant to the rest of us.
#5. The second thing was that they "bought Squirrel, an open source"... it is rather dystopian to hear that someone "bought" an open source platform.
Since we have a few Netlify people posting here, please feel free to correct my ignorance or point me in the right direction.
That’s the meat of it. It’s Heroku for statically generated websites or websites that can run as lambdas. Pretty limited but very fast for those purposes cause everything is handled by edge servers rather than primary data center servers.
M1 macbook pro, Arc browser
I’d want to watch the CEO host a speed run stream.
I think this is intentional, since higher gravity/smaller ball would significantly raise difficulty.
Those jarring little things seem to just never disappear from modern browser games.
Beyond that it‘s amazingly fluid.
[1] https://discourse.threejs.org/t/iphone-how-to-remove-text-se...
I am very sure scrolling is related to popups when you roll over popup points.
- you say it's built with three.js but you also use rapier. How does that work / integrate? I see one is JS frontend thing, the other rust engine
- how did you design levels, with what?
The levels were built inside the Unity Editor, then exported to FBX, then went through a pipeline based on Blender python scripting that optimized their geometry, assigned materials and exported them to GLTF (the final format that we load in the browser).
[1] https://rapier.rs/docs/user_guides/javascript/getting_starte...
This is not possible with Blender because it contains all models inside a single .blend file, so assets must be manually re-imported each you change them. There is a Link feature in Blender but in my experience it's not as good as what Unity does out of the box.
Right now learning about the company feels like a penalty which I doubt was the intent.
Also for anyone who hits a dot and is confused how to get out of the information screen - you just press the arrows. I tried escape and clicking for longer than I would care to admit before I realized this.
Super cool idea though.
Still have no idea what netlify is or does.
While on the google search result, the music from the game is still playing. If I open a new tab, the title of this tab changes from the google title to the netlify one, and vice versa if I change back.
We’d love to create a longer game someday, but making a living as a small indie studio in the gaming world is definitely challenging. Never say never, though!
Here's what I was thinking of (at least in type):
Needs a good enemy marble to come crack you and hammers too.
I spotted Little Workshop when I saw https://equinox.space/ on Hacker News and noticed it was running on Netlify. Loved the fluidness, speed and art direction of a game running directly in the browser and working smoothly on my phone.
Immediately thought of them when we started thinking about a 5 million developer celebration and reached out. Love the result :)
Great job optimizing too. Runs totally smooth on my 2012 macbook and its decrepit HD 4000 iGPU, which is no small feat for web-games these days.
If anyone's wondering, the getLayoutMap method from the Keyboard API is what we're using to handle international keyboard layouts.
https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/ge...
If you move fast enough, you can glitch the ball against the slides and get stuck.