将数组写入 Three.WebGLRenderTarget答案

【问题标题】：Write array to Three.WebGLRenderTarget将数组写入 Three.WebGLRenderTarget
【发布时间】：2014-03-12 23:31:04
【问题描述】：

我正在尝试将示例移植到此处：david.li/waves 从原始 webgl 到三个。我正在使用 WebGl 渲染目标来替换他使用的纹理，这似乎工作正常，除了其中一种纹理，即 pingPhaseTexture。

他的大部分贴图都是这样创建的，其中buildTexture的data参数为null：

var buildTexture = function (gl, unit, format, type, width, height, data, wrapS, wrapT, minFilter, magFilter) {
    var texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0 + unit);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, 0, format, type, data);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
    return texture;
};
initialSpectrumTexture = buildTexture(gl, INITIAL_SPECTRUM_UNIT, gl.RGBA, gl.FLOAT, RESOLUTION, RESOLUTION, null, gl.REPEAT, gl.REPEAT, gl.NEAREST, gl.NEAREST);

我像这样移植到三个：

this.initialSpectrumFramebuffer = new THREE.WebGLRenderTarget(RESOLUTION, RESOLUTION, renderTargetNearestClampFloatParams);

这似乎工作正常，但他使用的一个纹理由他作为数据参数传入的数组填充：

 var phaseArray = new Float32Array(RESOLUTION * RESOLUTION * 4);
    for (var i = 0; i < RESOLUTION; i += 1) {
        for (var j = 0; j < RESOLUTION; j += 1) {
            phaseArray[i * RESOLUTION * 4 + j * 4] = Math.random() * 2.0 * Math.PI;
            phaseArray[i * RESOLUTION * 4 + j * 4 + 1] = 0;
            phaseArray[i * RESOLUTION * 4 + j * 4 + 2] = 0;
            phaseArray[i * RESOLUTION * 4 + j * 4 + 3] = 0;
        }
    }
 var pingPhaseTexture = buildTexture(gl, PING_PHASE_UNIT, gl.RGBA, gl.FLOAT, RESOLUTION, RESOLUTION, phaseArray, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.NEAREST, gl.NEAREST);

如何将 phaseArray 作为 WebGLRenderTarget 的帧缓冲区传递？我尝试使用 DataTexture 代替，但是在渲染时会引发一大堆其他问题。

【问题讨论】：

什么“其他一堆问题”？您不想使用DataTexture 作为模拟的种子，然后在WebGLRenderTargets 之间进行乒乓球吗？另请参阅：threejs.org/examples/webgl_shaders_ocean.html。
@WestLangley，我按照您的建议使用数据纹理设置了纹理，并查看了您提到的示例（以及这个：jsfiddle.net/EqLL9/4）我不再收到任何错误，但我看到的只是一架黑色飞机。我设置了一个小提琴来展示我到目前为止所拥有的：jsfiddle.net/ttmike/cQ9yM/8 PS 这里是原件：david.li/waves/waves.js
我不能帮你调试你的代码，但我可以建议你看一下three.js框架内的另一个GPGPU示例：threejs.org/examples/webgl_gpgpu_birds.html。此外，如果你得到一个黑色的飞机，然后备份到一个超级简单的 three.js GPGPU 框架，它会产生一些东西，然后从那里添加一些碎片。我当然希望看到你成功。
@WestLangley 我正在取得进展，您知道是否可以使用 TRIANGLE_STRIP 绘制三个？我知道 Ribbon 曾经实现它，但在 r66 中已弃用
目前框架下是不可能的。

标签： three.js webgl

【解决方案1】：

我能够解决这个问题，您可以在此处的演示中查看我的解决方案：

http://www.routter.co.tt/Demo/Ocean

编辑：现在在示例部分中作为 r66 开发版本的一部分提供

享受吧！ :)

【讨论】：