Two weeks ago, I demonstrated how to draw text on a WebGL texture. Eric Shepherd is even rendering video [warning: with sound]. Today, I’m rendering web content – that’s to say, a HTML page.
Again, I’m using the canvas 2d context to draw the content before using its data for the texture. The example is also based on Giles’ WebGL Lesson 7.
Mozilla’s Firefox has a unique feature called drawWindow. It’s not secure and thus you have to ask the user for explicit permission. So, it’s not ready for general usage, but it’s a nice demonstration.
Note: Before the example works, you have to enable the signed.applets.codebase_principal_support option in about:config. Disable it afterwards!
I also use an IFrame. So, this is about as evil as it gets.
You need a WebGL-enabled Firefox to see this.
Here’s the code:
if (!crateTexture) crateTexture = gl.createTexture();// a hidden iframe var iframe = document.createElement('iframe'); iframe.height = '10px'; iframe.width = 1024; iframe.style.visibility = 'hidden';
// use a big texture var canvas = document.createElement("canvas"); canvas.width = 2048; canvas.height = 2048; document.body.appendChild(canvas); var ctx = canvas.getContext("2d");
iframe.addEventListener("load", function() { // draw onto the canvas; drawWindow needs permissions netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); // wrap around four times to get more content into the texture ctx.scale(0.5, 0.5); for (var i = 0; i < 4; i++) { ctx.drawWindow(iframe.contentWindow, 0, i * 4096, iframe.width, 4096, 'transparent'); ctx.translate(iframe.width, 0); } handleLoadedTexture(ctx.canvas, crateTexture); }, true);
// load the Wikipedia article about cats iframe.src = 'http://en.wikipedia.org/w/index.php?title=Cat&printable=yes'; window.document.body.appendChild(iframe);