使用WebGL进行2D图像处理

Question

我打算在JS中创建一个简单的照片编辑器。 我的主要问题是，是否可以创建实时渲染的过滤器？ 例如，调整亮度和饱和度。 我只需要一个2D图像，我可以使用GPU应用滤镜。

我读过的所有教程都非常复杂，并没有真正解释API的含义。 请指出我正确的方向。 谢谢。

Answer 1

我打算写一个教程并将它发布在我的博客上，但我不知道我什么时候有时间完成所以这里是我的内容 这里是我博客上更详细的帖子 。

WebGL实际上是一个光栅化库。 我接受属性（数据流），制服（变量）并期望您在2d中提供“剪辑空间”坐标，并为像素提供颜色数据。

这是WebGL中2d的简单示例（遗漏了一些细节）

// Get A WebGL context
var gl = canvas.getContext("experimental-webgl");

// setup GLSL program
vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");

// Create a buffer and put a single clipspace rectangle in
// it (2 triangles)
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
   -1.0, -1.0,
    1.0, -1.0,
   -1.0,  1.0,
   -1.0,  1.0,
    1.0, -1.0,
    1.0,  1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

// draw
gl.drawArrays(gl.TRIANGLES, 0, 6);

这是2个着色器

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
   gl_Position = vec4(a_position, 0, 1);
}
</script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
   gl_FragColor = vec4(0,1,0,1);  // green
}
</script>

这将绘制整个画布大小的绿色矩形。

在WebGL中，您有责任提供提供剪贴空间坐标的顶点着色器。 无论画布的大小如何，Clipspace坐标始终从-1到+1。 如果你想要3d，你需要提供从3d转换为2d的着色器，因为 WebGL只是一个光栅化API

在一个简单的示例中，如果要以像素为单位工作，可以传入使用像素而不是剪辑空间坐标的矩形，并将其转换为着色器中的剪辑空间

例如：

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform vec2 u_resolution;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace, 0, 1);
}
</script>

现在我们可以通过改变我们提供的数据来绘制矩形

// set the resolution
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);

// setup a rectangle from 10,20 to 80,30 in pixels
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    10, 20,
    80, 20,
    10, 30,
    10, 30,
    80, 20,
    80, 30]), gl.STATIC_DRAW);

您会注意到WebGL认为右下角为0,0。 为了使它成为用于2D图形的更传统的右上角，我们只需翻转y坐标。

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

您想要操纵传递纹理所需的图像。 以相同的方式，画布的大小由剪辑空间坐标表示，纹理由从0到1的纹理坐标引用。

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace, 0, 1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
}
</script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision float mediump;

// our texture
uniform sampler2D u_image;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>

要绘制图像需要加载图像，因为这是异步发生的，我们需要稍微更改一下代码。 获取我们拥有的所有代码并将其放在一个名为“render”的函数中

var image = new Image();
image.src = "http://someimage/on/our/server";  // MUST BE SAME DOMAIN!!!
image.onload = function() {
  render();
}

function render() {
   ...
   // all the code we had before except gl.draw


   // look up where the vertex data needs to go.
   var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");

   // provide texture coordinates for the rectangle.
   var texCoordBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
       1.0,  1.0, 
       0.0,  1.0, 
       0.0,  0.0, 
       1.0,  1.0, 
       0.0,  0.0, 
       1.0,  0.0]), gl.STATIC_DRAW);
   gl.enableVertexAttribArray(texCoordLocation);
   gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);

   var texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

   gl.draw(...)

如果要进行图像处理，只需更改着色器即可。 例如，交换红色和蓝色

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord).bgra;
}

或者与旁边的像素混合。

uniform vec2 u_textureSize;

void main() {
   vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
   gl_FragColor = (texture2D(u_image, v_texCoord) +
                   texture2D(u_image, v_texCoord + vec2(onePixel.x, 0.0)) +
                   texture2D(u_image, v_texCoord + vec2(-onePixel.x, 0.0))) / 3.0;
}

我们必须传递纹理的大小

var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");
...
gl.uniform2f(textureSizeLocation, image.width, image.height);

等等...单击下面的最后一个链接获取卷积样本。

以下是具有略微不同进展的工作版本

在剪辑空间中绘制Rect

以像素为单位绘制矩形

在左上角绘制带原点的Rect

画出一堆不同颜色的rects

画一个图像

绘制图像红色和蓝色交换

绘制平均左右像素的图像

使用3x3卷积绘制图像

绘制具有多种效果的图像

Answer 2

您可以为要使用的每个操作创建自定义像素着色器。 只需学习一些GLSL并按照“ 学习WebGL ”教程来掌握基本的WebGL。

您可以使用着色器渲染图像，修改可以包含的参数以控制不同的视觉样式，然后当用户单击“确定”时，您可以回读像素以将其存储为当前图像。

请记住避免跨域图像，因为这将禁用像素的读取。

另外，请查看快速参考卡 （PDF）以获取着色器操作的快速信息。

Answer 3

试试glfx（ http://evanw.github.com/glfx.js/ ）我认为这正是你所需要的。 您可以使用一组预定义着色器或轻松添加您的;）享受！ 使用glfx非常容易！

<script src="glfx.js"></script>
<script>

window.onload = function() {
    // try to create a WebGL canvas (will fail if WebGL isn't supported)
    try {
        var canvas = fx.canvas();
    } catch (e) {
        alert(e);
        return;
    }

    // convert the image to a texture
    var image = document.getElementById('image');
    var texture = canvas.texture(image);

    // apply the ink filter
    canvas.draw(texture).ink(0.25).update();

    // replace the image with the canvas
    image.parentNode.insertBefore(canvas, image);
    image.parentNode.removeChild(image);
};

</script>
<img id="image" src="image.jpg">