Realistic Skin Rendering in WebGL(alteredqualia.com)
alteredqualia.com
Realistic Skin Rendering in WebGL
http://alteredqualia.com/three/examples/webgl_materials_skin.html
55 comments
Here's the texture it uses (just from viewing source) - kind of interesting: http://alteredqualia.com/three/examples/obj/leeperrysmith/Ma...
Beautiful.
It's great seeing advanced 3D effects (sub-surface scattering and normal mapping? I think thats what we're seeing here) escape the realm of typeA games and show up on a web browser, running at a very acceptable framerate.
Looks like web3D really is taking off, can't wait for more 3D engines written on top of webGL so non openGL-wizards can get in on the fun :)
It's great seeing advanced 3D effects (sub-surface scattering and normal mapping? I think thats what we're seeing here) escape the realm of typeA games and show up on a web browser, running at a very acceptable framerate.
Looks like web3D really is taking off, can't wait for more 3D engines written on top of webGL so non openGL-wizards can get in on the fun :)
Is this actually doing subsurface scattering or just taking normals that are barely in shadow and giving them a red glow? I can't tell which it is (and I'm not sure how I would visually.)
Author here.
It's approximation of subsurface scattering, modeled by combination of multiple Gaussian blurs done in texture space (there are 4 blur layers plus original normal mapped Blinn-Phong layer).
If you are interested in details, it's basically a simplified implementation of Nvidia's advanced skin rendering presented at GDC 2007:
http://developer.download.nvidia.com/presentations/2007/gdc/...
It's approximation of subsurface scattering, modeled by combination of multiple Gaussian blurs done in texture space (there are 4 blur layers plus original normal mapped Blinn-Phong layer).
If you are interested in details, it's basically a simplified implementation of Nvidia's advanced skin rendering presented at GDC 2007:
http://developer.download.nvidia.com/presentations/2007/gdc/...
This is awesome! Are you able to implement the physically based specular term and still have acceptable performance?
You'll need the precomputed Beckmann distribution in a texture: http://developer.nvidia.com/node/171
You'll need the precomputed Beckmann distribution in a texture: http://developer.nvidia.com/node/171
Maybe. I didn't get yet to play with specular term, current one is just vanilla Phong.
There should be still some performance margin left, I tried to tune it to keep 60 fps on my notebook.
There should be still some performance margin left, I tried to tune it to keep 60 fps on my notebook.
And it's done, if you clear cache and reload, it should be using physically based specular term.
Visual difference is quite subtle - skin feels more "silky" and ears are more shiny.
No noticeable degradation of performance.
Visual difference is quite subtle - skin feels more "silky" and ears are more shiny.
No noticeable degradation of performance.
Is there a review of the state of the art in skin rendering somewhere? Maybe I'm wrong, but wasn't it concluded several years ago that for realistic skin we would have no option but to use multi layer subsurface scattering? (honest question, I seem to remember that the last time I read about this around 2007-2008 the consensus had just about converged to that conclusion).
I opened the tab and then forgot about it while reading other stories. Scared the shit out of me when I got around to this tab.
Some of the other examples are pretty impressive too: https://github.com/mrdoob/three.js
It's a little amusing how popular these WebGL reimplementations of 2004-era OpenGL demos are.
It's kind of a gift for those of us who are really late to the 3D CG game and have to play catch-up with all the awesome techniques, algos and shaders that were developed over the last 8-or-so years but who have been working on the web all these years... for once, us old dogs can learn old tricks and still be totally cutting edge!
But personally I think this is just the beginning. To get from 1994 quality (Doom) to 2004 levels (as you say) in-the-browser didn't take "us" 10 years but more like 1-3. When WebGL and "desktop GL" will slowly but surely converge over the next 3-8 years, it will be a real game changer. People will rave about popping up completely new kinds of "3D games" casually and instantly "in the browser". It'll be awesome. It's not too late to jump on the bandwagon and finally we're now also at a fairly stable point where it's not too early either. WebGL in Chrome and Firefox is solid these days. Keeps getting better. Opera is committed to it too. It's cross-platform. And IE? There's 'Chrome Frame' for that (or alternatively some obscure plugin called "iewebgl" or some such, although Chrome Frame should be more sensible).
But personally I think this is just the beginning. To get from 1994 quality (Doom) to 2004 levels (as you say) in-the-browser didn't take "us" 10 years but more like 1-3. When WebGL and "desktop GL" will slowly but surely converge over the next 3-8 years, it will be a real game changer. People will rave about popping up completely new kinds of "3D games" casually and instantly "in the browser". It'll be awesome. It's not too late to jump on the bandwagon and finally we're now also at a fairly stable point where it's not too early either. WebGL in Chrome and Firefox is solid these days. Keeps getting better. Opera is committed to it too. It's cross-platform. And IE? There's 'Chrome Frame' for that (or alternatively some obscure plugin called "iewebgl" or some such, although Chrome Frame should be more sensible).
WebGL and desktop GL will slowly converge? Isn't WebGL already basically just a JS API for OpenGL? Doesn't that make them already relatively converged?
WebGL is a JS binding for OpenGL ES 2, the same version of OpenGL that is used on smartphones. It is not as flexible as OpenGL proper ("desktop GL"), which has more features. OpenGL ES 3 will soon be bringing many of desktop GL's most important extra features to smartphones and the next version of WebGL, and it's not unthinkable that OpenGL ES could eventually take over as the main OpenGL API.
Exactly. Though I think the ES version will probably always lag behind due to Smartphones/Tablets being by necessity less powerful than Desktops/Laptops -- I'm secretly hoping there will eventually be a WebGL that (1) like today guarantees the ES feature set but (2) lets you query and "switch on" full-fledged desktop OpenGL capabilities just like WebGL extensions -- so that we can utilize more/all of the GPU if the GPU happens to be not on a Smartphone/Tablet but on a high-end desktop/laptop. Right now I think this is against Khronos design philosophy behind WebGL -- but eventually one of the implementors (Mozilla or WebKit) may have a strong need for this and add it. Here's hoping.
That's like saying "It's a little amusing how popular these web reimplementations of 2004-era word processors are". Dude, being on the web makes a huge difference. No software to install is massive. You can't link to a program running on your desktop. It's a great leap forward.
Hopefully JS/WebGL will help enable a client-server model for medical image analysis analogous to AWS/Hadoop/etc. JS has been successful not only for its ubiquity, but also because it - warts and all - hits a development sweet spot. Right now the big open source med image projects (MITK, Slicer, etc.) are almost all C++, so the barrier to entry is too high for some people who might be able to contribute substantially within the JS sweet spot.
Here's a really neat step in this direction: http://www.nmr.mgh.harvard.edu/~rudolph/webgl/brain_viewer/b...
Here's a really neat step in this direction: http://www.nmr.mgh.harvard.edu/~rudolph/webgl/brain_viewer/b...
Really? You feel that reimplementing a word processor on the web is a major leap forward? To me it looks like old wine in new bags. I could link to word processor-like Java Applets in 1998. I realize it's not 100% the same, but trying to re-implement all these things we've had for 10 years in substandard technology just seems like a procession of Echternach.
(btw current web word processors barely approach Wordpad level - the level of functionality we had on the desktop in 1995).
(btw current web word processors barely approach Wordpad level - the level of functionality we had on the desktop in 1995).
(btw current web word processors barely approach
Wordpad level - the level of functionality we
had on the desktop in 1995).
+1
So impressive, but so creepy.
There's a certain "plasticity" to the skin—very uncanny valley.
I think the plasticity comes from the ears and eyes, which to me seem a bit doctored.
I think the uncanny valley could be overcome with some subtle rigging to simulate a person's micro-gestures. Its not often you look at a human completely motionless, sans a wake.
I think the uncanny valley could be overcome with some subtle rigging to simulate a person's micro-gestures. Its not often you look at a human completely motionless, sans a wake.
Its the bloom shader if I get what you mean
I kept thinking, "please don't open your eyes!" If he (it) did, I would have freaked out.
Anyone got a screenie for those of us who don't have a computer than can handle WebGL right this second?
The head moves with mouse drag to present different angled views of the head with the light source staying static.
Thanks!
I half expected it to suddenly open it's eyes and cause me to change my pants.
Nice. I've actually been working on this. Work in progress: http://content.screencast.com/users/shawnpresser/folders/Jin...
The face is cool, but three.js - the engine behind this - actually has quite a pleasingly orthogonal API as well. Worth taking a look at alongside this.
(And where is the save button when I need it ;_;)
(And where is the save button when I need it ;_;)
OK, that's just creepy if you have a large screen.
Very good. But creepy.
Very good. But creepy.
Firefox 4.0 Mac, hung for about 10 seconds with a black screen, popped open a window saying the script is unresponsive so I told it to Stop. It hung another 2-3 seconds, finally showed a face, and crashed the browser. Fun!
Macbook Pro 13" Core 2 Chrome. Worked for me and a little "choppy".
For fun, the figure should open eyes after a minute so of viewing =)
everything in this looks real, except the eye lids dont have eye lashes so the light rebounding off the sealed eyelid looks crap. otherwise cool stuff
Maybe a silly question, but can you abuse WebGL for lets say multi-channel audio processing (byte array, data URI)?
Any way to see what's there besides visiting the link? (no WebGL) - like picture or video?
impressive. the lighting is a bit clipped - not smooth.
why didn't they do a beautiful girl's face instead?
why didn't they do a beautiful girl's face instead?
High-quality head scans that are free for general use are not easy to come by. Lee Perry-Smith has somewhat immortalized himself by releasing his scan to the community:
http://www.ir-ltd.net/royalty-free-high-quality-scan
But... for another angle on why not use a beautiful girl's face, here's an interesting theory:
http://filmicgames.com/archives/679
http://www.ir-ltd.net/royalty-free-high-quality-scan
But... for another angle on why not use a beautiful girl's face, here's an interesting theory:
http://filmicgames.com/archives/679
My guess is to show off a realistic skin, showcasing a five o'clock shadow helps.
I actually think it's better to use imperfect skin for the purpose of showing off rendering engines. I really like how you can see some spots, scars, small details on the skin rather than a smooth silky pretty girl skin.
>why didn't they do a beautiful girl's face instead?
Because it's a tech demo and it's a known texture in the OpenGL community? Not everyone in CS wants to stare at "beautiful girls", fortunately the Internet has created an outlet for such desires.
Because it's a tech demo and it's a known texture in the OpenGL community? Not everyone in CS wants to stare at "beautiful girls", fortunately the Internet has created an outlet for such desires.
I'm sorry. I completely understand karma grubbing is frowned upon and I couldn't care less, especially about this post, but I really don't understand how people are downvoting this post. Feel free to downvote this one... I'm just genuinely curious what part of my post above this one is at all controversial.
Am I supposed to like women? Am I supposed to objectify women at every turn, especially in an industry where they're already highly objectified and slighted?
Am I supposed to like women? Am I supposed to objectify women at every turn, especially in an industry where they're already highly objectified and slighted?
No, you're supposed to read the comment you're responding to in the context in which it was written. Did you bother to read the linked article before you responding?
No? Didn't think so.
No? Didn't think so.
I think the lighting is more impressive than the skin. Still, a cool tech demo!
Amazing. We are surely looking at the future of porn.
:( 3d.xxx is already taken. Definately skin games are going to be popular there.
though pleasant, I didn't think he was that attractive...
Anyone looking to use this mans idea, and is looking for a domain name I own meatgalore.com, give me an email if you're interested!