Graphically challenged dev needs artistic suggestions on floor improvement?

Questions
1

For the longest time I have been using the default floor that came with the example I used as a starting point, a simple checkerboard used in “repeat” mode (see screenshot).

Now I’m hoping to do something at least markedly better, but I don’t have a lot of time so it has to be fast and easy to implement.

Note: as I said in another thread, I love HDRI images but I always have the same problems with them:

  • They always appear quite diffuse and out of focus compared to the main scene
  • They don’t shift perspective when the camera moves around my main scene, which just “feels really weird”

So I prefer even something as simple as just a better graphic but I’ll take anything that makes the world look better than it does now. Ideas?

Here is the current code I have that creates the floor using the checkerboard graphic:

    // FLOOR
    // server/public/images/three-js-simple/checkerboard.jpg
    let floorTexture = new THREE.ImageUtils.loadTexture('/images/three-js-simple/checkerboard.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(15, 15);
    let floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
    let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    let floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.position.z = -350; // -450;
    floor.rotation.x = Math.PI / 2;
    g_ThreeJsScene.add(floor);

image
image1481×803 137 KB

2

you can bend hdri’s around, it’s called floor projection, the problem you noticed when shifting the view around goes away. makes for some interesting scenes. i believe the implementation you see in the sandboxes below is being merged into threejs, and if not you find the full code here: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

example 1: Envmap ground projection - CodeSandbox

example 2: Ground projected envmaps + lamina - CodeSandbox

there’s also the possibility to render the environment instead of just displaying a hdri. resolution in that case is up to you and you can present whatever you want.

another thing you could add is reflections. everything looks better if it reflects: SSR Test - CodeSandbox the library for that is called “screen-space-reflections” on github/npm.

2 Likes
3

How about something simple? What do you think of this?

image
image1594×792 140 KB