How can I make this game (scene) more beautiful?


So… I have this outdoor scene on my game. And I think it seems not that beautiful. I’m just rendering the models without any post-processing stuff and no shaders because I don’t know how to do it correctly. So, the question is, what could I do to make this scene looks more vivid, more beautiful and how could I do it? Please, I’m a begginner with Three JS, so be patient!

Try to smooth the green and brown areas, then add detail:

  • textures on everything you see fit
  • bump maps
  • more interesting lighting with baked lights, local lights with contrasting colors, etc - it doesn’t have to be purely natural, only convincing and beautifying like in every big budget movie you’ve ever seen.
  • add shadows (for one directional light)
  • finally optimize for size and speed

Of course post-processing like color-grading can also make a big difference.

1 Like

Honestly, I would not dare to give any advice about beauty, as different people consider different things to be beautiful. What is more important, is that your gameplay is flawless and captivating … this dominates over graphics. The graphics only needs to adhere to a consistent style.

Beauty is not a property, beauty is an attitude.

2 Likes

to me it still looks like wrong gamma/wrong color space. that is the #1 culprit for the 90s era plasticky cgi look, which is basically what you have there. i would also suggest you use environment lighting.

it’s a bit outdated now but i’ve made a mini tutorial about this once

otherwise i fully agree with everything @dllb and @PavelBoytchev said.

2 Likes

Looks rad!!
You might be getting some shadow acne from the lights… ( the sort of shadow banding/ripples on the ground )
You might be able to adjust the .bias on the lights shadows to tweak it…
light.shadow.bias = -0.0002;
or
light.shadow.bias = 0.0002;
experiment with different small values until it makes them how you want…

3 Likes

The simplest things you could do that could go a long way without creating more assets is

  • adjust lighting to make dark areas a little brighter (unless that’s intensionally like a darker area behind a grove of trees or something), so maybe this point not so important
  • all materials seem to be kinda the same although there are actually a numerous different types of surfaces (hair, skin, grass, etc) so you can use MeshPhysicalMaterial and try various different combinations of property values for each material so that you get distinct-looking surfaces for each type of thing in the scene.
    • right now, for example, hair has the same look as skin, differing only with the color. the metal chain on the door could have more metalness, and you can adjust roughness to make it shine more or less.
  • take a cube map snapshot of the scene, and set that as the environment for all reflective surfaces (like the door knob) because without an environment, the metal will not have anything to reflect (Three.js does not automatically reflect the world on your metal-like materials, you have to do that manually, either dynamically every frame updating a cube map of your scene (more expensive) or using a one-time snapshot (fast, but not dynamic, will not show realtime updates if things in the scene are moving around)).

I think that will get you much further, without needing any more assets.

If you do add one more asset, you might pick an equirectangular image to use as the scene environment (instead of taking a snapshot of the scene).

5 Likes

Thank you all for the answers <3 I will consider each one of them and update you guys with the results!

4 Likes

Different people might prefer different things on the surface due to their different life experience and influence, inherited and acquired traits, etc but ALL people appreciate the foundations of beauty like order, harmony, novelty, ingenuity, style, etc and so they ALL like representative creations of those fundamentals when they see them.

Which is why up to billions might like the same songs, movies, paintings, monuments, movie characters, actors, singers, etc.

Bottom line, we people are more alike than different, appreciating beauty is in fact a basic survival instinct, so beyond a point, everyone will like it.

1 Like

Hey guys. I changed a thing or two, changed the material properties, enhanced the shadows… and the results you can see in the video that I posted in this: How to create a aiming camera position in a game - Questions - three.js forum (threejs.org) also, if you guys can help me with this too would be highly appreciated :slight_smile: