Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A Marble Madness-inspired WebGL game we built for Netlify

5-million-devs.netlify.com

Post reply on HN
Print view View original

1–10 of 243 posts

Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#1

Post by franck »

Hello HN! We’re a small creative studio specializing in real-time 3D experiences. Netlify approached us to design and build an interactive experience to celebrate reaching 5 million developers.

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!

[1] https://threejs.org

[2] https://rapier.rs

EDIT: More info on this project here: https://www.littleworkshop.fr/projects/5milliondevs/

Show HN: A Marble Madness-inspired WebGL game we built for Netlify
5-million-devs.netlify.com

Re: Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#4

Post by jetbalsa »

guigui wrote: post #2

I'm one of the developers who worked on this project. Happy to answer any questions. More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/

add a built in timer and I bet people would speed run this thing

Re: Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#5

Post by guigui »

jetbalsa wrote: post #4
guigui wrote: post #2

I'm one of the developers who worked on this project. Happy to answer any questions. More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/

add a built in timer and I bet people would speed run this thing

Thanks for playing. Actually, your time is displayed once you finish the experience (there are 5 levels in total).

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.

Re: Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#6

Post by guigui »

solatic wrote: post #3

Any chance this could get open-sourced? This seems like a great example of a lot of stuff for which there are few tutorials currently.

No plans to open-source at the moment, but we intend to share some behind-the-scenes info in the future.

Re: Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#8

Post by itronitron »

guigui wrote: post #2

I'm one of the developers who worked on this project. Happy to answer any questions. More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/

There is a glitch on the momentum level, where the marble gets stuck behind a wall after dropping into a hole.

Re: Show HN: A Marble Madness-inspired WebGL game we built for Netlify

#10

Post by guigui »

tempworkac wrote: post #7

Could you explain more on: > 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?

We use the CSS3DRenderer from Three.js which automatically applies CSS transforms to DOM elements.

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

Post reply on HN