SeaZeroQuest
An Experiement in Three JS and documenting my learning of Javascript and WebGL.
Level-1 - Scene creation
The first stage was to take my exisiting Three.js knowledge and implement a complex scene.
Elements include:
- Boat model
- Sea shader and animation "fake shader" using planes
- Beacon model
- Island model
- Sea Gull model and animation
- User Controls with no persistence
Controls - Mouse/Touch to rotate the camera. WASD to move the boat.
Level 1 can be played here
Level-2 - Optimise all the things
The next step is a refactoring of my existing code and functions to reduce drawCalls.
Previous: 450+ draws, 2600 calls
Current: 92 draws, 900 calls
Optimisation includes:
- GLSL WebGL Shader used for water - reducing 700+ calls
- Merging Island Geometry and objects - reducing 50 drawCalls and 200 calls
- Merging Beacon Geometry - reducing 5 drawCalls and 35 calls
- Merging Boat Geometry - reducing 100 drawCalls - further opti for calls req.
- SeaGulls - Due to the nature of animating all the elements, merging isn't possible. ReUsed geometry and animation for all with offsets for variation. - further opti for calls req.
Controls - Mouse/Touch to rotate the camera. WASD to move the boat.
Level 2 can be played here
Level-3 - Physics with Cannon.js
To add collision detection and make the controls feel better, I decided to add a physics engine to the scene.
Cannon.js is a physics engine written in and for Javascript and runs well with Three.js. It requires running a seperate physics "world" along side the three.js world.
Controls - Mouse/Touch to rotate the camera. WASD to move the boat.
Level 3 can be played here