Hello GameDev,
This blog entry will cover new visual features added to the project.
They are in no particular order:
- Shadows
- A reflective ocean sky-box
- Vertex color noise for vegetation.
- Preliminary client GUI
But before I get to that I'd like to mention that I'm still plugging away on dynamic assets.
If you haven't had a chance to check out that blog you can view it here
I decided to spice up the look of the project. I thought it needed more juice, more oomph. It's been over a year since I've done anything visually significant.
I am limited with what I can do but I enjoy working within those boundaries.
Shadows
A common observation that people would make about the look of the simulin was that it appeared as though they floated above the ground ( because there were no shadows ). I've toyed with Three.js shadows before but was never fully satisfied with the result. In a way I kinda think the Three.js shadows betrayed the visual look of the project; however, I certainly don't want people to be under the impression the simulin are floating.
The problem I had was the shadow map size needed was too large. The fps dropped. My approach to resolve this issue is to update the shadow map's position relative to the camera's. This way the shadow map size can be reduced to a level that doesn't hinder performance.
For a more thorough explanation:
The directional light positioned is set to ( 0 , 0 , 10 )
A normal of the light's position is obtained and used as as a reference plane called shadowPosition.
The ray is caste from the screen's center ( 0,0 ) towards the globe. The point obtained by the ray is then projected onto the reference plane.
The position of the shadow map for the directional light is updated to the projected point.
let quickPosition = intersects[0].point.clone();
quickPosition.projectOnPlane( light.shadowPosition );
light.shadow.camera.bottom = quickPosition.y - camera._shadowDetail;
light.shadow.camera.left = quickPosition.x - camera._shadowDetail;
light.shadow.camera.right = quickPosition.x + camera._shadowDetail;
light.shadow.camera.top = quickPosition.y + camera._shadowDetail;Then three.js will recalculate the shadow map via
light.shadow.camera.updateProjectionMatrix();And voila!
Ocean Sky-box
After I added shadows to the world I noticed that the water was look pretty flat. It just didn't pop. I quickly scrapped together squarish looking clouds and made a sky box for the ocean. All a did was snag a sky-box texture off google and used a filter to pixelate the image with large overlapping pixels. The ocean looks way better now.
Color Noise for Vegetation
Aaand the vegetation seemed boring. Seeing as all the models were made with the same color palette I decided to spice up each tree by slightly adjusting the RBG color channel for each vertices. This happens on the client side and so each time the game loads so do the slight color variations. It gives subtle character to the vegetation.
Preliminary GUI
I offset the center of the world to the right of the screen to make way for a left menu GUI. This GUI will hold information that is most important and crucial to winning. I already know of the first and most important thing that will be displayed, but I'll talk more about that in later blog. ( On a side note: I'm always conflicted as to what to write about in my blogs. A part of me wants to wait to unveil certain things, and another part of me is like who cares, just put it out there ).
Final note about the performance.
The world build I am demonstrating in this blog is home to about 30,000 individual trees and 10,000 simulin. When a user registers they can select their own shadow and ocean quality settings before the world is loaded. This allows for each user to achieve the best possible performance/look for their system.
On my system:
The simulation server uses ~2 Gb of ram
The data server uses ~750 Mb of ram
With the highest quality settings Chrome uses ~750 Mb of ram at ~60 fps.
While writing this blog I have a game session open to take screen shots and am also trying to record my desktop and I think that's maxed out my system. So the videos I'm recording are choppy. I'm gonna try to close out this blog and try recording again. If the chop goes I'll post the results. I might also change the shadows so the land doesn't cast shadows.
edit: as soon as I start record my desktop the fps drop to ~40 , ahh well, here's the video anyways.
In the past I've reached out the members of this community for critique and feedback and that has always worked out handsomely. So please, if you see anything that you think might look better if done differently, please don't hesitate to mention it.
Good idea for the ocean as well.
That's #*@!in cool, man!