could anyone point me in the direction of changing the aspect ratio of this demo?
This file has been truncated.
<title>three.js webgl - gpgpu - water</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="waterSize"></span> webgl gpgpu water<br/>
Move mouse to disturb water.<br>
'W' key toggles wireframe.
<!-- This is the 'compute shader' for the water heightmap: -->
<script id="heightmapFragmentShader" type="x-shader/x-fragment">
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.
It looks like BOUNDS is used for:
Initial geometry size
Invisible plane used for mouse raycasting
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.
@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?