Author of the demo here. Some background info about origin of the head model (of which my WebGL rendering is just a pale shadow, check following links for really high quality offline renders and also animation capture).
The head model was based on 3D scan using DIY scanning apparatus created by a single very talented person in his spare time - artist Lukáš Hajka:
Lukáš deserves most of the praise, the model is just great. Shading I used here is actually pretty simple, I used more complex techniques elsewhere yet the overall results didn't look as good as this model with a simpler technique.
Here are some of my earlier attempts, each using a different technique:
The page header mentions "filmic tonemapping", I'd love to hear what that entailed in this case - is it a post-render 3D LUT as some games now do? I couldn't see anything from reading the source... I'm really interested in how we perceive quality of colour in CG renders, and how CG in movies which goes through a print film LUT is helped or harmed by the process.
Those SIGGRAPH talks, OCIO and Jeremy Selan's http://cinematiccolor.com have been a touchstone a while :) Thank you so much for the filmicgames link, that's exactly what I was curious about.
I try to push the limits of WebGL, I'm using almost everything there is, plenty of extensions (bear in mind these are not really exotic features, most are supported by majority of GPUs out there, native desktop games use much wider set of capabilities, it's just that WebGL implementations are only exposing them slowly).
In general Chrome has the most complete WebGL implementation, though Firefox does seem to be catching up recently (they do push for WebGL 2 so some features are popping up in WebGL 1 as extensions, but for example Firefox uses much older version of ANGLE and also no DX11 ANGLE in sight there, so on Windows Firefox is still quite behind Chrome).
IE11 WebGL on the other hand has troubles even just with basic WebGL specs, it still has broken and not implemented features, not even speaking about majority of extensions.
The glowing eyes before the skin had loaded was a bit scary, but overall, good work. However, is it possible to easily disable the heavy depth of field? I feel like that might be exaggerating the quality in a way that wouldn't be realistic for practical use, especially in terms of the hair/stubble over their skin.
Thanks! With it off, I do notice that whatever is making the stubble seem like it protrudes(bump? normal? parallax? Been a long time since I've even thought about this stuff) seems a bit low resolution compared to the skin texture itself, as the light rises with the hair in every single case.
Still though, I'm genuinely surprised at just how well it held up without the DOF. I would've thought it'd be much worse, but frankly it looks great. Great demo.
Yup, bump map is indeed lower resolution (1024x1024) than diffuse skin texture (2048x2048).
It would be better to use higher resolution one, but these were the data I had at hand.
I also made a quick-and-dirty 2K gloss map so it should help a bit with adding surface details even if bump map is lower res.
Gloss variations give surprising amount of surface information - in another demo at one point of time I had bugged bump mapping and it took me a while to realize it was broken because gloss map was working so well.
I see a blue outline on the left of the head and a red outline on the right when I do that. I'm guessing that's some edge case for your lighting model?
You know, some time ago, I half-jokingly put forth the idea to some friends, that chromatic aberration will become the new lens flare, i.e. an effect to make rendered 3D graphics look like a movie shot with a cheap camera by an inexperienced cameraman on purpose. I get really sad each time I see one of these effects - they make the graphics worse on purpose to make them look like a bad movie and it wastes processing power.
If you do want to simulate a camera lens, I'm not going to stop you and wish you luck. However, if you want to render 3D images for humans to look at, I'd suggest putting in effects that are observable with a naked eye and not through a glass lens. Stuff like bright light blinding you, eye adjustment to varying light intensity and motion blur. I realise it's a bit harder to implement these effects, since you can't take a reference photo and compare, but I would really like to see someone try to render images as seen by a human and not a camera.
Thanks (creator here). Please be gentle on my server, right now it's rather overloaded ;). This particular demo is quite lightweight (2.5 MB), but some others are not.
It's all just static files, so they should load eventually, just it needs a bit of patience (I'm being pummeled right now both from here and Twitter).
If it's static files I'd recommend the cloudflare free tier to off load them on to their CDN. https://www.cloudflare.com/plans I'm not affiliated other than being a customer...
Anyone else running into blurring issues? I tested it out on Firefox and Chrome, and in both browsers the face texture is a blur. The high resolution only appears when I have the browser scaled horizontally small enough to cut off half of the head. If I scale it larger, it blurs out again.
Messages in other ones come regularly in capabilities autodetection (the only way how to find out rendering into which render target formats is supported is to do trial frame buffer creation and check for status, which also triggers built-in warnings).
But even this one could be bogus, I already noticed out-of-order logging into console before, so even this "framebuffer incomplete" error can be still part of the autodetection.
At this point I do not know, something is not behaving as it should be on these Intel GPUs, though curiously it does work ok on my older Intel HD 3000 under Windows 7.
If you can (on Windows), you can try to enable DX11 ANGLE rendering backend in Chrome and see it it makes any difference (more capabilities are available with DX11, I use different code paths when more advanced features are present).
It's available via chrome://flags/ under "Enable D3D11" and should work in current stable Chrome 33 (though in Chrome Canary 35 it does work better).
I'm getting a dark blurry version. The console has:
TypeError: asm.js type error: expecting c.y where c is either the global or foreign parameter xg.min.head.js:2
"XG [version 0 | build 410 | 2014-03-30]" xg.min.head.js:20
"XG: half float textures not supported." xg.min.head.js:12
"XG: linear filtering for half float textures not supported." xg.min.head.js:12
"XG: fragment depth setting not supported." xg.min.head.js:12
Error: WebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter requiring a mipmap, and is not mipmap complete (as defined in section 3.7.10). xg.min.head.js:11
Error: WebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter requiring a mipmap, and is not mipmap complete (as defined in section 3.7.10).
XG [version 0 | build 410 | 2014-03-30] xg.min.head.js:20
XG: multiple render targets not supported. xg.min.head.js:12
XG: fragment depth setting not supported. xg.min.head.js:12
XG: render target support autodetection START (please ignore following warnings) xg.min.head.js:12
3
WebGL: checkFramebufferStatus: the internalformat of the attached texture is not color-renderable deferred_skin.html:1
XG: render target support autodetection END xg.min.head.js:12
XG.DeferredRenderer: can't use multiple render targets, falling back to multipass.
I tried to boot with my Intel HD 3000 enabled (secondary GPU in my Thinkpad) and while it was very slow, demo did work.
I'm on Windows 7. Weird it doesn't work on newer GPUs and newer OS, regresses do happen sometimes.
It does work for me elsewhere, on my Nvidia Quadro 2000M and oldie ATI Radeon HD3650, Chrome and Firefox, with DX9 ANGLE, DX11 ANGLE and OpenGL rendering backends.
slight tangent : can anyone recommend resources or entry level project ideas for anyone getting started with rendering APIs (OpenGL, WebGL, d3d, etc.)?
I'm not opposed to any of the JS wrappers (three.js), but would like to develop some intuition about the APIs that more closely interact with the GPU.
Incredible result. Eyes are not on par with the rest, however. Could you add SSS material on the eye-white, I think that would bump up the realism a notch.
Yup, it definitely looks a bit better now. The eyes could also have reflection maps, but they should be properly shadowed or it looks weird. Eyes are hard, I've not seen anyone do them perfectly yet, even in offline renders.
So that's what was making me try to figure out why there was something not quite right about the face! It seems we tend to notice little details like this more unconsciously; it's probably a huge contributor to the uncanny valley effect.
Really? For me it looks exactly the same in Chrome and Firefox. Both seem to work (fotorealistic head with tiny details, nice lighting, depth of field). My FF version is 27.0, Chromium is 32.0.1700.107, OS is Archlinux, graphics card is from Nvidia.
What difference have you got between the two browsers?
EDIT: I found one difference, Chrome has 60FPS, FF only 37, at same resolution.
Works fine in FireFox 28 and Safari 7.0.2 (both the current versions of these browsers) on Mac OS X 10.9 here.
The black looks like it is a bandwidth issue. It looked like a black head in FireFox for a few seconds, but then (I guess when additional data was downloaded) it looked similar to what Safari showed. FireFox is a bit darker and seems a tiny tad slower.
Heads are so funny, and there are a thousand laughs in store for you in the new, improved HEAD. Everyone enjoys a talking HEAD, from young to old. Taste, see, smell, and "pain" with a HEAD. Experience every emotion known to the HEAD. And if you already have a HEAD, remember what the HEADS say: "Two HEADS are better than one!"
Everyone enjoys a talking HEAD. Every minute is different from the next minute in incredible thought-chaos of a HEAD. And every single HEAD is different!
HEADS are so funny. Listen to the limbless talking HEAD talk about "Freedom," "Death," "Beauty," and "God-Father." Make the HEAD fall in "Love" with you. Any HEAD can be made to "Love," if training manual instructions are carefully observed. Watch the worn-out HEAD die, talking, talking, talking till the moment in decays. Indeed, it is not an exaggeration to say HEADS are so funny.
Taste, see, smell, and "pain" with a HEAD. Every HEAD purchaser receives absolutely free a "Life-time" supply of "Food." Put "Food" in the HEAD's Mouth, then insert consensual Apparat into Left Collarbone. You will taste every molecule of the Mouth's "Food." Only those who have "eaten" with a Mouth can understand the incredible sensations of "Food."
Left Collarbone is likewise Input/Output source for Right Eye and Left Eye. See the strange little world of the Right Eye, looking at you! See through the Left Eye too! Then see through both the Right Eye and th eLeft Eye together. Every Exo-Export HEAD has two eyes. Don't accept less!
Left Collarbone is likewise Input/Output source for Nose. Now, with the new, improved HEAD you can experience the disconcerting primeval world of "Sex," as the center of the new HEAD's sex-tropic response is removed from obsolete and unsightly sacral area and redirected to the graceful Nose. Just one more reason why two HEADS are better than one!
Left Collarbone is likewise Input/Output source for "pain"-sensitive Chin. Throughout the galaxies there are creatures, often the most insignificant, that can experience the famous "Negative Pleasure," and now with a HEAD you can too! The new, improved HEAD is thirty percent more sensitive to "pain," thanks to refinements in the Chin.
Left Collarbone is likewise Input/Output source and control center for Adam's Apple. Nothing is easier than to take over your HEAD's talking- function. Amuse your friends by talking through your own HEAD! What could be funnier than to talk to another HEAD that thinks you are just a HEAD too?
Everyone enjoys a talking HEAD, from young to old. Even more fun than talking-function of the HEAD is thought-function. Insert compassional Apparat into Right Collarbone, and experience every emotion known to the HEAD. You will feel the HEAD's amazing "Love." You will be paralyzed with the HEAD's consuming "Fear" of pain and of its own inescapable death. You will hate your own self -- perhaps the most exciting sensation of all.
HEADS are educational. Everyone should have his own HEAD to grow up with. HEADS provide an easy and stimulating introduction to basic concepts of xeno-language and xeno-culture. Each HEAD is given a thorough grounding in the astonishing cultural traditions of its autochthonous planet. A third of a lifetime is devoted to the education of every Exo-Export HEAD.
HEADS are perfectly safe for the young. The sharp, skeletal teeth are extracted from each HEAD's Mouth at the time of assembly and refitted with harmless, hydraulic pseudo-teeth.
Many designers consider HEADS to be an attractive addition to the decor of one's environment, especially in arrangements with contrasting xeno-flora and xeno-fauna. For the fashion-conscious HEADS are available now in a range of natural tincts from brown through pink. When treated with new, special-formula Fungi-X, HEADS can also be cultivated in more agreeable colors, though fungifying processes will abbreviate markedly the lifetime of the HEADS so treated.
Everyone should have his own HEAD, and now everyone can! Thanks to the diminished Chest volume of the new, improved HEAD, the result of recent advances in biominiaturization, HEADS are cheaper than every before. They eat less and take up less space too! So why don't you buy your new HEAD today?
Any HEAD you buy from Exo-Export is guaranteed to be the native handicraft of its autochthonous planet, where bioengineering has long been practiced by the wild-four-limbed progrnitors and manufacturers of the HEADS.
There are a thousand laughs in store for you in the new, improved HEAD. Why don't you buy your new HEAD today? Why don't you buy your new HEAD today? Why don't you buy your new HEAD today?
Only 49.95 from Exo-Export Monopolies.
Copyright 1968 by Thomas M. Disch An earlier version of this story, entitled "Cephalotron," originally appeared in Playboy Magazine, copyright 1966 by HMH Publishing Co., Inc.
The head model was based on 3D scan using DIY scanning apparatus created by a single very talented person in his spare time - artist Lukáš Hajka:
http://pchiik.tumblr.com/
He documented his process here:
http://www.zbrushcentral.com/showthread.php?177615-DIY-Unive...
http://www.cgfeedback.com/cgfeedback/showthread.php?t=3776
At first it was just static model, later on he created a pipeline also for capturing animations:
http://www.youtube.com/watch?v=MgceFBMYvSU
http://www.youtube.com/watch?v=GOV7wvMZFBs
Lukáš deserves most of the praise, the model is just great. Shading I used here is actually pretty simple, I used more complex techniques elsewhere yet the overall results didn't look as good as this model with a simpler technique.
Here are some of my earlier attempts, each using a different technique:
http://alteredqualia.com/three/examples/webgl_materials_skin...
http://alteredqualia.com/three/examples/webgl_materials_bump...
http://alteredqualia.com/xg/examples/forward_materials_skin_...