GPGPU Water in 16:9 aspect ratio

Questions
1

Hey community,

could anyone point me in the direction of changing the aspect ratio of this demo?
https://threejs.org/examples/#webgl_gpgpu_water

I’m looking to make it fullscreen so more around 16:9. At the moment it looks to be locked to a square using the BOUNDS var. I’d like to specificy X and Y bounds separately?

I’ve tried to change the width height values, but then it distorts and the mouse loses it’s accuracy.

Thank you :slight_smile:

2

It looks like BOUNDS is used for:

  • Initial geometry size
  • Invisible plane used for mouse raycasting
  • Shader uniforms

You will need to look at how Bounds is used in those areas, and adjust it to have a non ^2 dimensions.

I’m not sure how the desired result should be, but I’ve created a fiddle so that this will be easier for us to solve.

3

Hey @notchris , thanks so much for responding, I’ve updated the fiddle with kind of what I have in mind, but as you’ll notice the left to right mouse movement is accurate but the up-down movement is not accurate anymore and also looks distorted (almost ‘fatter’) then the mouse effect from side to side…

I’ve introduced 2 new vars called BOUNDS_X and BOUNDS_Y, i also see that in the heightmapFragmentShader shader there is this line:

// Mouse influence
float mousePhase = clamp( length( ( uv - vec2( 0.5 ) ) * BOUNDS - vec2( mousePos.x, - mousePos.y ) ) * PI / mouseSize, 0.0, PI );

I’m assuming this might have something to do with the distorted water effect with the now different aspect ratio?