10 ms·
Rendering photo-realistic glass in the browser
- purplecats 6y agowow that's incredible. one of those things that blow you away so hard, you can hear your heart beats.
- sillysaurusx 6y agoNeat! What's extintionCol1Ra do? It causes the glass to turn into a multicolored jellyfish looking thing, which is cool.
- xingyzt 6y agoTruncated from "extintionCol1Random".
- jessep 6y agoI found this one by the same person even more amazing. It shows the background image being refracted through the glass: https://domenicobrz.github.io/webgl/projects/glass-absorption/ https://domenicobrz.github.io/webgl/projects/glass-absorptio...
- coolspot 6y ago60fps on my iPhone X, impressive!
- a012 6y agoZoom in and frame rate drops to under 20fps
- codetrotter 6y agoZoomed in on iPhone X, still getting 60 fps
- adrian_b 6y agoProbably the GPU and the GPU drivers matter most. On Linux Chromium browser with an NVIDIA GPU, using the NVIDIA Linux driver, the FPS is pinned to 60 no matter what zooms and rotations are done.
- a012 6y agoI tried on Chromium linux too, but probably driver's issue. My machine has Radeon pro card with just amdgpu driver that's bundled with kernel v5.4.
- dawnerd 6y agoMy MBP was absolutely crawling but my iPhone 12 had no problem keeping 60fps. Crazy. That gives me a lot of hope for the new Apple Silicon macs. Edit: But the main link definitely doesn't work well on iPhone.
- neurostimulant 6y agoWere you using safari on your mbp? The performance seem to be better in safari than in chrome or firefox.
- LeonM 6y agoThis has nothing to do with the processor in the system. If anything it is a bug that makes the rendering very inefficient on MacOS / your browser. The Intel processor in your MBP is still leaps more powerful than the processor in your phone.
- saagarjha 6y agoIn sustained multithreaded tasks, maybe, depending on how much money you paid on either and when you bought it.
- flohofwoe 6y ago> The Intel processor in your MBP is still leaps more powerful than the processor in your phone. Maybe the CPU part, but definitely not the integrated GPU (and this demo is all GPU).
- Fumtumi 6y agoWhere do you take your assumption? I was trying to find anything specific about the iphone 12 gpu and i only found the same Apple 4 Core GPU. I was not able to find any benchmark comparision either. I found this, which is very unspecific: "We didn't see as big a leap in graphics performance. On the 3DMark Wild Life test, the iPhone 12 hit 39 frames per second, while the iPhone 11 Pro Max scored an even higher 42 fps. But when we switched to the off-screen version of the test, the iPhone 12 Pro notched a higher 51 fps to the iPhone 11 Pro's 42 fps." So if you don't have more details then i do, the basic assumption, you should make, is that its much easier to put much more silicon in a MBP than in a Smartphone and the chances, that a MBP is loosing against a Smartphone, would be very weird and very unrealistic. And this has nothing to do with if someone likes apple or arm or whatever. It is also not very easy to compare something like this if you don't know if there is a feature set difference and if one GPU can control 2-3 displays and the other only works for one display.
- winter_blue 6y agoStrangely, only ~50 fps in Google Chrome on my ultrabook laptop -- which has a Ryzen 7 4700U with Vega 7 graphics. The Ryzen 7 4700U's integrated Vega graphics is far more powerful than Intel's UHD and Iris, and even more powerful than Nvidia's MX line of GPUs (MX150, MX250, etc). Strange that it only got ~50 fps when someone else on this thread with a Intel graphics got 60 fps.
- janekm 6y agoIt's not doing the same rendering on iOS as on the desktop. The desktop version allows the body to be seen through the arm while the mobile version doesn't (looks really like a variant of a cube map on mobile).
- semi-extrinsic 6y agoThat was even cooler, agreed. Although on Firefox Mobile I need to turn down the gui1_x parameter to almost zero, otherwise I get these weird red polygon artifacts. And I get 15-ish fps. Chrome on the same device is flawless at 60fps.
- deleted 6y ago[deleted]
- colordrops 6y agoI see the polygon artifacts on chrome on android.
- Wistar 6y agoVery clean and at least 60 fps in Chrome on a 3 year old iPad. Amazing.
- globular-toast 6y agoI get the same red polygons and low fps on Firefox and Chrome on my phone.
- jiriro 6y ago60 FPS on iPhone SE (1st gen) zoomed in or out. Cool.
- headmelted 6y agoAm I really naive to be so impressed by this running at 60fps on my Intel Iris Plus 645 graphics? This is a potato-tier GPU and I can't make the frame rate drop below 60 with this demo.
- porker 6y agoI am impressed. After a graphics card failure I'm running on Intel® HD Graphics 4600. It's more than adequate for work, but in this demo the frame rate started at 21fps and dropped to 15fps
- aidenn0 6y ago45FPS on my 1050Ti, so it beats me.
- pjmlp 6y agoYes, because you should compare to how a similar DirectX 12, OpenGL 4.6 or Vulkan 1.1 like demo would achieve in FPS. https://www.techpowerup.com/gpu-specs/iris-plus-graphics-645.c3486 https://www.techpowerup.com/gpu-specs/iris-plus-graphics-645...
- ChrisMarshallNY 6y agoI agree. It is...um...smooth as glass on my iPad. Much more so, than the OP.
- Pulcinella 6y agoIs this actually refracting through the glass? The distortion doesn’t seem quite correct. I wonder if this is actually a clever cheat. Perhaps it’s actually not transparent, but a mirror surface and the cube map for reflections is actually just the skybox inverted. So instead of actually looking through the glass sculpture, it’s reflecting the inverted skybox.
- CyberDildonics 6y agoIt isn't about inverting the skybox, it is done in the same way as reflection mapping, but instead of reflection ray directions you use refraction ray directions. The reason these can look off is because the image is flat and on a cube or sphere and doesn't have depth and exists infinitely far away. Sometimes cubes or spheres with a defined size are used to give a little more plausibility.
- layoutIfNeeded 6y agoOf course it's not a real, physically accurate refraction. That could only be done via raytracing (or maybe some obscure depth-peeling technique, which would be super slow).
- Jasper_ 6y agoAbusing the framebuffer contents to do convincing-unless-you-stare-closely-at-them reflections is a time-honored tradition stretching back to the early 2000s. Nintendo pulls off this effect a couple of times in this shot: https://noclip.website/#smg/HeavensDoorGalaxy;ShareData=AY,m79a;TO8=kB:9sLRjXA$3GQ?k+ZUulYx8]bTS=!@a%7dUug3%7d8,X%7bo9Q7tZ=a~ https://noclip.website/#smg/HeavensDoorGalaxy;ShareData=AY,m...
- rychco 6y agoFrom the username & submission history, I'm guessing you're the author of noclip.website & the associated youtube videos explaining various graphics effects in SMG/WW. Love your content!
- esperent 6y agoIs that website supposed to work on mobile? I get a couple of microscopic icons on a black background and a message about a non-responsive script after a few minutes.
- Namidairo 6y agoIs that... Guan Yu? It is a little refreshing to see something other than the Utah Teapot for once.
- k_sze 6y agoYep, I'm pretty sure that's Guan Yu. For those wondering, Guan Yu was a general of legendary prowess during the Three Kingdoms period of Ancient China. He is deified and represents loyalty and justice. Ironically, in Hong Kong, both the police and the triad worship him. https://en.wikipedia.org/wiki/Guan_Yu https://en.wikipedia.org/wiki/Guan_Yu
- blaesus 6y agoUsed to work in a newspaper in Hong Kong and we have a statue of Guan Yu as well... Anecdotally, the triad worships Guan Yu with black shoes while the police worships him with red shoes.
- k_sze 6y ago> the triad worships Guan Yu with black shoes while the police worships him with red shoes. That's a detail that I did not know!
- Dirlewanger 6y agoYup, that glaive is unmistakable. I knew that hours of playing Dynasty Warriors would pay off.
- k_sze 6y agoThat glaive (more correctly "guandao") has a name in the Romance of the Three Kingdoms, btw: 青龍偃月刀 (Green Dragon Crescent Blade), also known as 冷艷鋸 (Frost Fair Blade). https://en.wikipedia.org/wiki/Green_Dragon_Crescent_Blade https://en.wikipedia.org/wiki/Green_Dragon_Crescent_Blade EDIT: Guan Yu's horse also has a name: 赤兔 (Red Hare) https://en.wikipedia.org/wiki/Red_Hare https://en.wikipedia.org/wiki/Red_Hare
- jbverschoor 6y agoI never really get what’s so special about OpenGL in the browser vs on the desktop vs on a console. Also, not looking photo realistic to me tbh.
- modeless 6y agoPortability, and the strong sandbox, are what make OpenGL in the browser special. This loads instantly without installation on an iPhone, an Android phone, a Windows PC, a Mac, an Xbox, a PlayStation, a Nintendo Switch, a Tesla, etc. Even if you could write a native 3D app that runs on all of those (probably the only sensible way would be to use Unity or similar) you'd be stuck with a long and slow installation step instead of an instant load experience. Even worse, you'd be at the mercy of each platform's capricious gatekeeper. Have fun passing certification requirements for all those consoles, buying a Mac to build your iOS binaries, paying the associated developer program fees, and good luck getting your app on Tesla and the long tail of smart fridges etc.
- gfxgirl 6y agoAnd that native app could likely pown your machine, especially on Windows where it's the norm to ask for admin to install almost anything.
- fxtentacle 6y agoI believe the Switch doesn't have a general web browser, because that wouldn't be reliably family friendly.
- jbverschoor 6y agoBut that's all just OpenGL.. nothing special about someone using it in the browser. There's nothing special about being able to use a webcam in the browser either, right? The demo just isn't rechnically impressive. The point you're bringing is "kudos to the browser developers"...
- darkcha0s 6y agoIsn't the point almost always "kudos to the developers?"
- thdrdt 6y agoErich Loftig has been working on a path tracer for ThreeJs for some time: https://github.com/erichlof/THREE.js-PathTracing-Renderer https://github.com/erichlof/THREE.js-PathTracing-Renderer The glass examples also look very promising.
- jiriro 6y ago0.5 FPS on iPhone SE (1st gen) and it doesn’t look like glass at all.
- mcintyre1994 6y agoDoes the other one posted here work on your phone? https://domenicobrz.github.io/webgl/projects/glass-absorption/ https://domenicobrz.github.io/webgl/projects/glass-absorptio... I have an XR and the OP is slow/doesn’t really work but this one works and looks great at 60fps. Curious if it’ll work on an SE too.
- neom 6y agoThis artist is a great developer.
- polisteps 6y agoWho else read the title and though it would render photo realistic glasses as filters in your face? :-)
- fxtentacle 6y agoI think this is a very impressive implementation in WebGL. However, I believe the same approach could easily have 2x to 4x the frame rate (or 2x to 4x more battery lifetime) if it was using compute shaders, but those aren't available on WebGL. So I'd count this as an example of why WebGL will not replace "proper" desktop OpenGL anytime soon. Also, it appears to be reflecting by the same amount everywhere, which makes it look more like glue than like glass. Typically, glass has a fresnel reflection, meaning that it reflects more strongly the lower the angle between the light and the surface. That's why glass bottles usually reflect at the border (which is curved away from you) but are fully refractive in the center (which is facing you).
- onion2k 6y agoI suppose it depends on your definition of 'anytime soon', but adding compute to WebGL 2.0 is something people are working on - https://www.khronos.org/registry/webgl/specs/latest/2.0-compute/ https://www.khronos.org/registry/webgl/specs/latest/2.0-comp...
- flohofwoe 6y agoStrange, I could've sworn I've read recently that the WebGL2 compute effort had been halted because WebGPU is (more or less) around the corner. Yet the linked document has been updated just a few weeks ago.
- Jasper_ 6y ago> WebGPU is (more or less) around the corner. You know that I know that you know that this isn't really true, lol. > Yet the linked document has been updated just a few weeks ago. But that's just because they come from the same WebGL spec repo. The 2.0-compute spec indeed hasn't been updated for a year. I imagine it was halted because WebGL 2 never saw great adoption to begin with. Though even Apple / WebKit is finally adding it, because I think they realized that WebGPU is going to take how many more years to pan out. What a disappointment. https://github.com/KhronosGroup/WebGL/blob/master/specs/latest/2.0-compute/index.bs https://github.com/KhronosGroup/WebGL/blob/master/specs/late...
- tirpen 6y agoThat's pretty neat. It's interesting that the frame rate in Firefox seems to be at least more than double than what I get in Chrome. It's always nice to see Firefox beat the competition. Great work Firefox team!
- mattmanser 6y agoNot on mobile, quite the opposite.
- benplumley 6y agoI'm getting 1fps in Chrome vs 20 in Firefox on Intel integrated graphics, remarkable difference!
- enriquto 6y agoDoes it look good to you? On firefox the contours are horribly aliased.
- antoineMoPa 6y agoSame here on Firefox/Linux.
- ttoinou 6y agoImpressive ! Code seems to be here : https://github.com/Domenicobrz/SS-refraction-through-depth-peeling-in-threejs https://github.com/Domenicobrz/SS-refraction-through-depth-p...
- nyanpasu64 6y agoGetting a lot of black instead of refractions, on Firefox and Falkon (Chromium-based) on Linux. AMD RAVEN (DRM 3.39.0, 5.9.2-arch1-1, LLVM 10.0.1) (0x15d8)
- ben-schaaf 6y agoSame here, on both Firefox and Chromium using an RX580.
- adrian_b 6y agoUnfortunately, at least on Linux, only the NVIDIA drivers are guaranteed to render correctly any OpenGL. During the last year I have not tried again the AMD and Intel drivers, to see how much they might have improved recently. However, in the previous years, I always could find examples of OpenGL programs that were rendered incorrectly, with various annoying artefacts, when using either the AMD or the Intel drivers.
- dahart 6y agoSadly I'm on Linux with the latest NVidia driver, and I'm seeing the black regions too, on both Chrome and Firefox. It looks great on my Windows laptop on both the Intel integrated GPU and the Nvidia mobile GPU.
- occamrazor 6y agoIt doesn’t work on my ipad with safari.
- robenkleene 6y agoThis one linked to above works on iOS https://domenicobrz.github.io/webgl/projects/glass-absorption/ https://domenicobrz.github.io/webgl/projects/glass-absorptio...
- numlock86 6y agoRuns smooth on my Pixel 3 but I had to hard-reset my Pixel 4a after like three frames (which took like 2 minutes ...) Using Chrome on both.
- tobyhinloopen 6y agoNothing on Safari iOS
- robenkleene 6y agoThis one linked to above works on iOS https://domenicobrz.github.io/webgl/projects/glass-absorption/ https://domenicobrz.github.io/webgl/projects/glass-absorptio...
- jsmolka 6y agoLove it. Opened the website, was amazed by how good it looks and suddenly my RTX 2080 started screaming.