使用WebGL绘制图像 [英] Drawing an image using WebGL

问题描述

请有人解释如何在WebGL画布上绘制图像吗？目前，在常规的'2d'画布上，我正在使用它：

Please could anyone explain how to draw an image on a WebGL canvas? At the moment, on a regular '2d' canvas, I'm using this:

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');

img.onload = function() {
    cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = "data:image/jpeg;base64," + base64var;

使用WebGL似乎你必须使用纹理等。任何人都可以解释我将如何调整这段代码对于WebGL？谢谢您的帮助！ ：）

With WebGL it seems you have to use textures, etc. Can anyone explain how I would adapt this code for WebGL? Thanks for the help! :)

推荐答案

WebGL不适合绘制图像这样简单的任务，因为3D世界由矩阵，相机组成，纹理，顶点等。在一个stackoverflow.com回答中解释它可能有点过头了。

WebGL is not suitable for such a simple task as drawing an image, as 3D world consists of matrixes, cameras, textures, vertices and such. Explaining it in one stackoverflow.com answer might be little overdoing it.

这是一个如何绘制旋转立方体的教程：

Here is a tutorial how do draw a spinning cube:

http://www.khronos.org/webgl/wiki/Tutorial

如果你想使用WebGL进行图像过滤，考虑使用一个重量级的图书馆：

If you want to use WebGL for image filtering considering using a library doing heavy lifting for you:

http://evanw.github.com/webgl-filter/

这篇关于使用WebGL绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！