Rendering photo-realistic glass in the browser

https://domenicobrz.github.io/webgl/projects/SSRefractionDepthPeeling/

by anonytrary • 6 years ago

391 112 6 years ago

domenicobrz.github.io

purplecats• 6 years ago

wow that's incredible. one of those things that blow you away so hard, you can hear your heart beats.

Neat! What's extintionCol1Ra do? It causes the glass to turn into a multicolored jellyfish looking thing, which is cool.

xingyzt• 6 years ago

Truncated from "extintionCol1Random".

jessep• 6 years ago

I 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-absorptio...

coolspot• 6 years ago

60fps on my iPhone X, impressive!

a0122• 6 years ago

Zoom in and frame rate drops to under 20fps

dawnerd• 6 years ago

My 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.

winter_blue• 6 years ago

Strangely, 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• 6 years ago

It'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• 6 years ago

That 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.

colordrops• 6 years ago

I see the polygon artifacts on chrome on android.

Wistar2• 6 years ago

Very clean and at least 60 fps in Chrome on a 3 year old iPad. Amazing.

globular-toast• 6 years ago

I get the same red polygons and low fps on Firefox and Chrome on my phone.

jiriro2• 6 years ago

60 FPS on iPhone SE (1st gen) zoomed in or out. Cool.

headmelted• 6 years ago

Am 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• 6 years ago

I 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• 6 years ago

45FPS on my 1050Ti, so it beats me.

pjmlp7• 6 years ago

Yes, 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...

ChrisMarshallNY• 6 years ago

I agree. It is...um...smooth as glass on my iPad. Much more so, than the OP.

Pulcinella• 6 years ago

Is 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.

CyberDildonics2• 6 years ago

It 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• 6 years ago

Of 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_3• 6 years ago

Abusing 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,m...

rychco• 6 years ago

From 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• 6 years ago

Is 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• 6 years ago

Is that... Guan Yu?

It is a little refreshing to see something other than the Utah Teapot for once.

k_sze3• 6 years ago

Yep, 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

blaesus• 6 years ago

Used 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.

Dirlewanger• 6 years ago

Yup, that glaive is unmistakable. I knew that hours of playing Dynasty Warriors would pay off.

k_sze3• 6 years ago

That 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

EDIT: Guan Yu's horse also has a name: 赤兔 (Red Hare)

https://en.wikipedia.org/wiki/Red_Hare

jbverschoor4• 6 years ago

I 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.

modeless2• 6 years ago

Portability, 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• 6 years ago

And that native app could likely pown your machine, especially on Windows where it's the norm to ask for admin to install almost anything.

fxtentacle5• 6 years ago

I believe the Switch doesn't have a general web browser, because that wouldn't be reliably family friendly.

jbverschoor4• 6 years ago

But 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"...

bogwog• 6 years ago

This is all wrong.

probably the only sensible way would be to use Unity or similar

You're going to need to explain this one.

you'd be stuck with a long and slow installation step instead of an instant load experience

A 20mb app takes the same amount of time to download whether it's a zip file or a WebGL app, but the browser one will be much slower, much more error-prone, have less features, likely will require an internet connection every time you want to use it, and isn't guaranteed to be available indefinitely (and is usually non-trivial to download and play locally).

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

And this one isn't very accurate considering you can't run a WebGL app on any (non-jailbroken) game console. Idk about Tesla or smart fridges though.

cocochanel• 6 years ago

accessible.

asutekku• 6 years ago

Browsers traditionally have not been the place where you can run expensive graphical calculations in an environment not originally made for them. I think it's quite devaluing to try to compare it to desktop and/or console, which are much more specialized for that.

st_goliath• 6 years ago

I never really get what’s so special about OpenGL in the browser vs on the desktop vs on a console.

Nothing in particular, besides being seamlessly integrated in a web page with existing web standards as opposed to having to download and run an executable perhaps?

jbverschoor4• 6 years ago

Same can be said for any browser technology.

What's so special about this specific post?

flohofwoe4• 6 years ago

You just click a link in the browser and it runs instantly, instead of downloading an unsigned executable from a website you never heard of, which is then blocked by Windows SmartScreen, Apple Gatekeeper or doesn't run on your machine at all because you're using Linux.

notjustanymike2• 6 years ago

I work for a 3D anatomy company and the biggest advantage is compatibility. You can embed 3D content using an iframe just like video. For example here's Healthline using our content to explain knee anatomy.

https://www.healthline.com/human-body-maps/knee#1

This makes it possible for all the online learning companies to integrate 3D into their courseware without requiring any additional download.

superhuzza• 6 years ago

Just wanted to say this is a really cool use case, and it works pretty well too. Neat.

Ralo• 6 years ago

Hey I got this new game I'd like to show you, just download this exe and run it. Or here's a link, run it safely in a sandbox environment.

thdrdt• 6 years ago

Erich Loftig has been working on a path tracer for ThreeJs for some time: https://github.com/erichlof/THREE.js-PathTracing-Renderer

The glass examples also look very promising.

jiriro2• 6 years ago

0.5 FPS on iPhone SE (1st gen) and it doesn’t look like glass at all.

mcintyre1994• 6 years ago

Does the other one posted here work on your phone? 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• 6 years ago

This artist is a great developer.

polisteps• 6 years ago

Who else read the title and though it would render photo realistic glasses as filters in your face? :-)

fxtentacle5• 6 years ago

I 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• 6 years ago

I 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-comp...

flohofwoe4• 6 years ago

Strange, 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.

fxtentacle5• 6 years ago

In my opinion, the main issue is trust.

If I buy and download a game from Steam, I trust it to not contain malware. That's why I allow that game to run with very little protection.

If I visit a random website, I have to be prepared for the worst. And if I visit any website that finances itself with ads, I can assume that they will behave like offensive attackers trying whatever they can to collect more information about me in ways that I do not want.

As such, WebGL needs a very strong sandbox around it, to prevent rogue websites from causing harm. For desktop games, that trust issue does not arise, because they have a different business model.

That's why in my opinion, desktop OpenGL will always remain faster than WebGL.

pierrec• 6 years ago

Compute shaders in WebGL would be great. But why would they improve the performance in this case? Right now it's implemented as a fragment shader, which to me seems appropriate here.

dahart6• 6 years ago

What’s the basis for your 2x-4x speed difference estimate?

fxtentacle5• 6 years ago

In the past, I have supervised cross-platform Unity and UE4 game projects. I even found and fixed a mobile GPU heat death bug :) So that 2x to 4x is just my personal experience.

Some things like GPU pixel shaders tend to be magically slower on WebGL, even if you send the same raw HLSL/GLSL source code. The reason appears to be that due to security concerns, the same shader source code is compiled differently by WebGL than by desktop OpenGL.

Also, many smart tricks like DMA from the SSD bus to the GPU are inherently very unsafe, so WebGL sandboxing simply doesn't allow them. The result is that you need to copy the data twice instead of once and if memory bandwidth is a bottleneck (it usually is for triple-A), then that can easily completely waste performance.

Jasper_3• 6 years ago

So the hard part of this isn't computing the reflection color (that can be done with an environment cubemap and some math expressions), but sorting the transparency. This demo uses "depth peeling", which is a fancy term to just mean rendering the model in a few different frustum slices along the view direction, and using the previous framebuffer content to accumulate reflection.

The whole purpose of this trick is to abuse the rasterizer! I struggle to see how compute shaders would make this faster.

devwastaken2• 6 years ago

The problem is security, as usual. You can use opengl to exploit a host system, therefore all interactions have to be whitelisted and checked. Compute shaders I know can be crafted to bring your PC to a grinding halt.

Webgpu will be a lovely security nightmare. The underlying hardware is inherently insecure. It's fast, not safe. Safety is simply not a feature of graphics operations.

archerx• 6 years ago

You can already do that with fragment shaders. I've already caused my computer to crash and reboot by going a bit to crazy with the fragment shader.

spyder• 6 years ago

Uh.. It has fresnel reflection, you can see that the curved surfaces that don't face the camera are reflecting more of the mostly white environment, it's even more clear when you adjust the reflectionFactor.

tirpen• 6 years ago

That'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• 6 years ago

Not on mobile, quite the opposite.

benplumley• 6 years ago

I'm getting 1fps in Chrome vs 20 in Firefox on Intel integrated graphics, remarkable difference!

enriquto• 6 years ago

Does it look good to you? On firefox the contours are horribly aliased.

antoineMoPa• 6 years ago

Same here on Firefox/Linux.

ttoinou• 6 years ago

Impressive ! Code seems to be here : https://github.com/Domenicobrz/SS-refraction-through-depth-p...

nyanpasu64• 6 years ago

Getting 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• 6 years ago

Same here, on both Firefox and Chromium using an RX580.

adrian_b2• 6 years ago

Unfortunately, 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.

occamrazor• 6 years ago

It doesn’t work on my ipad with safari.

robenkleene2• 6 years ago

This one linked to above works on iOS https://domenicobrz.github.io/webgl/projects/glass-absorptio...

numlock86• 6 years ago

Runs 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• 6 years ago

Nothing on Safari iOS

robenkleene2• 6 years ago

This one linked to above works on iOS https://domenicobrz.github.io/webgl/projects/glass-absorptio...

jsmolka• 6 years ago

Love it. Opened the website, was amazed by how good it looks and suddenly my RTX 2080 started screaming.

Rendering photo-realistic glass in the browser

Related Stories