Mon 2010-01-18 ( En pr pi )

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.

Firefox only; you'll be asked for permission.
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);

Say something! / Sag was!

Very interesting, but steering this object is very difficult ;) 
For ex. try press Page Down :)
Krikol @ 17:03 on Monday, 2010-02-01
absolutely. try clicking on one of the input fields, this should stop the scrolling.
murphy @ 23:06 on Monday, 2010-02-01
That's awesome. I did a similar thing with Canvas3D (with videos http://visionpc.cs.uiuc.edu/~sorokin2/3Dbrowser/index.html and w/o sound:), though it wasn't nearly as clean. For some reason enablePrivilege never worked for me.

I actually think WebGL can allow such things - the texture load must be support this natively and be a one-way operation. I.e. if you use this, you can't read pixel values.
Alex Sorokin @ 15:37 on Saturday, 2010-02-06
cool,looking around for something like this
Thankx. 

niceman @ 02:32 on Monday, 2010-08-02
/webgl/webcrate.html not found ?
Simone @ 18:50 on Tuesday, 2010-11-23

No markup, just plain monospace text. / Kein Markup, nur Normschrift-Klartext.