Optimize procedural texture

Hi I am playing with this PG
https://playground.babylonjs.com/#VJEFGL
but this PG consumes a lot of CPU resources, CPU usage reached 100%
image
bad performance . Is there any way to optimize it ? Thanks

I don’t see a way to micro-optimize. Each frame, you have:

  • a readPixel
  • the recreation of result (50x50 array) from the read data
  • two dynamic buffer updates
  • recomputation of normals

You should try to do everything in a custom vertex shader instead of in javascript. I think it should be possible even if it requires a bit of work.

[…] In fact it’s not so difficult:

https://playground.babylonjs.com/#VJEFGL#3

Base PG Optimized PG
image image

Now, where the “all GPU” solution really shines is when you raise the subdivisions: with 200, I’m at 8fps with the first PG and 60fps with the second one. I can even raise subdivisions to 1000 and I’m still at 60fps!

3 Likes

Thanks u so much :grin: