CODEWITHSUNDEEP
three.jswebgl
Aleksandr Albert
Aleksandr Albert

Reputation: 1877

Write array to Three.WebGLRenderTarget

I'm trying to port the example here: david.li/waves from raw webgl to three. I am using WebGl rendertargets to substitute the textures he uses, which seems to work ok except for one of the textures, namely the pingPhaseTexture.

Most of his textures are created like this, where buildTexture's data parameter is 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);

Which I ported to THREE like this:

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

This seems to work ok but there is one texture he uses which is populated by an array which he passes in as the data parameter:

 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);

How can I pass phaseArray as the framebuffer for a WebGLRenderTarget? I tried using a DataTexture instead but that raises a whole bunch of other problems when it comes time to render.

Upvotes: 2

Views: 758

Answers (1)

Aleksandr Albert
Aleksandr Albert

Reputation: 1877

I was able to solve this problem, and you can view my solution within the demo here:

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

EDIT: Now available as part of the r66 dev build in the examples section

enjoy! :)

Upvotes: 1

Related Questions