Question

我试图在这里移植示例：david.li/waves从原始webgl到三个。我使用WebGl rendertargets来替换他使用的纹理，除了其中一个纹理，即pingPhaseTexture之外，它似乎工作正常。

他的大多数纹理都是这样创建的，其中buildTexture的数据参数为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，但是在渲染时会引发一大堆其他问题。

Answer 1

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

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

编辑：现在作为示例部分中的r66 dev构建的一部分提供

享受！：）

将数组写入Three.WebGLRenderTarget

1 个答案: