search

martinRenou / threejs-caustics

Caustics computation using ThreeJS
BSD 3-Clause "New" or "Revised" License
297 stars 35 forks source link

Increase size of area #11

Open eduardfossas opened 2 years ago

eduardfossas commented 2 years ago

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: Screenshot 2022-04-13 at 15 14 00

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

martinRenou commented 2 years ago

Hey :)

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

eduardfossas commented 2 years ago

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.

Screenshot 2022-04-13 at 16 46 11

Screenshot 2022-04-13 at 16 46 16

nzmitch commented 2 years ago

any luck with increasing plane size?

martinRenou commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

braebo commented 7 months ago

@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 commented 7 months ago

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

ghost commented 7 months ago

image @martinRenou have yiu hardcoded any size somewhere?

martinRenou commented 7 months ago

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).