How do i replicate this effect in React Three Fiber?

We are not saying this. Here are more details. In the past, the structure of geometries was designed to be easier for humans, but this was too inconvenient for computers. Then a new structure was proposed, that was easier for the computers to use, and as a result – graphics were much faster. For some time both structures coexisted, but at some point the old one was abandoned. For good. The example that you want to recreate uses the old structure.

There is absolutely no need to use a custom shader in order to replicate this effect. It can be done completely with the current core functionality of Three.js. Here is a demo with low-poly beach. It uses a standard geometry with programatically modified vertices:

https://codepen.io/boytchev/full/xxaKXgK

My suggestion would be to recreate the original example with modern Three.js, and then to think about porting it to R3F.

5 Likes