Feature:: Add FBO support + Grid-Displacement-Mouse effect demo #74

Robpayot · 2025-03-01T10:48:36Z

Adding FBO effects support
Adding a demo section 14 with the new grid Displacement Mouse effect.

FBOs

To have a FBO effect you need at least one program running in parallel of the "Kampos effect". I preferred to manage the FBO data in a separate object called fbo.

Example when creating a Kampos effect that needs a FBO map:

    // init kampos
  const  instance = new Kampos({
        target,
        effects: [gridMouseDisplacement],
        fbo: {
            size: 256, // FBO texture size width and height
            effects: [flowmapGrid],
        },
    });

Your fbo effect can be different, In the example I made one for a flowMap grid effect in src/fbo/flowmap-grid.js . But we could add another one for a more simple flowmap effect in src/fbo/flowmap.js and do something like this example

Notes: For now this should be only used for flowmap I think, other FBO like GPGPU effects can be more complex and needs more textures: Example here (tutorial) where it's using a velocityMap to move particles

Modifcation in core.js

If using a FBO when creating a Kampos() instance. the core.js js will create a FBO program _initFBOProgram(gl, plane, fbo) in a object that gather all important information: fboData .
Then if fboData exists, the draw function will call drawFBO where all the FBO drawing logic exists. Notice that they are other thing to take care of if fboData exists like binding textures that I couldn't put in drawFBO for order reason.

Notes: For the grid effect I had to use a gl.FLOAT type texture, so I created a function for that. But I think in the future we might want a default Texture in a FBO effect. In that case we could add a parameters say textureType and use default or float texture based on that.

Demo

The demo is using grid-mouse-displacement.js effect with different parameters. Some of them like aspectRatio needs to be updated both in the effect and the fboEffect programs.

grid-effect.mp4

ydaniv · 2025-03-02T09:14:09Z

src/core.js

@@ -117,10 +117,13 @@ const SHADER_ERROR_TYPES = {
 * @param {boolean} [config.noSource]
 * @return {{gl: WebGLRenderingContext, data: kamposSceneData, [dimensions]: {width: number, height: number}}}
 */
-export function init({ gl, plane, effects, dimensions, noSource }) {
+export function init({ gl, plane, effects, dimensions, noSource, fbo }) {


Interesting, my initial thought was to allow a programs property to allow providing multiple programs instead of effects. Do you this that would make sense? Or just be an overkill?

I see what you mean but the fbo programs needs to be rendered in a specific order to draw / clear framebuffers and textures, and then "classic" effects can be drawn. So I think if we put all the logics in the same effets array, it might be difficult/overkilled to sorts them or do the checks on these rather than a separated object right?

Not same effects array. I meant you could specify something like programs: { effects, plane }[]. But I can do this generalization later.

ydaniv · 2025-03-05T16:40:15Z

src/core.js


    if (vao) {
        extensions.vao.bindVertexArrayOES(vao);
+        if (fboData) _enableVertexAttributes(gl, attributes);


If we're using VAO here why do we need to reenable attributes here?

For some reason I need to enable the positions here otherwise the program is invisible (only with FBO program rendered before). It might be because after clearing the framebuffer it needs to enable the other program's attributes?

But let me know if you find a solution to make it work only using the vao.

ok, cool, don't get stuck on it, I'll try investigating later

ydaniv · 2025-03-05T16:49:51Z

src/core.js

+        // bind fbo texture
+        gl.activeTexture(startTex);
+        gl.bindTexture(gl.TEXTURE_2D, fboData.oldInfo.tex);
+        gl.uniform1i(gl.getUniformLocation(program, 'u_flowMap'), 0);


This is very specific to the FlowMap effect. Either we use some generic uniform name here, or we extract this logic to be some how connected to the effect using the FBO?
I think I rather have the former

Yes, like I said here, I think for now the FBO is moslty meant to be for flowMaps. BUT I agree to make it more generic. I replaced it by u_FBOMap

Notes: For now this should be only used for flowmap I think, other FBO like GPGPU effects can be more complex and needs more textures: Example here (tutorial) where it's using a velocityMap to move particles

ok, let's start with that

ydaniv · 2025-03-05T16:50:20Z

src/core.js

+
+    // // Set uniforms
+    _setUniforms(gl, uniforms);
+    gl.uniform1i(gl.getUniformLocation(program, 'u_flowMap'), 0);


Again, specific to FlowMap

ydaniv · 2025-03-05T17:39:58Z

src/core.js

@@ -766,6 +825,74 @@ function _getTextureWrap(key) {
    return TEXTURE_WRAP[key] || TEXTURE_WRAP['stretch'];
 }

+function createFloatTexture(gl, data, width, height) {


Not API, internal:

Suggested change

function createFloatTexture(gl, data, width, height) {

function _createFloatTexture(gl, data, width, height) {

ydaniv · 2025-03-05T17:41:15Z

src/core.js

+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);


Did you use NEAREST because of the need to make the hard cut for the grid effect specifically?
Perhaps this should (at least later if not now) should be configurable?

Yes, it was for that. I think like we discussed on Google Chat, in the future, it would be nice to make the FBO texture configurable in parameters like (textureType = FLOAT, textureCut = 'LINEAR' or 'NEAREST') ...

ydaniv · 2025-03-05T17:46:59Z

src/core.js

+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),


I guess this is the coords for clip space? Could we use same ones used for the main program? I mean not the buffer/array itself, but perhaps the same config?

Updated so now it's similar to the default attributes like for other effects

Robpayot added 28 commits February 22, 2025 16:19

feat: init FBO textures test

7bdf5df

feat: test setup fboData

fbbf37d

fix: clear bindFramebuffer

d250f37

feat: refacto

60f69f8

feat: update texture incr + bind Main buffer after FBO buffer

07e892e

feat: set fboProgram uniforms

cb33e0d

feat: bind FBO texture

22023c3

feat: add mouse mvt, main concept set up

0184768

feat: test gl.FLOAT texture

6d5870f

feat: use Float texture

3e140b8

refacto: drawFBO

561bd37

feat: test mergeEffect fbo program

29aca49

feat: test v_uv

13490a7

feat: test fix

d0b0d74

fix: test update containerResolution

9d172a9

feat: no need enableVertex on fbo?

b1bf396

feat: display grey texture

db20ae3

refacto

30803c5

fix: vao render

bd88c6f

Merge branch 'master' into feat/fbo-grid-effect

b23bd1b

Update index.html

73d2197

feat: add final effect

abd00fd

feat: add params and GUI

2edb06b

feat: add gridSize system, (reset instance)

696e8f6

feat: clean up

7bdb713

feat: remove old files

f707dfc

refacto aspectRatio

e4ad937

refacto: uniforms renaming

b824bc3

ydaniv requested changes Mar 5, 2025

View reviewed changes

fix: replace u_flowMap, more generic name

1c13b37

Robpayot added 4 commits March 5, 2025 19:27

fix: rename _createFloatTexture

f5af392

feat: use same attributes as other default effects

0b319bb

fix: movement issue (deltaTime)

44dad02

fix: chrome issue

fe83978

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature:: Add FBO support + Grid-Displacement-Mouse effect demo #74

Feature:: Add FBO support + Grid-Displacement-Mouse effect demo #74

Robpayot commented Mar 1, 2025 •

edited

Loading

ydaniv Mar 2, 2025

Robpayot Mar 5, 2025

ydaniv Mar 9, 2025

ydaniv Mar 5, 2025

Robpayot Mar 5, 2025

ydaniv Mar 9, 2025

ydaniv Mar 5, 2025

Robpayot Mar 5, 2025

ydaniv Mar 9, 2025

ydaniv Mar 5, 2025

ydaniv Mar 5, 2025

ydaniv Mar 5, 2025

Robpayot Mar 5, 2025

ydaniv Mar 9, 2025

ydaniv Mar 5, 2025

Robpayot Mar 5, 2025 •

edited

Loading

	function createFloatTexture(gl, data, width, height) {
	function _createFloatTexture(gl, data, width, height) {

		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

Feature:: Add FBO support + Grid-Displacement-Mouse effect demo #74

Are you sure you want to change the base?

Feature:: Add FBO support + Grid-Displacement-Mouse effect demo #74

Conversation

Robpayot commented Mar 1, 2025 • edited Loading

FBOs

Modifcation in core.js

Demo

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Robpayot Mar 5, 2025 • edited Loading

Choose a reason for hiding this comment

Robpayot commented Mar 1, 2025 •

edited

Loading

Robpayot Mar 5, 2025 •

edited

Loading