- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我打算用 JS 创建一个简单的照片编辑器。我的主要问题是,是否可以创建实时渲染的滤镜?例如,调整亮度和饱和度。我只需要一张 2D 图像,我可以在其中使用 GPU 应用滤镜。
我读过的所有教程都非常复杂,并没有真正解释 API 的含义。请指出正确的方向。谢谢。
最佳答案
我打算写一个教程并将其发布在我的博客上,但我不知道我什么时候有时间完成所以这就是我所拥有的
Here's a more detailed set of posts on my blog .
WebGL实际上是一个光栅化库。我接收属性(数据流)、制服(变量),并希望您提供二维的“裁剪空间”坐标和像素的颜色数据。
这是 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>
这将绘制一个整个 Canvas 大小的绿色矩形。
在 WebGL 中,您有责任提供一个提供裁剪空间坐标的顶点着色器。无论 Canvas 大小如何,裁剪空间坐标总是从 -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);
您想处理需要传入纹理的图像。以同样的方式, Canvas 的大小由裁剪空间坐标表示,纹理由从 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);
等等...单击下面的最后一个链接以获取卷积示例。
这里是工作版本,进展略有不同
Draw Rect with origin at top left
Draw a bunch of rects in different colors
Draw an image red and blue swapped
Draw an image with left and right pixels averaged
关于javascript - 使用 WebGL 进行二维图像处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8652985/
我只是想知道需要什么样的计算/编程语言/框架来生成图像,例如 http://www.erdas.com/ 中的图像。 ? 以编程方式,如何生成一般空间分析图像? ps:我大部分时间都在使用java。
我尝试在我的 grails 项目(Mac OS X 上的 1.1.1)中使用一些图像处理插件或 java 库:imageTools 插件、imageJ、awt 库等。每次我从路径打开/获取图像以启动进
我有一个项目,我必须以多种方式处理图像。我陷入了像素化的困境。 对于像素化,我必须采用一组 10x10 像素并返回一个单独平均 RGB 颜色的单元格。目前我在运行程序中得到的只是一个红色图像。谢谢您的
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
这是一项作业,因为我是Python编程新手,所以我付出了很大的努力: 我正在运行以下函数,它接受图像和短语(空格将被删除,因此只有文本)作为参数,我已经获得了所有导入和预处理代码,我只需要实现这个函数
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我需要一种简单易学且快速的方法来从背景图像、文本生成图像,然后保存为 JPEG 格式。 您有什么建议?有关于此的任何图书馆或教程吗?重要的标准是简单。 最佳答案 在 .Net 3.5/4 中,您还可以
我正在构建一个夜视应用程序,但我没有找到任何有用的算法可以应用于黑暗图像以使其清晰。任何人请给我一些好的算法。 提前致谢 最佳答案 由于 iphone 镜头和传感器的尺寸,无论您做什么,都会有很多噪音
所以我为游戏制作了这个程序,需要帮助让它更自动化一些。 程序接收图像然后显示它。我正在对 OpenGL 中的纹理执行此操作。当我截取游戏截图时,它通常约为 700x400。我将高度和宽度输入到我的程序
我想更改图像中像素的值,为此我需要将图像存储为矩阵。我怎样才能完成这项工作?请指导。 最佳答案 BufferedImage image = ImageIO.read(..); image.setRGB
概述: 我正在做一个视频创作项目。我使用的技术有:imageMagick、php、ffmpeg。 当前状态: 目前,该项目能够使用图像和文本以及很少的基本过渡来创建视频。我这样做的方式是使用 imag
我正在创建 facebook 应用程序,其中我将用户图像作为背景图像,并有一个用户可以四处移动的默认大写图像。用户将叠加图像(一顶帽子)放在正确的位置后,他点击保存 这就是我感到震惊的地方,我想知道如
我正在尝试编写一个 JavaScript 程序,通过在图像上放置三个垂直条纹来修改图像。左边三分之一是红色条纹,中间是绿色条纹,右边三分之一是蓝色条纹。 这是我试图实现的算法:1. 从您要更改的图像开
目前,我正在尝试通过图像分割方法将面部和头发修剪在一起,然后将所有非彩色像素设置为透明,然后尝试使用Binary Threshold技术和Adaptive Threshold。但是我得到了不希望的结果
我必须使此图像Book Image To Process的页面标题为:“单元3:主动学习的秘诀”,使其成为图像中的唯一页面 为此,我需要删除也在图像中的其他页面的一部分 我需要编写一个通用代码,可以对
我正在研究一个问题,其中我缩小图像的尺寸,在缩小图像中找到类似于二进制图像的有趣点。现在我只想放大在缩小图像中找到的有趣点(即白色像素点),而不是放大整个图像然后找到有趣的点。哪种技术可以最好地用于此
Closed. This question needs debugging details。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic用于堆栈溢出。 上个月关闭。 I
嗨,我需要编写一个程序,从灰度图像中删除分界(图像中带有文本) 我阅读了有关阈值和模糊的信息,但我仍然不知道该怎么做。 我的图像是这样的希伯来文本图像: 我需要删除分界线(假设分界线是图像中的最小元素
我正在做一个带有深度图像的项目。但是我的深度相机有噪音和像素读取失败的问题。有一些点和轮廓(尤其是边缘)的值为零。如何忽略这个零值并将其与周围的值混合? 我试过 dilation和 erosion (
我正在做一个大学项目,我需要在java中处理图像。前段时间我在数学实验室工作,这很容易,所以我想知道是否存在任何可以让我玩像素值、颜色(按像素)、RGB 模型、灰度图像等的 java 库。 最佳答案
我是一名优秀的程序员,十分优秀!