1

I'm using THREE.js to load a collada model. The model represents a hilly terrain. Right now the model has a repeating texture (grass) to it.

What I'm looking to do is to add decals (not sure if this is the right nomenclature) to the model. Basically I have a patch of sand (decal_sand.png) and I would like to 'paste' this on the model, given an x and a y value. (the point of origin). Optionally with some rotation along the y axis / scaling applied to it. Can this be done?

I'm not really sure how to do a JSfiddle, because I can't load collada models there? I uploaded a test case here: http://graphics.tudelft.nl/~bsg201302/decal_testcase/

I whipped up an example in photoshop. The patches of sand need to be programatically placed on the hilly surface.. http://graphics.tudelft.nl/~bsg201302/decal_testcase/terrain_decals.png

spassvogel
  • 3,479
  • 2
  • 18
  • 23

1 Answers1

2

What you want is called texture splatting.

Here is an example:

https://stackoverflow.com/a/18994814/360770

But instead of using the height of the terrain, you should use an attribute to choose which texture should be drawn.

Community
  • 1
  • 1
Gero3
  • 2,817
  • 1
  • 22
  • 21