Increase size of area

[eduardfossas]

Hello Martin!

We have just spoken on Twitter. Right now I have a simple scene in aframe, the problem is that I cannot increase the water area to cover all the plane, I tried different things but without success:

Let me know if you need more information and thanks in advance!

[martinRenou]

Hey :)

Would you be able to provide a bit of code? At least the part that creates the water mesh

[eduardfossas]

Hey! It is exactly the same as you have, all are 2 by 2 planes, just adapted it a bit to work in an Aframe setup. I guess it could be a hardcoded value inside the shaders since when I modify all the plane geometries from your setup the shaders are stretched.

[nzmitch]

any luck with increasing plane size?

[martinRenou]

Sorry I haven't had the time to look into the code again. Though I believe you will need to increase both the water plane size and the orthogonal camera view area (the one that computes the caustics).

[martinRenou]

Another idea could also be to keep the water plane untouched, and scale down objects that are underwater, this would give the the impression that the water plane is bigger.

[eduardfossas]

No worries @martinRenou.

I understand; for me, the former makes more sense since I think it can be more adjustable in other cases as well.

Thank you for your time.

[braebo]

I managed to increase the area by increasing the water plane size and the lightCamera Frustum size together like martin mentioned!

[braebo]

@eduardfossas @fractalhq can you guys please provide exact changes to be made cause I have been trying the same for couple of days with no success please.

I actually wound up rewriting it in Typescript so I can't answer that unfortunately because a lot changed (and it was a long time ago).

[martinRenou]

Have you tried scaling down underwater objects instead of increasing the water plane ?

[ghost]

@martinRenou have yiu hardcoded any size somewhere?

[martinRenou]

have yiu hardcoded any size somewhere?

Oh yeah it's very possible that it's hardcoded in a couple of places. Quoting myself from this thread:

Though I believe you will need to increase both the water plane size and the orthogonal camera view area (the one that computes the caustics).

So if I trust my old self you'd have two places to change? It's been a long time that I've looked at this code.

This project is more of a demo than something that was thought for being reusable. So you may need to update it slightly to match your case.

Also note that this code was running with a specific version of ThreeJS, I cannot guarantee it works with latest ThreeJS.

Finally, looking back, I would say ThreeJS is probably not thought for making such low-level usage of WebGL. I remember this code was a bit hacky to make it work. If I were to do this again, I'd probably use plain WebGL or something like https://github.com/regl-project/regl. (Not saying ThreeJS is not good, it's a great library).