Deconstructing the Water Effect in Super Mario Sunshine | Hacker News Reader

Deconstructing the Water Effect in Super Mario Sunshine

blog.mecheye.net

314 pointspetercooper29 comments

The author references this in his post, but I think it's worth calling out: https://magcius.github.io/model-viewer/ has models from various scenes in various games, and lets you travel through them.

I think it's pretty cool, as it reminds me how much work goes into making a scene in a video game.

Oh, and if you want to give your browser a real workout, load up Splatoon's Inkopolis Plaza!

Doesn’t work on iOS. Almost surprising given how many 3D things work on mobile when I try them. Oh well.

iOS doesn't support WebGL2 (yet?)

Safari Technology Preview has a WGL2 flag (doesn’t seem to work well enough for this thing yet), so probably yet.

All I see is a blank page on that link.

Very excellent write up, Jasper. Thank you.

Your closing paragraphs are spot on. I remember a magazine review of Metroid Prime 3 said "Wii games aren't supposed to look this good." Supposed to? Said who? Nintendo's technique, process, and approach to design and development shows a lot of passion for the medium. It shines through in how beautiful each and every Nintendo made game performs on such small hardware.

Nintendo games capture your wonder and imagination. Technical bits like this are why, and how, they are able to do it.

I was actually just reflecting last week on Nintendo's approach to the console wars and how good of an idea it was for them to not chase higher power and graphics.

These tricks they've used are truly awesome and the way they construct their games less for realism and more for the joy of the game has meant they've always stayed more mainstream than an Xbox or Playstation ever has, starting in particular with the Wii.

I've gotta say these tricks are super cool. Makes me wonder how tricks like this could be brought over into mobile phones with their similarly limited power (though differently capable architecture).

> and how good of an idea it was for them to not chase higher power and graphics.

The GameCube (the console that Super Mario Sunshine was released for) was actually quite comparable to the competition at the time (Playstation 2 and the original Xbox). It was during the following console generations (starting with the Wii) that Nintendo no longer aimed to match the others' raw horsepower.

Yeah, the GameCube was more graphically impressive than the PS2 and very competitive with the Xbox.

Sadly, it often got shit cross-platform ports that didn't take advantage of the GameCube's capacities.

Here's a similar write-up about the water effect in Wind Waker: https://medium.com/@gordonnl/wind-waker-graphics-analysis-a0...

This is excellent. I originally saw just the water effect (probably mentioned on HN) but after reading through it again it seems he also described much more - fire animation, link's facial expression. The tricks used by the developers are (to me) very neat and the overall effect is impressive given the console was out in 2001

[Ab]using mipmaps to do stylized distance-dependent texture blending is a neat trick!

Wow, I didn't realize that I can click and drag in the examples. That's pretty cool!

The webgl examples don't seem to be working :(

Can you go to https://magcius.github.io/model-viewer/embed.html#sunshine_w... and look for the console output? I've heard reports of GitHub throttling me...

It's probably not GitHub, it's probably because of https://caniuse.com/#feat=webgl2

BTW, in case you're curious, here's how the WebGL 2.0 unavailability is represented in Safari 11.0.2 on macOS 10.12.6, according to the Developer Console:

[Error] Unhandled Promise Rejection: Error: Can't find variable: WebGL2RenderingContext Evaluating https://magcius.github.io/model-viewer/render Evaluating https://magcius.github.io/model-viewer/viewer Evaluating https://magcius.github.io/model-viewer/embeds/main Loading embeds/main (anonymous function) (system.js:4:231) promiseReactionJob

They appear to be using WebGL 2, which works in Firefox and Chrome but not Safari or Edge.

Ah, I didn't realize that WebGL 2 had such rocky support. I'll look into porting back into WebGL 1, but I would require OES_vertex_array_object and searching online it seems to have as spurious support as WebGL 2, so I'm not sure it would be a huge improvement.

For now, I'll look into adding error messages for people that cannot initialize WebGL 2.

And only if your GPU/driver isn't blacklisted.

Not sure who downvoted the parent comment. Vouching for this, because: It seems the examples are using WebGL2, which (according to https://caniuse.com/#feat=webgl2 ) is only on by default in Chrome & Firefox (and can be enabled in Safari).

So, if you're not seeing the examples, and you are _not_ using Chrome or Firefox, then you should try opening the site on that.

P.S. I really do not want to start a discussion on features not being in some browsers or others.

For anyone who is curious but cannot render the WebGL2 examples, I've just created a video of me scrolling through them: http://no.gd/mariowater.mp4

Thank you! I've wanted to create backup videos as a fallback for people who cannot get the demos to work, but I haven't been able to get recording working properly.

Well in case this helps at all, I've just created (not very optimized) animated GIFs of them all: http://no.gd/mariowater/

If you decide to use them, I'll leave them there as long as it causes no bandwidth issues, but you might want to mirror long-term :-) (and run them through an optimizer)

Thank you! I mirrored them to my own hosting and linked them at the beginning of the post.

Awesome - go team HN! :-D

This freaking game was in my top 3 gamecube games for sure. Memories...

That effect was so beautiful when I first saw it in the summer.

I have to say my son played that game. It taught him how to clean things even if he was not the one who messed them up. Plus he had fun flying with the water hose in the game.

Reply on news.ycombinator.com