Best billiard ball material?

Questions
1

I have a lightweight browser-based billiards game and I want to improve the ball material. I think billiard balls must be the most well-known rendering challenge, but I’ve arrived at a material that seems to have limb darkening. Any suggestions?

browser demo

Current:

const material = new MeshPhysicalMaterial({
      color: color,
      roughness: 0.1,
      metalness: 0,
      clearcoat: 1.0,
      clearcoatRoughness: 0.02,
      reflectivity: 0.25,
    })
2

Tried to create a set of balls from scratch.

image
image847×842 88.5 KB

InstancedMesh of SphereGeometry and MeshPhysicalMaterial.

Material’s setup is:

      new THREE.MeshPhysicalMaterial({
        metalness: 0.5,
        roughness: 0.9,
        clearcoat: 1,
        onBeforeCompile: shader => {...}
      })

Also, there are scene.environment with intensity of 0.25, and DirectionalLight right above the “table”.

3

As a lifelong pool player, both look fine.

I like prisoner849’s example because the textures are more familiar and, most importantly, it is brighter. As he indicates, there is normally a fairly bright light hanging right over the pool table.

And the balls would be very smooth and hard (so they roll smoothly). Are roughness and metalness options with MeshPhysicalMaterial? I suspect the clearcoat is playing a big role in defining their appearance.

ALSO
I didn’t notice that there was a game to play. So I tried that. On the break, I sank the 15 ball in the right corner. While satisfying, that means that whoever racked up the balls did it wrong because you shouldn’t be able to sink a ball on the break with a straight shot dead center. I have seen players sink balls on the break but they always hit off-center and probably used a bit of “English” on the ball. Since pool is geometry, fixing this problem probably just involves moving the rack forward or back a bit.

4

I downloaded your repo locally and played with it a bit.. I wanted to add an 8ball mode but didn’t get there…

But I noticed you had:
renderer.setPixelRatio(window.devicePixelRatio * 0.5)
Which is why it looks pixelated on desktop browser…

Would be nice if you changed that to:

renderer.setPixelRatio(window.devicePixelRatio)

or even just 1 i think.
Or at least gated based on desktop vs mobile.

Regarding getting a more realistic material.. you probably want to add an enviroment map to get more lighting detail.