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
No comments:
Post a Comment