GPGPU Curl-noise + DOF example browser freezing on load

[benjaminpreiss]

Hey everyone,

have been working on porting the GPGPU Curl-noise + DOF to nextjs (repo which I managed to do with the great help of @CodyJasonBennett & @drcmda (discussion).

Now I have been wondering - when loading the codesandbox the browser freezes (I think during the init of the shader). Even when dynamically importing the component and using React.Suspense it doesn't work.

So now my question - does anyone here know how this temporary freezing of the browser could be avoided?

Many thanks in advance!

[drcmda]

best you figure out what exactly is freezing, for instance in devtools. theres a button that refreshes a performance snap. im not too familiar with datatextures, but if something needs to fill them and gpu upload takes so long then it's probably nothing you can easily fix. everything that goes over 20-30 milliseconds on the cpu mainthread can potentially freeze the tab.

[CodyJasonBennett]

Sounds to me it's to do with shader compilation which is naturally exacerbated by GPGPU.

[benjaminpreiss]

@drcmda Thank you for the hint - have created the performance profile now:

[benjaminpreiss]

Okey, I guess the problem is that threejs doesn't support parallel shader compile yet.

There is some progress on this issue though, as can be seen here (mrdoob/three.js#16321).

An example of the performance benefits: https://registry.khronos.org/webgl/sdk/tests/performance/parallel_shader_compile/

[benjaminpreiss]

Expecially interesting is @toji mentioning the performance gains with this new technique for getProgramInfoLog() here

[CodyJasonBennett]

I experimented with this some more in https://gist.github.com/CodyJasonBennett/fedde93b69b8ecaefa402ee306189761 where I found similar perf improvements at scale with fence checking.

Also see mrdoob/three.js#19745 and https://toji.github.io/shader-perf.

[benjaminpreiss]

Gents! Seems that the necessary features were just released on threejs: https://twitter.com/threejs/status/1565043733120237568?s=20&t=s32i3A99RgXgAqCCqLgYcA

Are these immediately available in r3f? If so, I will be glad to create an adjusted version of the codesandbox using parallelshadercompile...

[CodyJasonBennett]

I'm not sure what you're referring to in regards to parallel compile but it would be instantly available, just by updating your installed version of threejs.

[benjaminpreiss]

Ah damn, I referred to the pull request you mentioned, which was originally set for r144.

Also see mrdoob/three.js#19745 and https://toji.github.io/shader-perf.

I saw just now that it was moved again to r145.
And the thing I actually meant was KHR_parallel_shader_compile 😃