13 ms·
WebGL Water
- arpu 5y agocheckout webgl2 based https://vrland.io https://vrland.io
- astlouis44 5y agoThis demo is more recent, and FAR more impressive in my humble opinion: https://doom-portal-in-webgl.vercel.app/ https://doom-portal-in-webgl.vercel.app/
- kingcharles 5y agoThe fact that this runs like a dream in my browser on my $300 Acer laptop, on my second monitor, is actually unbelievable.
- astlouis44 5y agoYeah pretty amazing. You should respost it to HN!
- kingcharles 5y agoYeah, those guys are gonna love it!
- lukebitts 5y agoWhat’s more impressive about it? Two static lights and some normals maps, compared to caustics, wave simulation and physics. One of these is much harder than the other, in realtime no less
- astlouis44 5y agoDid you put your glasses on..?
- lukebitts 5y agoClearly I’m talking about the technical aspects of the demos. Not a lot to discuss if you think one is prettier than the other
- pjerem 5y agoThis lags a lot on my computer
- t8y 5y agoThis is only possible in WebGL 2. There's a texture fetch in the vertex shader for the particles. The water demo is so impressive because it runs in WebGL 1 (Though it needs partial derivatives)
- acd10j 5y agoThis does not have any water simulation ! how is it comparable?
- Narishma 5y agoI only get a black screen.
- ChrisMarshallNY 5y agoThat’s awesome! I’m running it on an older iPad Mini (Safari, on the latest OS), and it works fine.
- sush1612 5y agothis was my college 3rd year project in C back in 2004
- waynecochran 5y agoThis is very cool and very old.
- hotdog_machine 5y agoThis is a nice effect, I build something similar https://www.youtube.com/watch?v=dQw4w9WgXcQ https://www.youtube.com/watch?v=dQw4w9WgXcQ
- firloop 5y ago(2011) Previous threads: https://news.ycombinator.com/item?id=7264103 https://news.ycombinator.com/item?id=7264103 https://news.ycombinator.com/item?id=2884141 https://news.ycombinator.com/item?id=2884141 https://news.ycombinator.com/item?id=8867979 https://news.ycombinator.com/item?id=8867979 https://news.ycombinator.com/item?id=14432809 https://news.ycombinator.com/item?id=14432809
- steve_adams_86 5y agoThe first time I saw this I was in awe of how far we’ve come, realizing the first 3d rendering I ever did took several seconds and was accomplished within DOS. Now we have things like this in the browser running in real time. Since then I’ve had my mind blown several more times, but this demo has a special place in my mind. I was so excited at the prospect of WebGL.
- kingcharles 5y agoAre you talking raytracing or real-time? I loved POVRay in the early 90s for raytracing. It blew my mind. As a little kid in the 80s, John Lasseter was my hero; I had a picture of Luxo Jr I used to eye regularly. By '92 I had built a whole software 3D renderer in x86 and had the T-Rex from Jurassic Park stomping around in real-time on my 286.
- dahart 5y agoThat suddenly brought back a memory of the first 3d rendering code I did - it was written in Basic on an 8086 machine running DOS 2.1. Not only did it take several seconds to render, it was only an unshaded wireframe line drawing. To be fair, there were techniques available at the time to make it quite a bit faster that I didn’t know. But it still blows my mind a little bit every time I think about how far things have come since I was a kid.
- sillysaurusx 5y agoIt's interesting to think of the reasons we don't have browser-based 3D renderers. Sure, WebGL exists. But it seems like the promise fizzled out, and I'm not quite sure why. Maybe it's as simple as "Steam is the money pipeline, and everyone makes native games on Steam."
- pjmlp 5y agoEasy, so many reasons beyond just blaming Apple, - WebGL is a subset of ES 3.0, when the hardware can do GL ES 3.2 - WebGPU, when it arrives sometime during 2022, it will be a 1.0 MVP of the features from Metal, Vulkan and DX 12, with yet another shading language that looks like a mix of C++/HLSL/Rust, WGSL. - If you just want compute, now WebGPU is the only option, although GL ES 3.2 has it. After two failed attempts from Intel, Chrome folks managed to force everyone to use WebGPU instead, so that is ready when WebGPU is ready. - Lack of tooling, to debug WebGL you have basically to debug the browser process and try to track down your 3D calls from the browser own ones (there is a SpectorJS, which is quite simple when compared against something like Pix or REnderDoc) - Browsers black list consumer's hardware/software, so content producers have no idea how well it actually runs. - Indie game development moved from Flash into mobile, where tooling is much better. Finally, I leave you the Flash demo for Unity 3 using CrossBridge[0] and Stage 3D [1], back in 2011. https://www.youtube.com/watch?v=UQiUP2Hd60Y https://www.youtube.com/watch?v=UQiUP2Hd60Y [0] - https://adobe-flash.github.io/crossbridge/ https://adobe-flash.github.io/crossbridge/ [1] - https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage3D.html https://help.adobe.com/en_US/FlashPlatform/reference/actions...
- mobmunk823798 5y agoI tried to do mobile web gamedev and found it impossible: both Apple and Google break mobile web games in different ways, I presume because it could threaten the 30% cut their mobile stores get. For example, the HTML5 Minecraft I've never seen run properly in a mobile web browser: https://classic.minecraft.net/ https://classic.minecraft.net/ Mobile Safari: - Forever lacked >WebGL 1.0 - WebGL very slow compared to native - Won't let you use accelerometer, motion control, etc., because "Privacy" (but privacy loving Apple was totally going to scan our iPhone photos until we all raised hell...) - Web Audio stack breaks games in interesting ways desktop doesn't. "Oh, we don't let you load .mp3 audio samples by default like desktop browsers can...." Android Chromium: - Has 200-300ms audio latency on many devices. Here's a demo where touching/clicking the squares should have instant response (try it on desktop) but many Androids have the lag: https://webaudiodemos.appspot.com/TouchPad/index.html https://webaudiodemos.appspot.com/TouchPad/index.html
- jallirs 5y agoThis works on my iPhone in chrome. I really like that. I am aware of the fact that it’s old. The fact that it still works in chrome on my phone makes it more awesome. I’m sure it’s probably elegant and awesome under the hood to make that work. Going to take this positive feeling, eat and ice cream bar, rub my tummy, watch some Babylon 5 and go to sleep with all of these happy feels. :)
- Ocha 5y agoIt doesn’t matter that you are using chrome. All browsers on iOS use safari under the hood.
- jallirs 5y agoMy tummy is still being rubbed and I’m over here with all these happy feels. You should get ice cream too.
- pdenton 5y agoYou're cute, thank you.
- kennyadam 5y agoPlease keep this reddit-tier lack of contribution to the discussion on, well, reddit. It's bad enough that discussion over there is flooded with puns, song lyrics and people calling everything wholesome, do we really need to drag every discussion forum on the internet down to that level?
- cloogshicer 5y agoComments like this that spew negativity don't make HN a particularly inviting place either. Remember there's a human sitting on the other end.
- maccolgan 5y ago
- adamnemecek 5y agoIdk why this got so much attention.
- iamcreasy 5y agoBecause beauty is in the eye of the beholder.
- abdusco 5y agoI know it's not meant to be 100% perfect simulation of water, but the lack of air bubbles, or the waves not growing in amplitude when I smash the sphere in the water makes it feel really dense and off.
- Snetry 5y agoI remember looking at this a decade ago with an old Sony Xperia phone and just being amazed at the possibilities of the web. 10 years later it still looks as good as I remember
- foobarbecue 5y agoReading this on a sony Xperia mini. Still my daily driver. Can't belive how many weird looks and "what is that thing???"s I get.
- pjmlp 5y ago10 years later it is still the same API, in spite of the hardware progress, which is kind of sad.
- thanatos519 5y agoThis is still my go-to demo for making sure my WebGL is working properly.
- aasasd 5y agoKinda funny that if I move the ball out of the water slowly, it generates a lot of waves, but if I shoot it in the water or out, it's just a small wave. A few times I was able to yank the ball in or out with no trace at all—though that can perhaps be chalked up to the cursor moving too fast to register the intermediate positions.
- sushsjsuauahab 5y agoThis can be solved by doing the following: instead of checking "currentPosition" and "futurePosition" for a collision per frame, instead compute a sphere using those two values as bounds, and check if there are any collisions within that sphere
- Vogtinator 5y agoBy converting the whole ball movement into an object, you end up with a "pill".
- MH15 5y agoThe parent is talking about Continuous Collision Detection. A pill would be similar to the end result, but only at speed.
- zurn 5y agoI just went through comments from all the times this has been reposted in the past 10 years, and this is (so far) the first time there aren't any complaints about not working in their browser! I'm counting just the submissions that got >10 comments. The previous time, from 2017[1], was already quite good - there was only a single complaint, and that was about someone missing a WebGL extension this needs for floating point textures. [1] https://news.ycombinator.com/item?id=14432809 https://news.ycombinator.com/item?id=14432809
- WithinReason 5y agoI get: 400 Bad Request, You have attempted to access this site via TLS (HTTPS), but it is not configured for TLS access. Probably because I have "dom.security.https_only_mode" enabled in Firefox
- Tade0 5y agoLet me be the first then: Doesn't work on my Galaxy S8 - "This demo requires the OES_texture_float extension", so I guess it's the same issue. Truth be told the phone is relatively old, but then again I haven't switched because it... still works and I assume many other owners made the same choice regarding their devices.
- ashfromstralya 5y agofriggen beautiful !
- ashfromstralya 5y agoMate, this is beautifal !
- marcodiego 5y ago> This demo requires a decent graphics card and up-to-date drivers. This maybe old. Runs perfectly on my 2013 dell laptop.
- f00zz 5y agoAt first I thought it was just doing bump mapping on the water surface (with some hack for the caustics)... then I dragged the sphere. Pretty impressive.
- XCSme 5y agoDoesn't work in Brave on Android (S10): Uncaught Error: This demo requires the OES_texture_float extension
- mkl 5y agoI'm disappointed "toggling gravity" doesn't actually toggle gravity, just changes the density of the ball. Edit: Looks like I'm wrong about the density. When you load the page the "gravity" of the ball is actually off (but it's at the bottom, so it looks like it's on and dense), and pressing G lets it float up. It's not turning off gravity though. If there was no gravity, the water wouldn't pool at the bottom, so I was hoping to see blobs of water floating around.
- darkwater 5y agommmh first thing I tried was putting the ball outside the water and it levitated there. Technically speaking yeah, it could still just be density even in that case, but it would also make sense as gravity (indeed the ball felt into the water as soon as I activated gravity).
- TobTobXX 5y agoHuh? When I toggle G, the ball is locked in place. Not exactly what I'd call "toggling gravity" (except for very large masses), but it's sufficiently useful (I can toggle G and then drag the ball our, wait for the water to settle and then drop it with G).
- bruce343434 5y agoVery impressive, even more so at its time. I still don't know how it was done.
- mythz 5y agoSo the cool thing about this demo was that I remember when it was first submitted many years ago and thought it a cool demo that demonstrated the viability of WebGL which I expected to take off a lot quicker than it has. But I also recently came across madebyevan.com again by accident after researching the backing of different npm projects to assess which ones had good momentum or commercial backing behind them to assess their long-term viability, and noticed a lot of npm projects (~2M weekly) relying on esbuild [1] as a fundamental part of their build system due to its amazing performance [1]. All good except that the foundational part of many npm projects feature is mostly being maintained by a single developer [2], a @evanw who was also prolific in responding to esbuild's issue catering for different peoples issues & feature requests. I didn't think this level of investment in a popular OSS project was sustainable and hoped they had good sponsorship behind them, but was surprised that @evanw [3] didn't have sponsorships enabled which I thought strange as most authors of popular npm projects have good sponsorship, but upon further research it's because Evan Wallace's day job is as the CTO and cofounder of Figma - a popular company with ~10B valuation. Which is great in that esbuild isn't at risk of being sporadically abandoned from its lead developer joining a new/demanding startup, on the other hand a foundational project in npm's ecosystem is being developed in the spare time of a Co-founder & CTO of a ~10B Co - who also creates great demos :) [1] https://github.com/evanw/esbuild https://github.com/evanw/esbuild [2] https://github.com/evanw/esbuild/graphs/contributors https://github.com/evanw/esbuild/graphs/contributors [3] https://github.com/evanw https://github.com/evanw
- ChrisMarshallNY 5y agoObligatory XKCD: https://xkcd.com/2347/ https://xkcd.com/2347/
- danielvaughn 5y agoI'm not super familiar with this area, but from my vantage point, it seems like WebGL didn't really take off because of the awkward timing. Right around the time it was being developed, the industry started working on a replacement for OpenGL. Hopefully WebGPU fares better, because I think 3D web experiences are full of untapped potential.
- jmrm 5y ago"This demo requires a decent graphics" Even being from 2011, the fact that works right on a 2017 low end phone with low battery, is totally mind blowing
- noah670 5y agoThis was impressive a decade ago
- slmjkdbtl 5y agoSo a lot of these are powered by the performance of GPU, is there any water implementation that's suitable to run on a CPU (doesn't have to realistic as long as it conveys the message)?
- bravetraveler 5y agoFun trick: pause it with spacebar, then click/wiggle over an area until there's a sky-high wave Then unpause, watch the ripples