Write array to Three.WebGLRenderTarget

Question

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.

What "whole other bunch of problems"? Don't you want to use the DataTexture as the seed for your simulation, and then ping-pong between the WebGLRenderTargets? Also, see: threejs.org/examples/webgl_shaders_ocean.html. — WestLangley
– WestLangley, Commented Mar 13, 2014 at 1:56
@WestLangley, I set up the texture using a data texture as you suggested and looked at the example you mentioned (as well as this this one: jsfiddle.net/EqLL9/4) I don't get any errors anymore, but all I see is a black plane. I set up a fiddle to show what I have so far: jsfiddle.net/ttmike/cQ9yM/8 PS here is the original: david.li/waves/waves.js — Aleksandr Albert
– Aleksandr Albert, Commented Mar 16, 2014 at 4:08
I can't help you debug your code, but I can suggest that you look at another example of GPGPU within the framework of three.js: threejs.org/examples/webgl_gpgpu_birds.html. Also, if you are getting a black plane, then back up to a super simple three.js GPGPU framework that produces something, and then add on pieces from there. I would definitely like to see you succeed. — WestLangley
– WestLangley, Commented Mar 16, 2014 at 4:47
@WestLangley I am making progress, do you know if it is possible to draw with TRIANGLE_STRIP in three? I know Ribbon used to implement it but thats been deprecated in r66 — Aleksandr Albert
– Aleksandr Albert, Commented Mar 18, 2014 at 22:28

Aleksandr Albert · Accepted Answer · 2014-03-31 02:16:40Z

1

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! :)

edited Mar 31, 2014 at 2:16

answered Mar 27, 2014 at 3:36

Aleksandr Albert

1,8771 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Write array to Three.WebGLRenderTarget

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related