StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>How the scene is rendered depends a lot upon the usage scenario, in particular:</p> <ul> <li>Is this a realtime application?</li> <li>Can the camera move around?</li> <li>Should the water animate?</li> </ul> <p>Assuming the answer to all these is no, the simplest approach is to render a large quad (or two triangles forming a rectangle) where the water should be. Texture map the water quad with a seamless water texture. For texture mapping parameters, set the texture coordinates (u/v) to be equal to the world coordinates of the corners of the quad and set the sampling method to wrap.</p> <p>If copyright is not a concern you can grab a texture from <a href="http://images.google.com/?q=water%20texture%20seamless" rel="nofollow">google image search</a>, if it is you could try generating a texture using the <a href="http://www.gimp.org/" rel="nofollow">Gimp</a> make seamless filter or similar.</p> <p>A similar approach can be used to create the sea bed.</p> <p>If you want to include the sky you might want to look into sky boxes/domes, <a href="http://rastertek.com/tertut10.html" rel="nofollow">here</a> is a tutorial for DirectX.</p> <p><strong>Edit</strong></p> <p>When using a moving camera, you will need to base the size of the water quad on the viewable area of the camera. The viewable area of the camera defines a 3D volume known as a <a href="http://en.wikipedia.org/wiki/Viewing_frustum" rel="nofollow">frustum</a>. From this you can calculate a rectangle which is large enough that all four corners are outside the viewable area so that no matter which way you point the camera, you can see the sea.</p> <p>Psuedo code:</p> <pre><code>var f = camera.getFrustum() for each point in f.getCorners() { if (point.x < minimum.x) minimum.x = point.x if (point.z < minimum.z) minimum.z = point.z if (point.x > maximum.x) maximum.x = point.x if (point.z > maximum.z) maximum.z = point.z } var quad = new Quad(minimum, maximum) </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload