Rendering Head in WebGL

http://alteredqualia.com/xg/examples/deferred_skin.html

by itamarb • 12 years ago

238 77 12 years ago

trigoman• 12 years ago

That's too fucken creepy!

nlh• 12 years ago

Amazing realism. I just had a vision of meeting a character like that in a game - up close - wearing my Oculus (or better...)

And it was awesome.

Lots of exciting stuff ahead folks. This is going to get good.

lowglow• 12 years ago

That's amazing.

ByronT• 12 years ago

The first step toward Oculus and Facebook integration...

taspeotis2• 12 years ago

There's quite a few good WebGL demonstrations to choose from on the home page [1].

[1] http://alteredqualia.com/

bd12• 12 years ago

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

buzzkills• 12 years ago

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

hamburglar• 12 years ago

I really like the way the limited depth-of-field makes it feel like he's really close to you. Creepy as heck.

By the way, I think a less disturbing title would be "Rendering A Head in WebGL" :)

userbinator2• 12 years ago

Indeed, the first time I looked at the title I thought a "rendering head" was some piece of software (a front-end?) for rendering.

Not that "Rendering A Head" is any less disturbing considering the alternate meaning ( http://en.wikipedia.org/wiki/Rendering_(animals) )...

teejaygreen• 12 years ago

Click link. Listen to video card fan speed up dramatically.

quaunaut2• 12 years ago

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.

taspeotis2• 12 years ago

I had a look at the "renderer" object in Chrome's developer tools. I tried renderer.dofEnabled = false but that didn't seem to have any effect.

bd12• 12 years ago

Open JavaScript console, write:

renderer.setDOF(false);

anon42• 12 years ago

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?

quaunaut2• 12 years ago

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.

User87122• 12 years ago

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.

http://i.imgur.com/Yd4jCme.jpg

bd12• 12 years ago

That's probably broken autofocus. It's done fully on GPU so it may be a bit tricky on some not-up-to-date drivers I guess.

Which browser / OS / GPU did you use?

Does this demo focus ok for you?

http://alteredqualia.com/xg/examples/animation_physics_ammo....

User87122• 12 years ago

Yep, that demo works fine.

Firefox/Chrome, Windows 8.1, Intel HD 4000.

isaacwaller• 12 years ago

I'm having the exact same issue on Firefox / Windows 8.1 on an Intel Iris 5100, so it's probably an issue with Intel drivers.

MattJ100• 12 years ago

Also Intel here (on Linux). I guess you may be right.

tdicola• 12 years ago

Having issues on ChromeOS too, can see the head and eyes but it's all very blurry.

Guillaume86• 12 years ago

Yes same issue here (Intel HD 4400), turning off DOF fix it:

renderer.setDOF(false);

dpacmittal• 12 years ago

I got a extremely blur rendering and I tried what bd suggested in another thread -

  "Open JavaScript console, write:
  renderer.setDOF(false);"

It looked fine after that.

SimHacker2• 12 years ago

Fun With Your New Head

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.

https://www.youtube.com/watch?v=ZqefPy3q3Do

SimHacker2• 12 years ago

And if you order before midnight tonight, we will include a free sample of HEAD ON: Apply directly to the forehead! https://www.youtube.com/watch?v=f_SwD7RveNE

doktrin• 12 years ago

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.

dsego• 12 years ago

http://open.gl

sjtgraham• 12 years ago

http://learningwebgl.com/blog/

xixixao• 12 years ago

http://www.webglacademy.com/

is great for learning basics of WebGL or shaders alone.

Bjorkbat• 12 years ago

I'm going to bookmark this, in case I ever feel the need explain the Uncanny Valley to others through example.

bluepnume• 12 years ago

Vaguely interesting: how much his emotions seem to change only based on his head/eye angle: http://imgur.com/a/6QEIq

ahoge• 12 years ago

Humans actually can't do this:

http://i.imgur.com/Ul3ti69.jpg

As we look down, the upper eyelid automatically follows.

Try it in front of a mirror. Tilt you head back and try to open your eyes as shown in the image above. You won't be able to do it.

Geee3• 12 years ago

Interesting, never thought of that.

bazzargh• 12 years ago

Did you mean 'can't' or 'don't'. I just tried it, it's easy, it just feels like you're a bit wide-eyed.

bd12• 12 years ago

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:

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

frik• 12 years ago

You have several really great WebGL demos on your site, e.g. animation_physics_level

For some reasons they don't work in IE11 which has WebGL support. Is it because of Three.js or your xg library?

bd12• 12 years ago

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.

lcrs2• 12 years ago

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.

bd12• 12 years ago

I do tonemapping in a final compositing step of deferred rendering. Here are formulas:

http://filmicgames.com/archives/75

John Hable did a great job proselytizing virtues of linear space lighting and proper tonemapping.

http://filmicgames.com/archives/category/tonemapping

http://filmicgames.com/archives/category/gamma

There have been also SIGGRAPH course if you want to delve-in deeper:

http://renderwonk.com/publications/s2010-color-course/

bariswheel• 12 years ago

The initial black mask adds to the overall creepy vibe of this unsuspecting giant face presented before me. I wasn't going to sleep anyway.

Sander_Marechal• 12 years ago

Pretty cool/creepy how the eyes keep looking at you when the head rotates.

troels• 12 years ago

What is this? Is it just a high res texture mapped polygon or is it some kind of ray tracing?

marcosscriven• 12 years ago

I'm getting really fed up of WebGL not working on iOS!

jeena• 12 years ago

Wow, what a difference between Chrome and Firefox.

Aardwolf• 12 years ago

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.

Jamie452• 12 years ago

Wow that's so awesome! I'd love to see more things in that level of detail!

chii• 12 years ago

I wish the author wrote an explanation on how it works!

cottonseed• 12 years ago

Wow. Creepy. I think we found the NSA mascot. "We're watching."

stesch2• 12 years ago

OK, a shadow of a head. Do I miss something?

TophWells• 12 years ago

Does it say "Loading ..." in the top-right corner?

stesch2• 12 years ago

In the beginning. Then it's gone and I have a black head in my browser. A shadow.

JavaScript allowed. Firefox 29 Beta. Mac OS X 10.9.

I guess it's a Chrome only demo again. :-(

filipedeschamps• 12 years ago

Amazing! And it's 15fps in my Macbook Air with Chrome.

Setting DOF to false bump fps up to almost 25.

idoco• 12 years ago

This skin layer image is so creepy...

http://alteredqualia.com/xg/examples/models/ctm/head/diffuse...

Geee3• 12 years ago

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.

bd12• 12 years ago

Good idea, added, thanks. It helped a bit, but eyes are indeed the weakest point.

Even if material rendering would be perfect (which it isn't), there would be still missing eyelids deformations and there are no eyelashes.

One day, step-by-step, right now I'm glad there are some eyes at all, previous model I experimented with had eyes closed ;).

userbinator2• 12 years ago

there are no eyelashes

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.

Geee3• 12 years ago

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.

flog• 12 years ago

Or this: http://www.vill.ee/eye/

SimeVidas• 12 years ago

Ok, it's starting to get creepy :P

JabavuAdams• 12 years ago

Ok, that's terrifying. It needs to blink and should bee smiling.

I understand that it's a lot easier to acquire a static mesh than one that's rigged for animation.

Eleutheria• 12 years ago

Could you try using Megan Fox's head next time?

Thanks.

Rendering Head in WebGL

Related Stories