如何访问 WebGLRenderTarget 纹理内容答案

【问题标题】：How to access WebGLRenderTarget texture content如何访问 WebGLRenderTarget 纹理内容
【发布时间】：2015-09-30 13:20:27
【问题描述】：

所以我将场景渲染为纹理，然后我需要在 js 中处理纹理并修改内容或从值数组创建新纹理。

似乎我需要获取 WebGL 上下文并直接与 WebGL 交互来完成此操作。有人知道最好的方法吗？

【问题讨论】：

如果您添加一些代码会有所帮助。
处理纹理/修改内容/从数组创建新纹理是什么意思？我想你需要的是 rendertarget + 片段着色器

标签： three.js render-to-texture rendertarget

【解决方案1】：

我最终只是从渲染器获取 webGL 上下文并调用 gl.readPixels()

var gl = renderer.getContext();
var framebuffer = renderTarget.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
var data = new Uint8Array(renderTarget.width * renderTarget.height * 4);
gl.readPixels(0,0,renderTarget.width,renderTarget.heigh,gl.RGBA,gl.UNSIGNED_BYTE,data);

（renderTarget 是 THREE.WebGLRenderTarget 的一个实例）

【讨论】：

可以改用WebGLRenderer.readRenderTargetPixels( renderTarget, x, y, width, height, buffer )的方法。
使用任何一种方法都会导致数组对 0 或 255 有很大的偏差。两者之间的偏差不大。我期待很多不同的花车。知道为什么这些不是我期待的花车吗？我什至在我的渲染器中添加了 { premultipliedAlpha : false }
像素被定义为 4 个字节的集合。对于 R、G、B 和 A 值。如果需要浮点数，则必须将此数组中的每个条目映射 255。最好使用处理函数内联执行此操作，而不是一次映射所有数组。