Porting GPGPU Curl-noise + DOF to newer r3f version

[benjaminpreiss]

Dear community

I have been trying to reproduce the GPGPU Curl-noise + DOF (https://codesandbox.io/s/gpgpu-curl-noise-dof-zgsyn) example from the r3f webpage, but have been having problems with porting it to a newer r3f version.

When changing the codesandbox example to directly rendering the FBO I get the following result. Here is the forked codesandbox link(https://codesandbox.io/s/gpgpu-curl-noise-dof-forked-7r5t3k?file=/src/Particles.js)

But in my React 18 reproduction of the same thing I get the following result. Here is a repo for reproduction (https://github.com/benjaminpreiss/gpgpu-curl-noise-dof-nextjs)

Can anybody help me understand what I am doing wrong here?

Would greatly appreciate help!

[CodyJasonBennett]

Here's a direct port with the old threejs version (render => createRoot, attachObject => attach="foo-bar"):

• https://codesandbox.io/s/gpgpu-curl-noise-dof-forked-tvtcfd

[drcmda]

ive updated mine as well, thanks @CodyJasonBennett! it works until three 135 and over that it fails. i think it might have to do with three kicking out RGBFormat or something like that. they might also have broken backward compat in webgl1renderer. it's one of the many changes here: https://github.com/mrdoob/three.js/releases/tag/r136 it's unfortunate. don't have the time to investigate though.

[benjaminpreiss]

Hey, thanks for the quick reaction! Had a peek into the migration docs and found this

Since I am instantiating a DataTexture (https://github.com/benjaminpreiss/gpgpu-curl-noise-dof-nextjs/blob/d8f2e9297806e6b2d5a2385d94bef7bb64b3ce7f/components/Particles/Particles.tsx#L71) I was wondering whether I have to somehow set needsUpdate?

[CodyJasonBennett]

Nice catch, that would indeed be the issue. I migrated RGBFormat => RGBAFormat and dropped WebGL1 in addition to adding the needsUpdate flag to the positions texture:

• https://codesandbox.io/s/gpgpu-curl-noise-dof-forked-tvtcfd?file=/src/shaders/simulationMaterial.js

[benjaminpreiss]

Nice one! Did the same thing though and can't fix it in my repo yet... :(

[benjaminpreiss]

@CodyJasonBennett could you do me a favor and have a look https://github.com/benjaminpreiss/gpgpu-curl-noise-dof-nextjs ? I am really wondering why my frame only shows black constantly :/

[benjaminpreiss]

Okey, slowly but steady getting there. Now I have a static but correct image:

[benjaminpreiss]

@CodyJasonBennett Two further suggestions regarding your port https://codesandbox.io/s/gpgpu-curl-noise-dof-forked-tvtcfd :

1. Replace texture2D with texture (since this is deprecated, see screenshot from https://registry.khronos.org/OpenGL/specs/gl/GLSLangSpec.3.30.pdf)
2. getPoint() accepts a Vector 4 instead of Vector3. But that also creates the question, what value the 4th dimension will get. Proposal below.

Proposal for getPoint():

function getPoint(v:Vector4, size:number, data: Float32Array, offset: number): ArrayLike<number> {
    v.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, 0)
    if (v.length() > 1) return getPoint(v, size, data, offset)
    return v.normalize().multiplyScalar(size).toArray(data, offset)
}

[CodyJasonBennett]

Threejs will do light transpilation in non-raw shaders for webgl/webgl2 compat, would have to rewrite old syntax (e.g. attribute/varying => in/out) if you want this in pure GLSL.

The fourth component here doesn't do anything, we swizzle it out in the shader. I added it since RGBA typically requires four components.

[benjaminpreiss]

Managed to make it work! Have no explanation though, why it works now but didn't work before - If you have an idea about that I would be glad to learn :) Here is the commit that made it work: benjaminpreiss/gpgpu-curl-noise-dof-nextjs@321942f

And for anyone having a look at this discussion - here is the working repo: https://github.com/benjaminpreiss/gpgpu-curl-noise-dof-nextjs

[benjaminpreiss]

To be clear about what wasn't working - the changes to the uniforms in useFrame were not reflected in the shader. So the shader only painted the first frame.

[CypherpunkSamurai]

Hello Benjamin,
Greetings, hope you're having great time in the holidays. I just happen to approach this discussion looking for some compatibility for newer react tooling, specifically vite.

I see you ported the CURL NOISE DOF to NextJS. I copied all the specific files from the project, and installed vite specific glsl loader helper vite-plugin-glsl, for some reason it wont render properly. Is there any new THREEJS specification that I'm unaware of?

Here is my codebase, I'd be happy if you could take some time to give it a look :)
https://stackblitz.com/edit/dof-particle-sphere?file=src%2FApp.tsx