CODEWITHSUNDEEP
three.js
zinfandel
zinfandel

Reputation: 458

Properly scaling textures in three.js / proctree.js

Apologies for the vague title, I'm not sure how to describe my issue.

I'm trying to create a forest in three.js with the very cool proctree.js. The library seems to create a 3d model of the tree's trunk and main branches, then adds simple flat textures for the leaves (or 'twigs').

The resulting tree looks very nice from up close but as you zoom out the leaves visually disappear almost entirely. This is a problem as I'm trying to create a dense looking forest. See the following two screengrabs (or this online viewer):

tree up close tree from afar

Is there a way to prevent the leaves from becoming very pixelated and thin looking from a distance? Or, to phrase the question differently, how would one create good-looking leaves that look as dense from a distance as they do from up close?

The material used looks like this:

this.twigMaterial = new THREE.MeshStandardMaterial({
  color: this.config.twigColor,
  roughness: 1.0,
  metalness: 0.0,
  map: this.textureLoader.load('assets/twig-1.png'),
  alphaTest: 0.9
});

Upvotes: 0

Views: 350

Answers (1)

M -
M -

Reputation: 28462

Your problem sounds very similar to this one

I'm pretty certain that the smaller-resolution mipmaps (when you zoom out) are blending your leaf textures and changing the alpha values to which the alphaTest threshold compares to. The further away you are, the more area of your texture is considered "transparent".

You can modify your texture properties as follows to disable mipmaps:

var texture = this.textureLoader.load('assets/twig-1.png');
texture.minFilter = THREE.LinearFilter;

this.twigMaterial = new THREE.MeshStandardMaterial({
  color: this.config.twigColor,
  roughness: 1.0,
  metalness: 0.0,
  map: texture,
  alphaTest: 0.9
});

However, this might give your leaves an aliased look. Alternatively, you could create your own .mipmaps and pass them to your texture as an array to have a more custom look.

Upvotes: 1

Related Questions