javascript - Base64 图像到 WebGL 上下文(用于 readPixels)

Question

图像采用 Base64 格式，我想比较像素关系。

在了解 GPU 的工作原理后，我认为这种类型的分析在 Canvas webgl 上下文中表现最佳，而不是像我之前使用的 2d 。我以前没有使用过 WebGL，我知道它的水平非常低。

有谁知道将 Base64 放入 webgl 上下文中的有效方法，我可以在其中读取像素并迭代/与这 100 万像素进行比较？

谢谢

Answer 1

您可以做的是将图像放入纹理中，使用着色器计算差异，然后从帧缓冲区中读取它们(使用readPixels)并将它们相加，例如计算误差.

要放置 Base64 编码的图像，您需要创建一个 Image 对象，然后将其分配给纹理:

var image = new Image();
// You can omit using onload and asynchronous code,
// but unfortunately it's not fully reliable :(
image.onload = function () {
    /* ... */
};
// Here you'll need to know format of the image (png, jpeg...).
image.src = 'data:image/jpeg;base64,' + base64EncodedImage;

// gl here is the context
var textureId = gl.createTexture();
gl.bindTexture(gl.TEXTURE2D, texture);
gl.texImage2D(gl.TEXTURE2D, /* ... */, image);

之后，您可以使用上传的图像(甚至渲染的图像)来计算差异，例如，该着色器:

// texture coordinates
varying vec2 uv;

uniform sampler2D texture1;
uniform sampler2D texture2;

void main(void) {
    vec4 texel1 = texture2D(texture1, uv);
    vec4 texel2 = texture2D(texture2, uv);
    gl_FragColor = abs(texel1 - texel2);
}

然后从帧缓冲区读取差异数据:

var diffData = new Uint8Array();
gl.readPixels(/* ... */, diffData);

// Process diffData...

但是，如果这是您第一次使用 WebGL，我强烈建议您遵循 gman 的建议并学习 WebGL 本身。这是一项强大的技术，并且知道它将成为您工具箱中的一个好工具:)