solved Transform feedback buffer

[Pryme8]

What would be the equivalent of:

 var gl = this.gl, w = this.statesize.x, h = this.statesize.y;
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers.step);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
                            gl.TEXTURE_2D, this.textures.front, 0);
    var rgba = new Uint8Array(w * h * 4);
    gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
    return rgba;

which you would then use this rgba value to draw to a buffer with glTexSubImage2D();

How would I go about this with bjs?

  Is this what I am looking for?

I would know how to do it if the shader filled up the whole screen, but I am struggling on how to grab that pixel data on a shader on a mesh.

[Pryme8]

https://github.com/BabylonJS/Babylon.js/blob/45a3a3ac54e1ea67404682c90d4b37cdfa2d6af2/src/Particles/babylon.gpuParticleSystem.ts#L355

Maybe this is what I am looking for?

[Guest]

Yes! GPU particles work with transform feedback buffer:

(see here: http://doc.babylonjs.com/features/webgl2)

 

[Pryme8]

But how would one go about using it outside of the GPU system?

I was reading the GPU particle ts file but it was a little hard to follow.

This is as far as I could get:
http://www.babylonjs-playground.com/#DA2NAP

Then I'm kind of lost.

[jerome]

AFAIK transform feedback buffers are just GPU side... used to keep data from a frame to another one

[Pryme8]

Yeah,  Im trying to do simulations on the GPU side but cant seem to get a ping-pong or a vao method set up.  I am not sure where to go with this.

[Pryme8]

Im still trying to figure this out.

I basically want to be able to provide a texture to a shader and have it manipulate it in some way and then return the modified output wash, rinse and repeat.

trying to figure out a Game of Life simulation on the GPU just to get started.

[Guest]

This looks more like a render to texture for me (with two textures)

[Pryme8]

Yeah that's what I am trying to figure out.  I want to be able to pass a texture to a "simulation shader" grab what the fragments is outputing on that frame convert that to a texture/array have that be passed to a second shader that just displays it, then repeat.

https://www.babylonjs-playground.com/#X465WT#11

I just dont know how to grab that data... figured transform buffer would be the way to go but I have no clue how to work that.

[Guest]

You should be able to work like postprocesses actually:

- create a first render target

- create a data raw texture

- use the data texture and give it to the simulation shader

- output to the render target

- give the render target to the render shader

- copy render target content to data texture

- repeat

[Pryme8]

Ill give that a shot.

can you show me how to do that last part the copy render target content to data texture?

Am I going to have to do my calculations in textel space instead of pixel?

I'm pretty confused now actually...  there is really no documentation I can find on render targets.

[Pryme8]

So ok, if I make a render target at the same size as my simulation, and then I would need to set the simulation shader on that?   So I make a post process and attach that to the new render target correct? Which then the post process has a default sampler which I assume is where I set the first texture and then use that post process as the simulation? 

How do I then convert that custom render target to a texture to repeat the simulation steps after I get this all set up?  That sounds like I am still gonn a need to use some cpu stuff to convert the textures.  I was hoping to do this all on the gpu.

[Guest]

So you can use the TextureTools.CreateResizedCopy function to clone the rtt using GPU:

http://doc.babylonjs.com/classes/3.1/texturetools#static-createresizedcopy-texture-width-height-usebilinearmode-rarr-undefined

of you may just want to use part of the code to do your own optimized version:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.textureTools.ts

[Pryme8]

This is exactly what I needed.

[Pryme8]

https://www.babylonjs-playground.com/#X465WT#14

if you click on the plane it will file the step function, which goes ok as far as I can tell and is based off of the textureTools function.  

But when I try to swap the buffers I get this error:
 

Uncaught TypeError: this._textures[c].isReady is not a function
    at i.isReady (babylon.js:30)
    at i.r.render (babylon.js:16)
    at i.render (babylon.js:17)
    at t.renderUnsorted (babylon.js:11)
    at t.render (babylon.js:11)
    at t.render (babylon.js:11)
    at i._renderForCamera (babylon.js:13)
    at i._processSubCameras (babylon.js:13)
    at i.render (babylon.js:14)
    at index.js:431

so I must be missing a step.  I was looking to see if the step function actually generated a texture that I could use and I have not been able to establish that yet.

[Pryme8]

https://www.babylonjs-playground.com/#X465WT#15

If I change the sampler to the rtt, the error stops but I effectively get no output so I think the sim shader is not being applied

Gotta be really close, I just don't think the shader is effecting the rtt because I was able to just use the TextureTools.CreateResizedCopy to clone the buffers and swap them.

@Deltakosh, sorry to ping you but I am having trouble having a shader effect the rtt and you seem to be the only one with any input on this.

[Guest]

You were using a PassPostProcess and not a custom PostProcess:

https://www.babylonjs-playground.com/#X465WT#16

 

[Pryme8]

I love you so much sometimes.
 

https://www.babylonjs-playground.com/#X465WT#17

One last thing, how can I make sure the buffer is being set (it seems like its not)

line 179-183
and when I output the effect it comes back with no samplers registered, so something is up.

[Pryme8]

https://www.babylonjs-playground.com/#X465WT#20

@Deltakosh You are amazing, I would of been banging my head into wall for days on this.

[Pryme8]

http://www.babylonjs-playground.com/#I30SDL#14

One last hitch and I think I got it.
any idea why the passData function is not compiling a rtt that is a clone of the Show Shader Data.
Line 201-269;

Basically it should grab the two buffers (the state and the inState) assign them to the postProccess pass, and set that as the data for the simulation.  Then the simulation does a rtt, and passes that back to the Show Shaders state.
Its hard to debug it when it seems the rtt only ever returns black when as far as I can tell I am following the correct steps as the above post.



If you click on the plane and modify the data the simulation will try to kick over and you will see what I mean.

[Guest]

your rtt has no size.

Seems like 

console.log(this.args.size.x) is undefined

[Pryme8]

I hate making dumb mistakes, thank you.  How did you track that down, you have to be using different debug tools then me.

[Pryme8]

http://www.babylonjs-playground.com/#I30SDL#18

what would I do without you ^_^!

[Guest]

Just using the console  But as I did not write the code I was checking every properties

 

[Guest]

Love the Game of Life! Can I tweet about it?