Awesome project—did you create the models yourself? They look fantastic! I took a look at your project and compiled some notes below:
If you want to hide objects that go under the ground, the easiest way to do this is by using a Hider material. In the screenshot below, I’ve converted your ground object’s material from a Shadow to a Hider, which effectively clips the parts of the pond that should be hidden beneath the terrain.
With this approach, you can adjust the hider placement to ensure it properly clips the submerged parts of the pond. Additionally, you might want to consider creating another model that conforms better to the terrain, as the current one sits at an angle rather than lying flat.
I definitely see what you mean about performance issues. Testing on a Mac M3, I’m also experiencing some slowdown, which indicates there are optimizations to be made.
To analyze the pond model, I uploaded it to gltf.report, a great tool for validating and optimizing GLTF models. Here are a couple of issues I noticed:
- Your pond model contains a large number of textures.
- The textures don’t follow power-of-two resolutions (e.g., 512x512, 1024x1024). This is important because if the textures aren’t power-of-two, three.js (or any WebGL-based renderer) will have to resize them at runtime, which can significantly impact performance.
Since textures can be surprisingly taxing on the renderer, reducing their number and ensuring they are power-of-two will help a lot.
Luckily, gltf.report provides an optimization script that can handle most of these issues automatically. You can navigate to the optimization tab, run the script, and download a highly optimized version of your model with minimal effort.
I recommend uploading each of your models to gltf.report running the optimization script, and then replacing the old models in your project. This should significantly improve performance.
let me know how it goes!
