Three.js从WebGLRenderTarget (water )检索数据
我正试图将这个(http://madebyevan.com/webgl-water/)移植到三个。我想我离得越来越近了(只是想要现在的模拟，还不关心焦散/折射)。我想让它的GPU提升与着色器工作。
下面是我目前使用着色器进行的三种设置：http://jsfiddle.net/EqLL9/2/ (第二个较小的平面用于调试当前WebGLRenderTarget中的内容)
我正在挣扎的是从WebGLRenderTarget (在我的例子中是rtTexture)中读取数据。在这个例子中，你会看到围绕中心点的4个顶点向上移动。这是正确的(经过一个模拟步骤)，因为它开始于中心点是唯一的位移点。
如果我能够从rtTexture中读取数据并更新每个帧的数据纹理(buf1)，那么模拟就应该有适当的动画。如何直接从WebGLRenderTarget读取数据？所有示例演示如何向目标发送数据(呈现给目标)，而不是从中读取数据。还是我做错了？有东西告诉我，我将不得不与多种纹理工作，并以某种方式来回交换，类似于埃文是如何做到的。
TL;DR:在这样的调用之后，如何将数据从WebGLRenderTarget复制到DataTexture：
`// render to rtTexture` `renderer.render( sceneRTT, cameraRTT, rtTexture, true );` 编辑:可能已经找到解决方案在jsfiddle /gero3/UyGD8 8/9/将调查和报告。
回答 1
Stack Overflow用户
发布于 2013-08-11 11:22:44
好的，我知道了如何使用本地webgl调用读取数据：
// Render first scene into texture
renderer.render( sceneRTT, cameraRTT, rtTexture, true );
// read render texture into buffer
var gl = renderer.getContext();
gl.readPixels( 0, 0, simRes, simRes, gl.RGBA, gl.UNSIGNED_BYTE, buf1.image.data );
buf1.needsUpdate = true;模拟现在有动画了。然而，它似乎没有正常工作(可能是我忽略的一个愚蠢错误)。似乎高度值从来没有受到影响，我不知道为什么。来自buf1的数据用于片段着色器，它计算新的高度(在RGBA中为红色)，阻尼值(乘以0.99)，然后将其呈现为纹理。然后，我将更新后的数据从纹理中读取回buf1。
以下是最新的小提琴：http://jsfiddle.net/EqLL9/3/
随着我的进步，我会不断更新这一点。
编辑:现在效果很好。刚刚实现了法线，现在致力于环境反射和折射(同样纯粹通过着色)。http://relicweb.com/webgl/rt.html
https://stackoverflow.com/questions/18167797
复制
相似问题
THREE.js:从THREE.WebGLRenderTarget获取数据
CocoonJS + Three.js webGLRenderTarget静默死亡
Three.js -渲染WebGLRenderTarget纹理最有效的方法是什么？
重用WebGLRenderTarget
Three.js r84 - EffectComposer:不能重复使用WebGLRenderTarget.texture
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
