This post is about a demo called “Have you seen yourself When you are Drunk ?”. What is it all about ? Well have you seen yourself when you are drunk ?
You don’t look at your best, but you don’t remember the morning after, lucky you. So now you are sober, this demo will show you how you look when you are drunk… Hopefully this will make you realize that alcohol abuse is a bad thing! And that we could save the world by stopping it!
Or it will just show some cool webgl effects… Honnestly i wasnt that sure of its exact purpose. Well, up to you to pick :) In other words, this is a webgl demo which reads your webcam, to show yourself on screen, then it does some screen deformations to give you an idea of what you look like when you are drunk.
We will learn how to code that. So first the tools of the trade…
handles videos in texture. It is possible to put html5 video output in texture, even put the webcam in it, or to connect it to WebAudio API to get localized sounds.
an intoxicated post-processing effect. You can easily add it in your game to simulate the player is drunk. It provides various levels: sober, drunk, high and wasted.
We will use it to deform the video from the webcam and makes you look drunk.
Webcam For Texture
So the first thing is to get webcam on fullpage. For that we use threex.videotexture. It does video textures, either you take this video from a url, like this.
1 2 3 4 5 6 7
Or you take the video live from the webcam, like this.
1 2 3 4 5 6
videoTexture.texture in your materials to
have the texture of the webcam. So let’s see how we will
compose our scene.
We need a Plane which take the full page, and we will apply our webcam texture to it. So first there is an orthographic camera. Perspective is useless in this case, and make computations much more complex :)
Then, there is a
using full screen for this camera.
1 2 3 4
Then we apply our
videoTexture to this material. Thus
we see the webcam on this plan :)
So we got our face on full screen, cool for ego i guess :) Now let’s apply some deformation to it!
Post Processing and Rendering
Usually to render a scene, we use the following code. This is when we render the scene directly on screen.
We will use a post processing chain with
THREE.EffectComposer. It process the screen as a 2d texture.
More specifically, we will use threex.toxicpproc, a three.js extension which provide post processing of drunk effects. It got 4 presets sober, drunk, high and wasted. There is a nice tweening when you switch between presets so transitions looks smooth.
Try it yourself in this demo.
So First lets instanciate a
THREEx.ToxicPproc.Passes. It will setup the effect composers passes for our effect. We set it to the
1 2 3 4 5
Now that we got the toxicpproc passes, let’s create the
THREE.EffectComposer to run it.
We render the scene on a texture
We send this texture to
Now we just have to tell the composer the last pass is the one to be rendered on screen.
Update on each Frame
We got the rendering to do on each frame. Usually we do
But here we render thru the effect composer, so we do
Ok so you have learn how to code a demo like “Have you seen yourself When you are Drunk ?” Pretty Cool! Now you can get more threex extensions and play with it to build your own demos. This is All for Today Folks, have fun! :)