a-water (ada-water)

Based on the shader tutorial by ada, this component produces a very cheap large ocean that reminds one of the style of Wind Waker.

This component give you a simple primitive that makes it easy to drop in and work with.

Full credit to Ada Rose. This component packages everything into one file in a very basic, crude way to make importing it and using it as simple as possible, but if you want to go through the course of building this yourself from first principles, check out their multi-part series on the topic: https://medium.com/samsung-internet-dev/generating-a-water-effect-part-1-svg-and-canvas-2ad07060cc0d

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/kylebakerio/ada-water/ada-water.js"></script>
  </head>
  <body>
    <a-scene>
<!--   magic is right here     -->
      <a-water></a-water>
      
      <a-camera wasd-controls="fly:true;"></a-camera>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

You can experiment with adding another layer of animation on it:

document.querySelector('a-water').setAttribute('animation', {
    property: 'scale', 
    from: '10 2 1',
    to: '2 15 2',
    dur: 200000,
    loop: true,
    dir: 'alternate',
    easing: "easeOutElastic",
})

Added the primitive bindings you're most likely to want.

Attribute	Default	Description
width	10 (meters)	git status
length	10 (meters)	git diff
side	one of ["front", "back", "double"]	whether the water surface should be visible from under the water as well
base-color	darkblue	primary surface color; this CAN be animated/changed
foam-color	white	secondary surface color; this CAN be animated/changed
opacity	.5	water opacity--note, this is baked into the shader, so cannot be changed after init!
voronoi-points	15	changes the shape of the 'foam'; try e.g. 50. Note: can only be set at init! baked into the shader.

You can also check ada-water.js for the up-to-date props in case I forget to update the readme when making a minor tweak.

That ability to animated the colors is pretty handy, allowing you to make the illusion of the water responding to lighting conditions; see this demo for an example of that behavior (behavior visibel in this file).

roadmap

there are some improvements to this idea that ada demonstrated here, however, as she noted in part 2 of her article on this, there was some bugginess with this feature when used in VR that she never resolved. Feel free to pick up the work there and make a pull request.

kylebakerio / ada-water

a-water (ada-water)

roadmap

About

Languages