Elysium - The Most Beautiful Stylized World On The Web

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.

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




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
24 Likes

image

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

1 Like

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

Thank you very much. :pray:

1 Like

Pure art.
Love it! :star_struck:

1 Like

Wow this is so beautiful, its amazing world.

1 Like

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

1 Like

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

1 Like

Ah yess! Thank you for that suggestion @Chaser_Code !:handshake::heart:

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.:laughing:

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.:thinking:

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);
}
1 Like

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

Thanx to this post:

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

5 Likes

Beautiful :smiling_face_with_three_hearts:

1 Like

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

1 Like

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

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

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

Well done! :love_you_gesture:

1 Like

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

Thank you for the kind words!:smile:

pretty neat! :grin:

2 Likes