將數組寫入Three.WebGLRenderTarget

我試圖在這裏移植示例：david.li/waves從原始webgl到三個。我使用WebGl rendertargets替換他使用的紋理，除了其中一個紋理（即pingPhaseTexture）外，這似乎可以正常工作。將數組寫入Three.WebGLRenderTarget

他的大部分紋理的都是這樣的，在那裏buildTexture的數據參數爲空創建：

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，但是在渲染時引發了一大堆其他問題。

來源

2014-03-12 Aleksandr Albert

什麼「整個其他一堆問題」？你不想使用'DataTexture'作爲模擬的種子，然後在'WebGLRenderTargets'之間進行乒乓？另請參閱：http：//threejs.org/examples/webgl_shaders_ocean.html。 – WestLangley

@WestLangley，我按照你的建議使用數據紋理設置紋理，看着你提到的例子（以及這個：http://jsfiddle.net/EqLL9/4/）我沒有得到任何錯誤了，但我看到的只是一架黑色的飛機。我設置了一個小提琴，以顯示我到目前爲止：http://jsfiddle.net/ttmike/cQ9yM/8/ PS這裏是原創： http://david.li/waves/waves.js –

我無法幫助您調試代碼，但我可以建議您查看three.js框架內GPGPU的另一個示例：http://threejs.org/examples/webgl_gpgpu_birds.html。另外，如果你得到一架黑色的飛機，那麼回到一個超級簡單的three.jsGPGPU框架來產生一些東西，然後從那裏添加一些東西。我一定希望看到你成功。 – WestLangley

我能解決這個問題，你可以查看演示這裏內我的解決方案：

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

編輯：現在可作爲範例章節的R66開發構建的一部分

享受！ :)

來源

2014-03-27 03:36:36

將數組寫入Three.WebGLRenderTarget

回答

相關問題