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
I have used many different techniques to make this experience run smoothly on most devices.
Clouds and Stars
Folliage that sways in the wind
Fluffy Grass that reacts to player
Super Realistic Godrays
I love how you showcase these settings by exploring the environment. I
love the water foam very well done!
Hey Harold! You collected all the powerups, I see!
Thank you very much.
Wow this is so beautiful, its amazing world.
Might I recommend the “Extreme” Graphics settings? It has the fluffiest grass!
Very good! Maybe you can try use vertical depth for foam to delete fast disapearing at angle.
Ah yess! Thank you for that suggestion
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.
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;
varying vec3 vPosition;
//uniform float cameraNear;
//uniform float cameraFar;
uniform mat4 projectionMatrix;
vec2 screenSpaceUv=gl_FragCoord.xy/vec2(1920.0,1080.0); // resolution
@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!
Thanx to this post:
Here is a csb to my demo:
CodeSandbox - CodeSandbox
–EDIT: This csb is updated, check edit and comment below–
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.
💦 A huge, step-by-step tutorial on how to create a beautiful stylized water shader in Unity using Shader Graph. This works with Unity's Universal Render Pipeline (URP). Includes colors, foam, refraction, reflections, caustics and Gerstner waves.
Runs very smoothly indeed. Tried extreme graphics in 4k on a laptop, no issues. Well done!
Dell XPS, Linux, Chrome, 4k.
I would say it’s the best of the year, and deserved to be put on the Three.js showcase page.
Ohhh! Thank you soo much! I wish, my friend!
Thank you for the kind words!