关键词：
【中文标题】readPixels 函数返回未修改的纹理【英文标题】：readPixels function returns not modified texture 【发布时间】：2013-07-13 00:02:50 【问题描述】：我正在尝试将图像（作为纹理）绘制到帧缓冲区，应用清晰度过滤器（通过在 UI 上拖动滑块），然后从帧缓冲区读取结果并通过调用将数据复制到简单的 2d 画布（不是 webgl）使用绑定的帧缓冲区读取像素，获取像素数组并将它们复制到 ImageData.data，但该函数返回原始纹理。
也许有人可以向我解释一下，因为据我了解，屏幕上的东西实际上是帧缓冲区的内容。
抱歉有很多代码，但我希望它可以帮助理解我在做什么。
(function ()
var anotherContext = null;
var canvas = $("#canvas");
main();
setupCanvas();
function setupCanvas ()
anotherContext = document.getElementById("anothercanvas").getContext("2d");
function main ()
var image = new Image();
image.src = "http://localhost:9292/img/ava.jpg";
image.onload = function ()
render(image);
function render (image)
//-----get contexts----
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('experimental-webgl');
//----define shaders-----
var vs = document.getElementById('vshader').textContent;
var fs = document.getElementById('fshader').textContent;
//----create program-----
var program = createProgram(vs, fs);
gl.useProgram(program);
//----setup vertex data-----
var positionLocation = gl.getAttribLocation(program, "a_position");
var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
//----setup texture-----
var texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
// Create a texture.
var texture = createAndSetupTexture();
// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
//---framebuffer----
var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
var canRead = (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);
console.log("Can read: ", canRead);
//----lookup uniforms and set the resolution-----
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");
var kernelLocation = gl.getUniformLocation(program, "u_kernel[0]");
gl.uniform2f(textureSizeLocation, image.width, image.height);
//----kernels-----
var kernel = [
0, 0, 0,
0, 1, 0,
0, 0, 0
];
var sharpnessKernel = [
0,-1, 0,
-1, 5, -1,
0,-1, 0
];
//-----bind buffer------
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(program.vertexPosAttrib, 2, gl.FLOAT, false, 0, 0);
setRectangle(gl, 0, 0, image.width, image.height);
draw(kernel);
function draw (krn)
// gl.bindTexture(gl.TEXTURE_2D, texture);
setFramebuffer(framebuffer);
drawWithKernel(krn);
copyImage();
// gl.bindTexture(gl.TEXTURE_2D, texture);
setFramebuffer(null);
gl.drawArrays(gl.TRIANGLES, 0, 6);
function setFramebuffer (fbuf)
gl.bindFramebuffer(gl.FRAMEBUFFER, fbuf);
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.viewport(0, 0, canvas.width, canvas.height);
function drawWithKernel (kernel)
gl.uniform1fv(kernelLocation, kernel);
//---draw
gl.drawArrays(gl.TRIANGLES, 0, 6);
function createAndSetupTexture ()
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// Set the parameters so we can render any size 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);
return texture;
function setRectangle (gl, x, y, width, height)
var x1 = x;
var x2 = x + width;
var y1 = y;
var y2 = y + height;
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
x1, y1,
x2, y1,
x1, y2,
x1, y2,
x2, y1,
x2, y2]), gl.STATIC_DRAW);
function createShader(str, type)
var shader = gl.createShader(type);
gl.shaderSource(shader, str);
gl.compileShader(shader);
return shader;
function createProgram (vstr, fstr)
var program = gl.createProgram();
var vshader = createShader(vstr, gl.VERTEX_SHADER);
var fshader = createShader(fstr, gl.FRAGMENT_SHADER);
gl.attachShader(program, vshader);
gl.attachShader(program, fshader);
gl.linkProgram(program);
return program;
function copyImage ()
var pixels = new Uint8Array(image.width * image.height * 4);
gl.readPixels(0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
var imageData = anotherContext.createImageData(image.width, image.height);
for (var i = pixels.length - 1; i >= 0; i--)
imageData.data[i] = pixels[i];
;
// console.log(imageData.data);
anotherContext.putImageData(imageData, 0, 0);
$("#slider").slider(
min: 0,
max: 99,
slide: function (event, ui)
var currentKernel = null;
//do not use any filtering if slider is on 0 position
if(ui.value == 0)
currentKernel = kernel;
else
currentKernel = sharpnessKernel.slice(0);
currentKernel[4] -= (ui.value / 100);
draw(currentKernel);
);
)()
【问题讨论】：
只是一个快速的建议（我要上床了）：在将纹理附加到帧缓冲区对象之前取消绑定。关于帧缓冲区的纹理绑定和附加状态有一些规则，这些规则禁止对帧缓冲区进行操作。最简单的部分是取消绑定纹理：bindTexture(…, 0); - 但是在您的情况下，渲染缓冲区可能更适合作为附件，即纹理。
to datenwolf - 这也不起作用。
【参考方案1】：
您当前的函数和括号设置已完全损坏，这也表明您没有使用firebug 或任何其他web-console 来调试您的javascript。
首先，您应该将一些函数移到主函数之外并获得modern editor，因为它们中的大多数都有显示属于一起的括号的方法。
编辑：看起来类似于来自WebGL fundamentals 的代码。回答您的问题：仅当绑定的帧缓冲区为空时（您可以在该站点上阅读），您才会在屏幕上绘图。
无论如何，您可能会在这个方面得到帮助：Creating texture from getImageData (Javascript) 或可能是 fabric.js image filters
【讨论】：
请指出损坏的地方。代码有点乱，但它是一种概念证明，并且有效。顺便说一句，我正在使用 chrome dev。工具和 sublime 文本编辑器 - 突出显示括号没有问题。 投反对票的答案对您没有帮助，如果您手头有这些工具，请使用它们！保持代码有序是编程的一半，它实际上应该可以解决您的问题，在您当前的代码中，浏览器会在执行任何代码之前退出，因为该代码无效。 您能告诉我您认为代码中的哪些问题吗？否则你的答案根本不相关，与阅读帧缓冲区的内容无关。 一旦代码中的右括号与左括号不匹配，它们需要按照打开时的顺序关闭。同样如前所述，您应该将功能移出主要功能，以提高编码器和浏览器的可读性。只要您正在测试，您就可以（并且应该）使用全局变量和函数，即使您想封装功能，也可以使用classes。将所有内容都放在一个函数中可能会起作用，但这是一种不好的做法，并且代码越长，您就会遇到更多问题。 看，这根本不是生产代码。感谢您告诉我最佳实践，但这并不重要，因为我只需要查看原型是否正常工作。括号匹配并且代码工作正常，除了帧缓冲区有问题。请，如果您对实际问题没有什么要说的，请不要向问题发送垃圾邮件。GLSL 纹理函数只为天空盒返回黑色
】GLSL纹理函数只为天空盒返回黑色【英文标题】：GLSLTextureFunctionReturningOnlyBlackForSkyBox【发布时间】：2015-05-0400:50:46【问题描述】：我正在尝试通过使用GLSL对四边形进行纹理化来为我的OpenGL场景生成天空盒。但是，当我尝试使用... 查看详情
SpriteKit 示例游戏错误：纹理未加载？
...题描述】：今天我尝试在模拟器或iPhone上运行简单的、未修改的“Adventure”spritekit示例(downloadedfromApple)，并遇到了一个非常奇怪的行为：纹理全部替换为一个大的红色“X”根本没有运行时错误，但是当我在 查看详情
纹理未通过 glGenerateMipmap() 加载
...teMipmap加载纹理。我从resource.h文件加载BMP纹理。我的加载函数在WM_CREATE上调用，如下所示：voidLoadTEX()GLuinttexture;HBIT 查看详情
OpenGL 纹理未按定义显示
...编码纹理以用作我的OpenGL应用程序的调试纹理。定义它的函数是：voidTexture::initDebugTexture(void)unsignedcharpixels[]=255,0,255,0,255,255,255,0,255,0,255 查看详情
从 glutKeyboardFunc 回调函数中寻找未修改的键盘输入
】从glutKeyboardFunc回调函数中寻找未修改的键盘输入【英文标题】：LookingforunmodifiedkeyboardinputfromglutKeyboardFunccallbackfunction【发布时间】：2013-08-2819:15:32【问题描述】：我已经有一段时间没有使用Glut进行键盘输入处理了，但我觉得... 查看详情
加载的 2D 纹理未将自身绑定到 QUAD
...ID绑定时（见下面的代码，在xxxxxxxxx...cmets包围的renderScene函数内），没有纹理被应用到QUAD；它保持无色。也没有错误消息。我已经在我的程序 查看详情
opengl-纹理相关函数
参考技术A本文主要记录一些OpenGL中有关纹理相关的函数，有些函数使用频率不高，简单记录一下，为将来遇到使用场景时，有个快速的查看途经。GL_UNPACK_ALIGNMENT指内存中每个像素⾏起点的排列请求，允许设置为1（byte排列）... 查看详情
osg::readpixels,glreadpixels截图，保存图片的alpha不对，总是255
...a值，也就是背景的alpha值全为0，但是在公司上用_image->readPixels(448,28,1024,1024,GL_RGBA,GL_UNSIGNED_BYTE);截图出来的是成功有alpha值的，但是就是alpha值全为255(1)，因为1个a 查看详情
纹理图集中的纹理未加载或出现
】纹理图集中的纹理未加载或出现【英文标题】：Texturesfromtextureatlasarenotloadingorappearing【发布时间】：2015-10-0904:30:53【问题描述】：由于某些奇怪的原因，我的纹理图集中的纹理没有加载。我不知道为什么。以下是我通常如何声... 查看详情
opengl纹理操作--glgentextures(代码片段)
一.glGenTexture函数简介glGenTextures(GLsizein,GLuint*textures)函数说明 n：用来生成纹理的数量 textures：存储纹理索引的 glGenTextures函数根据纹理参数返回n个纹理索引。纹理名称集合不必是一个连续的整数集合。 （glGenTextures... 查看详情
opengl纹理操作--glgentextures(代码片段)
一.glGenTexture函数简介glGenTextures(GLsizein,GLuint*textures)函数说明 n：用来生成纹理的数量 textures：存储纹理索引的 glGenTextures函数根据纹理参数返回n个纹理索引。纹理名称集合不必是一个连续的整数集合。 （glGenTextures... 查看详情
如何声明函数的返回类型，返回未命名的表
】如何声明函数的返回类型，返回未命名的表【英文标题】：Howtodeclarereturningtypeforfunction,returningunnamedtable【发布时间】：2014-03-2008:29:01【问题描述】：我想创建一个函数，它返回一个有2列的表：iinteger--orbigint?arrinteger[]--arrayofint... 查看详情
Amazon CloudFront 未针对未更改的静态内容始终返回 304（未修改）？
】AmazonCloudFront未针对未更改的静态内容始终返回304（未修改）？【英文标题】：AmazonCloudFrontnotconsistentlyreturning304(NotModified)forunchangedstaticcontent?【发布时间】：2014-06-0623:53:21【问题描述】：EC2Web服务器网格在ELB负载均衡器后面运... 查看详情
Azure 函数对象返回未返回正确的嵌套值
】Azure函数对象返回未返回正确的嵌套值【英文标题】：AzureFunctionObjectReturnnotreturningcorrectnestedvalues【发布时间】：2021-11-1100:23:27【问题描述】：我有一个API预期会返回如下结果（其中包含从CosmosDB获取的数据）publicclassConsumerRespo... 查看详情
未找到金属“纹理”
】未找到金属“纹理”【英文标题】：Metal\'texture\'notfound【发布时间】：2017-06-1410:52:48【问题描述】：对于基于Metal的ImageView的每一个实现，我都面临着同样的问题lettargetTexture=currentDrawable?.textureelsereturn“MTLDrawable”类型的值没... 查看详情
递归函数的返回值为“未定义”
】递归函数的返回值为“未定义”【英文标题】：Returnvalueofrecursivefunctionis\'undefined\'【发布时间】：2013-07-0521:34:54【问题描述】：每当我执行这个sn-p时，console.log在return之前返回的数组是23的20倍。但是console.log(Check(users,0,20));仅... 查看详情
为啥Node中的函数返回未定义？
】为啥Node中的函数返回未定义？【英文标题】：WhydoesfuntioninNodereturnundefined?为什么Node中的函数返回未定义？【发布时间】：2022-01-1915:31:14【问题描述】：在我发出成功的http请求（状态码：200）后，我需要配置我的端点的基本url... 查看详情
导出时返回未定义的函数
】导出时返回未定义的函数【英文标题】：Functionreturningundefinedwhenexported【发布时间】：2021-01-3101:55:00【问题描述】：我在node.js中创建了一个具有2个函数的模块-takeInput和getEventEmitter。这两个都是出口的。但是当我需要它是其他... 查看详情