Day 4 & 5

This post will sum up the progress of day 4 and 5 of the project work!

After several attempts to implement an own shader which would be applied on the water surface, we ended up implemented a water shader made by threeJS. We have put some efforts into understanding how shaders work in Three js, which basically uses WebGL. However with the gained understanding of how it works and with some basic own implementation of shaders we realized that using someone else’s work would be beneficial for the project to proceed. To make a shader that mimic realistic water could be a whole project on its own. So we decided to go with the shader Ocean by Jbouncy (https://github.com/jbouny/ocean) which he actually base on others work. After some struggle with both understanding how it worked and how to fit it into our code we finally got it to work with a moderate-to-good result. Our water now looks like this:

Another shallow change that has happened is that we put in our own skybox to make the view a bit more appealing and to get the blue color which is a reflection of the sky.

The threeJS shader also has a built-in animation of the texture that is applied on the surface of the plane. The texture is shown in the image to the left and is made up of red and blue colors that form a structure similar to that of waves on the ocean. The shader then applies a noise effect on the structure, depending on time, which results in a illusion of the structure moving and thus makes the surface of the waterplane look like it is moving.

We also applied a blue color on the shader which helps making the surface look more realistic.

Further implementations is described now:

1. A user can add several spheres by right-clicking on the water. A sphere is then created some feets above the water surface and drops into the water, creating an epicenter that generates waves.
2. In our animate function, we reordered what was happening in our for-loops. We realized that the way we had written code was fairly costly, and could be improved with some handling of the logic there.

3. We started to look at how to make the ball move in the x- and z-axis of the plane when it is hit by waves. Using the normal of the face that is closets under the sphere. Depending on the normal we effect the speheres speed in the xz plane.
4. Examined different possibilities with creating rain in the scene. After some attempts of adding a lot of small spheres which resulted in a quite laggy experience we decided to look into implementing a particle system which could be designed as raindrops that hits the water surface.

How to proceed

For the next session we will look into threePoints and sprites, and how to create raindrops which would create small epicenters when hitting the surface of the water.

In summary

• Implemented Three Water shader
• Scratched our own shader after too many attempts to make it work.
• Added a new sky box
• New function where a user can add several spheres
• Examined sphere lateral (x-, z-axel ) movement
• recalculate normals of faces every frame
• Changed the order of logic in the animate function() to optimize the runtime
• Begun looking on how to implement rain