Elysium - The Most Beautiful Stylized World On The Web

[thebenezer]

Hey Friends!

This is Elysium- A Stylized 3D World. I spent 6 months working full-time as an indie developer to build something beautiful for the web. A lot of hardwork later, here is the released version.

Live Link: https://elysium.thebenezer.com/

I wanted Elysium to be something therapeutic and relaxing, an experience that visitors could truly enjoy. The main goal of this project was to serve as a poof of what is capable on the web today!

I hope you like it! Please let me know your thoughts! Woudl love to hear your opinion

Details:
I have used many different techniques to make this experience run smoothly on most devices.

• Gradient Fog
• Stylized Water
• Clouds and Stars
• Stylized Sky
• Folliage that sways in the wind
• Fluffy Grass that reacts to player
• Super Realistic Godrays
  and more!!

Built with:

• Vanilla Three.js
• GLSL
• Typescript
• Vite
• three-mesh-bvh

[Harold]

I love how you showcase these settings by exploring the environment. I love the water foam very well done!

[thebenezer]

Hey Harold! You collected all the powerups, I see!

Thank you very much.

[prisoner849]

Pure art.
Love it!

[Umbawa_Sarosong]

Wow this is so beautiful, its amazing world.

[thebenezer]

Thank you! Might I recommend the “Extreme” Graphics settings? It has the fluffiest grass!

[Chaser_Code]

Very good! Maybe you can try use vertical depth for foam to delete fast disapearing at angle.

[thebenezer]

Ah yess! Thank you for that suggestion @Chaser_Code !

I am actually working on that currently haha. But I love the depth effect when camera angle to the water changes. Therefore, I am considering this: “Use the current depth effect as is, but use the vertical depth for the foam effect. That should help with those hard cutoffs!” or… I could also pass a vertical depth texture of the scene initially (just once) and use that for the foam. That way we can save up on multiple renders of the scene.

Besides that, could you help me with one issue that I am facing? The depth water does not work on some android devices. I get a banding effect. I have not been able to fix that one yet as it only occurs on a few devices.

[Chaser_Code]

Maybe some androids does not support that depth.type or depth.format i dont know.
For water also you can use vertical depth + fresnel. Water then will be looks almost same.

Vertical depth vertex shader:

varying vec3 vPosition;
void main(){
...
vPosition=(modelMatrix*vec4(position,1.0)).xyz;
}

Fragment shader:

varying vec3 vPosition;
//uniform float cameraNear;
//uniform float cameraFar;
uniform mat4 projectionMatrix;
void main(){
vec2 screenSpaceUv=gl_FragCoord.xy/vec2(1920.0,1080.0); // resolution
float worldViewDirection=vPosition.y-cameraPosition.y;
float sceneDepth=texture2D(terrainDepth,screenSpaceUv).r;
//float eyeDepth=cameraNear*cameraFar/(cameraFar+sceneDepth*(cameraNear-cameraFar));
float eyeDepth=projectionMatrix[3][2]/((sceneDepth*2.0-1.0)+projectionMatrix[2][2]);
float waterDepth=vPosition.y-(worldViewDirection/(gl_FragCoord.z/gl_FragCoord.w)*eyeDepth+cameraPosition.y);
waterDepth=clamp(1.0-waterDepth*2.0+0.2,0.0,1.0);
waterDepth=pow(waterDepth,1.0);
float foam_shore_blend=clamp(1.0-waterDepth*20.0+1.2,0.0,1.0);
}

[thebenezer]

Oiyy @Chaser_Code . You are the besttt! I did not think of this idea at all!.Will try this today and share the results here. Thank you!

[Chaser_Code]

Thanx to this post:

How to effectively use depthTexture for water toon shader?

Here is a csb to my demo: CodeSandbox - CodeSandbox –EDIT: This csb is updated, check edit and comment below– Hi! I have been trying to create a stylized/toon/NPR water shader for fun/to learn. I started with looking at Roy’s tutorial but have been wanting to recreate Alexander’s stylized water. These are both for Unity so translating them into the three.js environment is a bit of a struggle. It is a broad topic but the main focus to this thread is about depth textures and how to handle them…

“a constant depth value that is independent of camera position” and depth+fresnel:
There you can add color of horizon depend of fresnel.

Stylized Water Shader

[Suns]

Beautiful

[schwyzl]

Runs very smoothly indeed. Tried extreme graphics in 4k on a laptop, no issues. Well done!
Dell XPS, Linux, Chrome, 4k.

[thebenezer]

Thank you very much! I’m glad you mentioned the device too. That info is so useful!

Feel free to inform me in case you notice any bugs!

[hblee]

I would say it’s the best of the year, and deserved to be put on the Three.js showcase page.

Well done!

[thebenezer]

Ohhh! Thank you soo much! I wish, my friend!

Thank you for the kind words!

[roombawulf]

pretty neat!