Tuesday, August 27, 2013

WebGL: Displaying Video on Wobbly, Moving Surfaces

Today there was a message from lyc78026 to the WebGL Developer mailing list that asked this:

I want to implement a curved surface in WebGL, and map a video texture to the surface, is this possible? 
Something like this:
https://dl.dropboxusercontent.com/u/73906326/img.png 
Thank you!
To which I responded the following in an email to lyc78026:

WebGL can be made to do almost anything, so it certainly is possible for a webGL app to wrap a video around a cylinder as your link indicates.

Unfortunately, my skill level is not up to the necessary WebGL level of coding. So I tend to use libraries such as Scene.js and and Three.js to do the heavy lifting.

Thus, using these three.js examples as starting points, it was not difficult to come up with the Sintel video on playing on a cylindrical surface:

Note that you can use your mouse to spin the cylinder.

http://jaanga.github.io/cookbook/video-surfaces/r1/threejs-video-surface-canvas-cylinder.html

When I finally was able to get the video running, it looked a bit 'old-school'. So wondered a bit and here is the video playing skewed at an angle on a cylinder.

http://jaanga.github.io/cookbook/video-surfaces/r1/threejs-video-surface-canvas-skewed.html

I had no idea that you could this. And this made me wonder some more. How about bending the video in two directions? And having twenty videos at the same time? Bingo!

http://jaanga.github.io/cookbook/video-surfaces/r1/threejs-video-surface-canvas-sphere.html

Then after looking at this for a while, I began to feel that somewhere maybe I had seen stuff like this before. So what could I build that Remi has not seen before? Remi has seen nearly everything 3D. So here is the video running inside a torus.

http://jaanga.github.io/cookbook/video-surfaces/r1/threejs-video-surface-canvas-torus.html

My guess is that once you have viewed 'Blade Runner' from inside the Torus that you are good to go in the Matrix.

So now I was on a roll. The video was running like butter through my finger tips. And then I had a flash of inspiration.

When I was young, all our TVs had aerials that were two metal rods sticking up and we called them 'rabbit ears'. What I wanted to do was project the video onto this rabbit: http://mrdoob.github.io/three.js/examples/#webgl_loader_vtk.

Then I could say something like "In the old days all TVs had rabbit ears, but today all you need is the rabbit" ;-)

But that was a fail. And my attempt at projecting the video onto a 3D model of Walt Disney's head was also a fail.

And I thought, OMG, lyc78026 will be sorely disappointed if is there is not a good closing demo.

But as I was having those horrid gloomy thoughts and bad experiences, a light bulb lit up over the top of my head.

Of course, the video does not want to run on the 'bunny.js' and 'WaltDisneyLo.js' because these are static objects. The Sintel video is a moving picture thing. The video is only going to run on something that is in and of itself 'running'.  If this thing is going to work,the closing demo needs to a moving picture, moving picture [sick] thing. Otherwise the Sintel video will walk off the set.

And we all know where that is going: to zz85's roller coaster ride [Toggle 'Camera Spline Animation View' to: On]

Again, I don't have Singaporean elementary school math in my kit of tools.

But, be still my heart, I do have my algorebra routines - which is algebra as made known to the world by Al Gore while holding a bra.

If algebra ever drove you to tears then these routines are truly moving pictures.

Let's see how the Sintel video takes on a transcendental function:

http://jaanga.github.io/cookbook/video-surfaces/r1/threejs-video-surface-transcend.html

Pretty moving, huh?

Moving wobbly text can be done in Three.js. QED mostly, therefore it can be done in WebGL.

lyc78026: Got any more fun, moving 3D questions?

Link to Source Code
https://github.com/jaanga/cookbook/tree/gh-pages/video-surfaces


1 comment:

  1. IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    JavaScript Online Training in India

    JavaScript Training in India

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete