Summer Afternoon – A WebGL Experiment
summer-afternoon.vlucendo.comI looove this. I agree with the other commenters that this has a special feeling. And that the future for web games is bright. (For as long as Google is spearheading features with Chrome.)
I guarantee this game wasn't built with Unity: 1) Unity bad for building WebGL games. It does multiple conversions to make a WebGL build. Unity offers live editing in its application, but that doesn't apply to web; whereas modern threejs/babylonjs systems offer hot reloads. 2) And Unity is just unpleasant and bloated generally, for the last few years.
Plug for my game[0] if someone wants to see another WebGL experiment (that I devoted 10 years to...better not to ask lol). PS - WebGL supports WebXR, I've been in my world in VR!
0: earth.suncapped.com
So happy to read in a top comment on HN that the future for web games is bright :-) We've been betting on it for a while[0] and it should only get better with WebGPU.
Unity has issues indeed, unfortunately. The developer experience is shit. If you want to mitigate the user experience, you can use our open-source optimization package: https://github.com/CrazyGamesCom/unity-optimizations-package (feedback welcome!)
WebGL2 has just recently become production quality on all browsers, take all the WebGPU talk with a pinch of salt if you're interested shipping sometihng in the next few years.
(Practically, both are low level APIs and you'll probably be using something that can reasonably easily switch between WebGL2 and possible future WebGPU backends once they finish the spec and implementations start shipping and stabilizing and waiting for Safari)
If you look at it from the perspective of “when will I be able to support 99% of users”, it will absolutely take a few years, but from the perspective of “when will a WebGPU game have distribution to more people than a Steam game”, it could be a lot sooner. Gamers generally aren't the same people stuck on enterprise-pinned old browser versions, so once Chrome + Firefox have support the chances of someone in the target audience for a 3D game having a WebGPU-supporting browser on their system are pretty high.
(I’m assuming you’re talking about distribution rather than tooling, but I acknowledge the tooling will take a few years to catch up.)
WebXR is going to take off behind these advances in WebGL like WebGPU is supported on Chromium 113 in the next few months and there are claims of 3x and higher perf. Its big draw card is supporting desktop/mobile/XR all at the same time so if you can work within its limits then definitely the way to go however you choose to get there (Unity or Three/Babylon or Wonderland or xyz).
> I guarantee this game wasn't built with Unity
It looks like you're right - the announcement tweet credits threejs and houdini [1]. I measured 13MB downloaded, of which most are fairly bloated "assets" (here's a 3MB blurry png, for some reason [2]), so the "engine" itself looks to be less than 1MB.
[1] https://twitter.com/vlucendo/status/1614983883866390530 [2] https://summer-afternoon.vlucendo.com/assets/images/clouds_t...
> here's a 3MB blurry png, for some reason [2])
That blurry png may be the terrain, height map?
The filename says "clouds" but either way, whatever it's used for, the information in it really doesn't need 3 MB of pixels.
Agree that close to the metal threeJS gets you best performance but don’t sleep on Unity WebGL.
They announced at their Unite conference a few months ago they were gonna add proper mobile support for it. Nice to see them investing.
Also shameless plug for [https://spatial.io]. With Unity’s URP we can get near AAA visual quality in the browser. Plus hosted multiplayer, chat, native web/mobile/vr apps, etc.
The future is bright for web and no install! And with App Store’s 30% cut the economic winds are at our back!
They've been saying they'll improve the WebGL experience for as long as I can remember.
Agreed. Not only that loading textures etc the whole pipeline is insanely complex.
Unity is useless for web games. Period. I have the scar tissue to prove it. The whole asset management pipeline is just insanely hard to use. Can’t collaborate or even source version control across devs. Compilations suck. The whole box in a box is dumb. It wastes real estate. So much insane friction. Just because of 3d artists and fan boys the whole eco system is a waste of time. Open web tools with hot loading for devs is yeaaars ahead of Unity. And their performance will always suck.
I'll plug mine too, it's got multiplayer/deathmatch etc, and I recently fixed multitouch and a lot of WebGL performance issues.
I can concur with other comments in this thread that there is something strange going on with iOS and WebGL. Just checking now though, and it does seem to run a little better after the iOS 16 update.
If you like this, you should probably try out Alba.
Looks wonderful https://www.albawildlife.com/
My 7-yr-old just played through it again. On the first run I asked her to read out all text loud, you know, calling it educational for a second-year reader :-)
> Unity offers live editing in its application, but that doesn't apply to web; whereas modern threejs/babylonjs systems offer hot reloads.
It doesn't have to. The idea is that you'll develop the game as a desktop target, with all goodness such as live editing, and then just export the game to WebGL as a final step.
My Intel i7-4790K is able to run this at 1080p and 30 fps (specifically 60 with drops to 30), on a build of Chromium that has hardware acceleration disabled.
I don't know if this is thanks to the speed of the app or Chromium's software renderer or just (semi-)modern CPUs, but I am super impressed. I had no idea you could do something like this without a GPU!
Edit: Whoops, I lied! I knew something had to be wrong here, so I checked. GPU Compositing is disabled. However, chrome://gpu reads "WebGL2: Hardware accelerated but at reduced performance" (whatever that means).
When I fully disable hardware acceleration, performance dips to something in the range of 1 fps. So, basically what you'd expect, and a lot less interesting!
It runs quite well on a phone too. Impressive.
Indeed quite usable on a Nokia 7 Plus from 2018, which doesn't happen always, even though GL ES 3.0 represents 2011 GPUs designs.
Ya iPhone 7 Plus here, it works perfectly well and is very smooth.
Flawless on Pixel 4 (Firefox)
On Mull (Firefox fork in android ) it says Webgl 2 is missing.
On Fennec in android it works flawlessly.
It runs flawlessly smooth on Safari on a MacBook Air with M1!
> threejs, gsap, svelte and houdini mostly @vlucendo
Looks better than Meta's metaverse.
It does, I love the peaceful vibe it has. But to be fair this is conveying a lot less information about the individual players than Meta does. A "metaverse" is much harder problem than people imagine.
Kids in Roblox, Fortnite and Minecraft have all built a better metaverse than Zuck.
I've had more fun playing super basic Roblox games with my nephews than I can imagine myself ever having with meta.
Zuck's metaverse feels like the Doctors Office equivalent of a nightclub.
I think Zuckerberg is right about the metaverse. Unfortunately (fortunately?) Meta likely won't be where the metaverse develops, unless they can purchase it.
I still use and like Instagram, so they appear to be capable of keeping them alive. But the established industry players, including the Zuck subsidized ones, largely don't seem positioned to "get" VR/AR. I don't know what it is, but I know it's not what they have so far.
Outside of fitness apps the Qwest world is still just a fancy store interface. I use it because it's still among the best, but it certainly doesn't give me the feel of it becoming a "verse" of any sort. I really want it to be, but the folks working at Meta largely don't seem to be the sort of creative non-conformists it'll take to crack that nut.
It's a non-problem that's very hard to solve indeed.
> A "metaverse" is much harder problem than people imagine.
I agree that it's complex, but probably not that complex not to have legs :)
Yeah, the characters have legs!
If I implemented avatars in social VR I would also avoid legs. No legs is better than bad legs and good legs is very hard to achieve.
So the "no legs" thing is the correct design decision in many cases.
> No legs is better than bad legs and good legs is very hard to achieve.
What do you think of the leg quality in this game?
That's an entirely different problem to the one faced with VR avatars. You can make in leg position. With VR avatars, you're trying to infer leg movement to the head and hands movement of a human in 3d space.
"Stop chatting and start buying things!"
I love the color palette and music, really relaxing and it was a nice surprise to see it is multiplayer
Works really well on Firefox for Android too!
No sound or music for me on mobile Safari (iPhone) but rendering is smooth.
I had music on my iPhone in mobile Safari. But the ringer switch had to be on and I had to press the top right sound button.
I had sound on iPhone until I unplugged my headphones, then I couldn’t figure out how to turn it back on.
Works great on desktop Safari, too!
Insanely cool demo. I’m amazed I can open this and it run at 60fps within a ~~second~~ on my iPhone. Crazy the power that I have with it, when it spends most of its time in my pocket or playing music.
I wish we could show some of the early computer engineers some of this kind of thing.
> I wish we could show some of the early computer engineers some of this kind of thing.
I often fantasize about this, just knowing even what 10-year-old me would have thought about it.
The 80s is the perfect sweet spot for my go-back-in-time-and-share-modern-tech fantasies. It's recent enough for people to know about computers but just barely enough that they'd be absolutely blown away.
I’m curious, how can you tell it runs at 60fps? Is there some debugging that can be turned on?
They would be amazed by what is possible and appalled by the things we do with all that power.
It crashed the browser or the os on my iPad. I was back to login screen.
most of early computer engineers are alive and doing well
Love how smooth this is, even on a phone! Really well done, not just from a technical point of view, but aesthetically as well.
As I ran through the trees, with the sunlight changing, it brought back some little flashbacks of me doing exactly that when I was that height! Very cool!
That we could only communicate with each other by excitedly jumping around - and still managed to explore together - reminded me of childhood memories playing with other kids in Sweden as a tourist who didn't speak their language.
Vaguely reminds me of https://tale-of-tales.com/TheEndlessForest/index.html which had a similar idea.
I too have such memories, and even the colour scheme aligns with my memories of Stockholm in the summer .. javla sjuit bolla ..
After 15 minutes of trying I managed to reach the roof of the house you can climb, and managed to take a cool screenshot :) https://imgur.com/Vq8i8Yz
Underrated thing that I haven't seen mentioned is how great the gameplay is, I was able to play without a mouse using only arrows and space bar, and the camera never felt clunky, which is rare for a 3d game. Haven't tried on mobile though
Neat. I got up there too, and after a while someone noticed me and climbed it too.
Also, if you jump onto the clothes rack thing on the same building and go as far towards the road as you can you will get stuck in the falling animation.
Haha yeah I also noticed this thing with the clothes rack
It works pretty great on mobile too!
I saw a distant figure running straight towards me through the woods and thought this might be one of those secret horror games, until I realized it was multiplayer. :P
yeah I thought it was a hint lol, cool
had to watch the motions to realize it wasn't scripted
Very soothing somehow. It is interesting to see other players around as well. I wish I could send twitter-like shout messages.
I found the sloth secret literally by mistake, that one was pretty difficult
I am guessing they are not other players live but probably recordings of older sessions, I did try to follow a few people and jump around to communicate but couldn't verify any response... quite a beautiful project in any case
Someone followed me and we jumped together!
If this was preceded by running in circles on the beach that may have been me :)
I think it was in the woods!
If you played during the last 10 minutes or so, it might've been me!
If it was then thanks for the fun!
Has the seeds of a place that I'd like to keep visiting. I've already returned twice. First time I visited, I started posting here interesting things I found. But then realized these are secrets that visitors should stumble upon on their own so I deleted those comments.
Grow this into a more interesting place and many will come and visit. Or buy beachfront.
Can anyone recommend some chill games like this one, seems like an ok game for a kid to play. I remember the adventure game from the 90s where I was playing a little dog.
collating some other replies and adding my own recommendations:
more exploratory:
https://annapurnainteractive.com/en/games/journey
https://curvegames.com/our-games/proteus/
more arcady:
Townscaper is pretty chill: https://oskarstalberg.com/Townscaper/
This kinda reminded me of A Short Hike. It's a great game
"Shin chan: Me and the Professor on Summer Vacation" is a relatively new game on steam and switch. And of course the major slice of life games like stardew valley, animal crossing, harvest moon, rune factory etc. The Japanese quite like these stuff.
As far as graphic and feel goes, The Legend of Zelda: The Wind Waker maybe?
Wind Waker is nice, but it has a lot of sailing. Breath of the Wild would be a better game if you prefer walking/horse riding.
"Where is my water" is really nice, although something else
Just played through Lil Gator Game with my 3.5y old and she loved it.
A short hike. Alba: a wildlife adventure. Alpaca Stacka (free).
This is clearly much more impressive technically since it runs seamlessly on my browser, but visually and tonally it reminds me of a peaceful game called Alba that I played recently.
This is beautiful, and I think I made a friend in there. Amazing that this works on mobile (safari). Any notes on how it was made? Unity?
Safari got WebGL 2 support not long ago :) the future of web gaming is very bright
Threejs apparently
There's a lot of WASM in GUID-named binary blobs though (most of those have one JS file and one WASM file included, some only a JS file).
Does three.js make heavy use of WASM and bundle them in blobs with GUID names?
PS: yes it appears to be three.js, looking at other three.js demos they also have those blobs with one JS and one WASM file in them. I'm surprised three.js uses so much WASM!
I think three.js is pure JavaScript, it may be some physics engine that uses WASM (like Rapier)
Love this.
Reminds me of "Short Trip" https://alexanderperrin.com.au/paper/shorttrip/
HN Discussion from 2017 - posted as "Scenic Tram Ride" https://news.ycombinator.com/item?id=15324954
Oh my, WebGL has come a long way since the late '90s
I think I mean VRML but you know that don't you, you old farts you
Hehe, you're one of those "Senior WebGL developers with 30 years of experience".
WebGL is stuck in 2011 hardware capabilities.
What matters is what people are able to do with its features, basically something like a PlayStation 3.
By the way, I might have some VRML book lost somewhere on my university boxes.
AAA games are way deep into diminishing returns for the last 10 years when it comes to rendering. A 2010 game with good art style can still look great if you run it on a high resolution display, while other games with much more impressive 2010-era rendering technology but poor art style have aged badly.
It makes little sense to reduce the quality of games to their rendering technology and 3D API of choice.
I unironically prefer Valheim's graphics to any AAA game I've played. The scenes it sets are just perfect. I really enjoy the art style in the OP too.
Looking at its 3D requirements I doubt it would be playable in WebGL 2.0.
Except I am yet to see any Web based game with PlayStation 3 like graphics, or to make it even more clear, Infinity Blade.
After a decade of WebGL existence.
I think that's more about asset sizes and loading times than rendering capabilities.
Opening this in Brave on an iPad immediately crashed and rebooted the device. I don't think that has ever happened to it.
Might want to reach out to a security researcher. It could be an exploitable bug.
Safari also has a bug bounty program so this could be worth $$. At least on the Chrome blog WebGL bugs regularly net people bounties.
(Example: https://chromereleases.googleblog.com/2022/08/stable-channel... - the bountied ANGLE and SwiftShader bugs are WebGL. You don't need to craft exploits at least in Chrome's program, just demo crashes that look concerning)
An iOS device crashing and rebooting because of something you open in your browser? Now that's something completely new and unheard of. /s
It is indeed very rare. Can you please explain the sarcasm with some examples?
I made an account just to say me too. (Safari, iPad) never seen that before
Can confirm, opening it in Safari on iPad consistently crashes the device too.
Really nice.
Find it interesting this was posted on HN 4 days ago with no comments now it's top at time of writing. I guess talks to merit of allowing reposts as I would have missed this.
It may well have entered the second chance pool, rather than been reposted.
Very beautiful art style (that matches the evocative title) and works wonderfully on my potato of a phone.
Please make something out if this .
The art style reminded me instantly of Alba: A Wildlife Game, available on most platforms.
I'm amazed how well it works on mobile. So smooth!
Don't be surprised at how powerful modern mobile devices are.
I am surprised especially in contrast to many other "native" apps on my powerful device.
There are a lot of WebGL sites that don’t run nearly as good as this one. It’s not just the device!
My 2017 PH-1 running vanilla Android 9 played this without a single issue. Not only new phones - feels future to me
This has a very similar feel to games from thatgamecompany* who made Journey and Flower.
Love it!
Very nicely done. I really like the stylized graphics and performance seems pretty good.
Secret hints:
1. Animal on roof
2. Animal on tree
3. Large object in trees
4. Beach goer
5. Small wooden fence room
I couldn't find the animal on the roof until I saw another player and thought "how did they get up there?". Great example of how being multiplayer improves the experience.
Animal on tree has me stuimped, I think I'm looking for a sloth someplace but not seeing it.
The sloth is fairly small compared to some other secrets. It's also the same colour of the tree's trunk so it's kind of hard to see for afar.
s/for/from
Thanks for the hints, animal on the roof had me stumped.
Sloth cats alien ufo some alien objects
Those alien objects are actually objects from a Zelda game.
Wow that's great. Nice color palette. Ran on Android Chrome
Really lovely. Reminds me of the Studio Ghibli films.
It’s very cool.
However, it crashed my iPad Safari, the first time I ran it (worked the second time, though).
I was so hoping when I hopped from the railing by the cats to the roof I found a secret :(
> Seems like WebGL2 is not supported by you browser Please update it to access the experience.
This.. is incorrect. If I go to chrome://gpu (I'm using Chrome on Windows!) it says "WebGL2: Hardware accelerated". I have an RTX 3060. There is no reason this shouldn't work.
There's no error in the console for me to go off of, and the source code is packed/obfuscated, so I can't tell what the problem is. I can't tell if it's pre-emptively refusing to run because I'm not on a whitelist, or running into some sort of error.
it works for me, I also have RTX 3060, if I open chrome://gpu I see this:
Canvas: Hardware accelerated Canvas out-of-process rasterization: Disabled Direct Rendering Display Compositor: Disabled Compositing: Hardware accelerated Multiple Raster Threads: Enabled OpenGL: Enabled Rasterization: Hardware accelerated Raw Draw: Disabled Video Decode: Hardware accelerated Video Encode: Hardware accelerated Vulkan: Disabled WebGL: Hardware accelerated WebGL2: Hardware accelerated WebGPU: Hardware accelerated
This is great - so simple but I played for awhile. Love the Straw Hat
I was just checking this on my PH-1 from 2017 and it played very well. I was running around for a bit before I realized how amazing that was.
Ran it right from HN
I wonder.
Since this runs in the browser, does it mean that we could dynamically use different assets based on device and bandwidth?
Or start with lower res assets and progressively get better ones, like jpeg progressive downloads?
Don't stop there. You can also dynamically update the game program by sending WASM/JavaScripts via WebSocket/WebTransport.
WebGL games will have a bright future.
Also, this game is very well designed, I found all 5 secrets and I loved the process :)
Oh! I like the way you think. And you could also only load assets as needed (or, ideally, preload them intelligently).
No they won't, as native and streaming provide much better tooling and access to modern hardware features.
All Flash indie games moved away from the browser, and don't have any reason to come back.
Examples like this one are the exception.
A good developer knows how to utilize the features provided by the tools while endure it's limitations.
Tooling grow as the ecosystem grow, and modern hardware features don't necessarily give you a good game. There are many good games out there don't rely on modern hardware, and yet they are still fun to play.
It eventually comes down to how smart the developers are, not how many modern features gets utilized.
Plus, with help of game engines, a game can run on multiple platforms, including both native and WebGL. Some company might be interested in expanding into this territory.
That is why retrogaming is taking over the games industry.
Yeah. There were so many great indie flash games on sites like Newgrounds. Quite sad that it’s all gone away. I wish flash had been open-sourced rather than just killed off.
Of course, why not?
Neat!
I’ve never done any WebGL so far, hence the question. I’m even more interested now.
Thanks!
This was pretty nice. Went into it blindly, figured it out, then helped someone else find a few things. Felt kinda like a kid for a few minutes.
Nice, I just followed someone and it helped me find a statue in some kind of ruins. I wonder if it was you :)
This runs pretty well on iOS, and looks amazing.
Just one bug I found: after running it for a few minutes, the sound started to distort and eventually all sound came out as static.
Other than that, it’s quite amazing, and I look forward to poking around on it again on my computer.
I made friends with someone else who kept circling around. The look of it reminds me of Boku no Natsuyasumi.
I saw another player perhaps (with the same hat and clothes as mine). is this a multiplayer thing?
I think it is. I saw 5 people.
Firefox developer edition, Linux - I can't give any input. Moving the mouse pointer moves the camera POV slightly, so that it can end up below the ground, but apart from that no keys or clicks are registered.
This is the cutest thing ever
I've managed to get up on the red roof :)
I'm just stuck in the floor on firefox and can't do anything
I had the same issue when I tried at first (on Firefox), but I waited a while and when I tried again, it worked correctly and gave me a controllable character. Not sure if something failed to load the first time or what.
I was a little surprised, but it also worked fine on FF mobile, after ~15-20 seconds loading.
Same, but works in private(no extensions) mode
Really cool experiment. Runs remarkably well on Safari on M2 Air.
Pleasantly surprised how well this runs on my phone.
This is beautiful.
Fun challenge: Get on top of the red roof behind the planters.
Perhaps it's try to recreate this in WebGL
This is beautiful!
I wanted to talk with the other kids, I wanted to go over that hill. I wanted to feel the end of the day and the sunset. I feel the sea is somewhere near.
I’d love to learn more about the tooling used to make this.
The world and music are so beautiful, relaxing, inviting to explore at your own pace. I'd be happy to play it as a full fledged game.
Crashed both Safari and Chrome on iPad Pro 3rd gen :(
Webkit is the only browser engine allowed on iOS. Chrome and Firefox use the same engine as Safari, so blame Safari and Apple. Apple doesn't want browsers to be as powerful as native apps on iOS.
Yeah it’s great. Mix this kind of thing with the advances in AI and we are seeing the beginning of our next tech bull market.
Super cute.
In my firefox I can only jump once though -_-. Clicking out- and inside again let's me do another hop.
I enjoyed finding the secrets. My gf said “this person gets up” after finding a specific “rocky” secret
[SPOILER AHEAD] On mobile it's very hard. You can't jump and go forward at the same time, and there's radius when you turn, so precise positioning is fiddly.
Gotta put that second finger to use while you're running forward!
Didn't work, I've checked.
Huh, works for me in mobile safari on a 2016 iPhone SE.
Wonderfully rendered, in all senses
Very cool experience!
Firefox. Not sure how to select my audio out device. I think it used the wrong one.
That was a lovely experience, I didn't spend too long find the secrets :)
My iphone 11 runs this super smooth… even the touch ui is good, i love it!
Is the code posted for this?
This is how the new Pokemon games should have looked like :D
I really like the art style!
Is this multiplayer? Or are the other "people" NPCs?
Edit: wow, multiplayer.
wonderful! such elegant simplicity of design and crazy that this can load so fast on a mobile phone browser and is multiplayer too! works flawlessly on firefox on ios Found the ufo :)
The incredible smoothness / high framerate is so soothing :)
this is great
the ability to send a message to other players would awesome
Jump in morse code :)
--. .-. . .- - / .. -.. . .- --..-- / -... ..- - / -.. --- ..- -... - / .- -. -.-- / --- -. . / .-- .. .-.. .-.. / ..- -. -.. . .-. ... - .- -. -.. .-.-.-
This is magic, and works beautifully on my phone!
What a lovely atmosphere <3 this is beautiful.
This is awesome the graphics are very relaxing
This is delightful. So smooth on ios safari
This is beautiful!
Sprinting is a bit too slow though.
Seriously beautiful, well done.
Runs smoothly on Galaxy S8
Where is the fifth secret?
you found the cats that you have to jump up the rocks next to the house to get to?
This feels a lot like Alba
First webgl without lags.
This is impressive!
Beautiful graphics.
Very very cool!
Bravo!!
Runs very nicely on Android Chrome. Also nice controls. Floating joystick and tap anywhere to jump.
And nice art style. It has good vibes for sure.
This is nice vut not impressuve. We have had Quake Live on the browser years ago.
Quake Live was a browser plugin that you had to install to play the game. This game is built with web APIs, and runs on any device that has a WebGL-capable browser. It's a zero-install, no-setup, click-to-play game in the literal sense, without any marketing hype.