# How to create a multiple textured terrain

**URL:** <https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069>\
**Category:** Questions\
**Tags:** textures\
**Created:** [November 23, 2018, 11:58am UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069 "2018-11-23T11:58:45Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 19, 2019, 8:26am UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/23 "2019-06-19T08:26:40Z")

</div>

@Fyrestar could you elaborate a bit. I don’t get it 😃  
What’s a “material” for you? Do you mean something like a material ID in a deferred rendering? How do you deal with blending if your “indices map” is discrete and each of 256 byte values corresponds to a “material index”? So many questions.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/9ad80a3a61d60d07bffc9bcea8357f4756cfad89.jpeg)

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [June 19, 2019, 3:09pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/24 "2019-06-19T15:09:08Z")

</div>

This is what I mean by 256 textures:

[https://forum.unity.com/threads/released-megasplat-a-256-texture-splat-mapping-system.441329/](https://forum.unity.com/threads/released-megasplat-a-256-texture-splat-mapping-system.441329/)

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 19, 2019, 5:08pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/25 "2019-06-19T17:08:56Z")

</div>

Okay, took a while, but I think I understand now. So splatting is binary, meaning that you get to pick exactly 1 “material” per vertex, then inside the fragment shader you sample from 3 textures (1 per face vertex) and interpolate. It’s pretty neat, not too bad for GPU cache either, I think. Problem is only in the fact that you can’t do any blending aside from that between 2 vertices. It’s an interesting approach, I have considered it in the past, but I wanted smooth transitions, so I didn’t go for it. You can probably do smooth transitions with some trickery, like packing multiple copies of a texture into the “ArrayTexture”, but it wastes a lot of GPU memory.

Thanks for the link @Aerion

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 19, 2019, 7:01pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/26 "2019-06-19T19:01:38Z")

</div>

What i meant with materials is the map stack for a tile/material in the atlas (consisting of diffuse, normals, depth, roughness etc)

Actually storing in vertices is one way to go, but my technique is still based on a weightmap (one for all). Like i said it is about spatial distribution since you rather not need to always blend between all/many materials you have, what happens in the default splatting approach.

With mine you have a constant amount of texture fetches for a theoretically infinite number of materials. I’d say it works similar by storing indices of materials but doing it with maps, since i need a consistent material mapping over huge distances and can’t rely on the tesselation density, as well a varying falloffs still being possible.

Asuming the PBR maps (such as normals, depth, roughness etc) are already packed, with the regular splatting approach, for a number of 16 materials (or called layers there) it will take about 80 texture fetches, while with my spatially based approach it is a constant number of 14 fetches. The more fine details are added with stacked material patches and decal patches for details like puddles, branches, plants or rocks more supposed to be spot-details, but that’s a little more engine specific.

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 19, 2019, 7:15pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/27 "2019-06-19T19:15:43Z")

</div>

Sounds pretty cool, is there a paper you have based it on, or some other source?

I don’t understand how you’re making the decision about which materials to blend out of many for a specific texel fragment. Personally, i thought about encoding material index and blend, naively that would take a channel each, so say: R: Index0, G: Blend0, B: Index1, A: Blend1. That gives you ability to blend (up to) 2 materials per given texel. Can pack more than 2 into Uint8 RGBA too.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 19, 2019, 8:55pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/28 "2019-06-19T20:55:43Z")

</div>

Sorry i don’t have sources, i came up with this technique myself like the rest of the engine 😅

Basically it gives the ability to blend between 4 materials per texel (+1 by using a ground base), this is why the processing on brushing has to be aided and ensure a padding of at least one texel if the channel uses 2 different materials, what happens at a “conflict” then is simply a replacement by the current brush. This isn’t really a limitation though especially when you base your terrain on biomes and use other techniques like i mentioned for additional details. The stacked material patches basically offer something similar the compositor for LOD based tiles would do by giving a much higher texel density by being a local area.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [June 20, 2019, 6:22pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/29 "2019-06-20T18:22:31Z")

</div>

EDIT : So I’ve been working for weeks on this & to no avail.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [June 24, 2019, 9:18pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/30 "2019-06-24T21:18:53Z")

</div>

EDIT 2 : It’s now been a month & still to no avail. ☹

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 8, 2019, 1:45pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/31 "2019-07-08T13:45:31Z")

</div>

Does anyone know a demo to do this?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [July 8, 2019, 1:57pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/32 "2019-07-08T13:57:53Z")

</div>

If you mean megasplat i don’t think there is a JS one, but it isn’t hard to implement. For the other, i’ve created this technique myself, there is no public demo.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 8, 2019, 1:59pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/33 "2019-07-08T13:59:45Z")

</div>

Can you possibly show a demo of the technique you created? RGBA splatmap?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [July 8, 2019, 2:09pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/34 "2019-07-08T14:09:26Z")

</div>

This is too complicated since it requires a different handling of the data, but if you’re interested i’m starting a early access on the [planar terrain engine](https://discourse.threejs.org/t/open-world-planetary-engine/1473/9) soon, it provides a full system for very efficient large scale LOD terrains.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 8, 2019, 2:10pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/35 "2019-07-08T14:10:47Z")

</div>

I’d love to! Sure! When is it going to be out? Can you release an example of LOD terrain with RGBA splatmap?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [July 8, 2019, 2:15pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/36 "2019-07-08T14:15:54Z")

</div>

There are examples and documentation included, the planar + static data based one will be separate from the procedural components and planetary one and be available at a lower price.

I intended to start this month but other work has been busy, so next month i guess.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 8, 2019, 8:22pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/37 "2019-07-08T20:22:07Z")

</div>

Do you perhaps have an example from this engine that does RGBA splat maps that I could study?

EDIT : Also, I look forward to trying out this engine of yours! Keep up the great work! 🙂

---

<div class="post-metadata">

**Author:** ![arpu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arpu/32/6583_2.png) [@arpu](https://discourse.threejs.org/u/arpu)\
**Post date:** [March 5, 2020, 7:12pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/38 "2020-03-05T19:12:39Z")

</div>

@Fyrestar any news on this?

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [March 13, 2020, 6:22pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/39 "2020-03-13T18:22:44Z")

</div>

@Fyrestar : I agree with @arpu. Is there any update?

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [March 28, 2026, 8:37pm UTC](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/40 "2026-03-28T20:37:44Z")

</div>

That approach is basically correct. Using a blend map where the RGB channels control different terrain textures is the standard texture splatting technique used in many terrain systems.

One small improvement you can consider is normalizing the weights to avoid darkening or color shifts when multiple channels overlap. Sometimes people also use the alpha channel of the blend map as a fourth texture so you can control up to four terrain layers from a single map.

Another common addition is using different tiling scales per texture (like you already started doing with the rocky texture) so large terrains don’t look repetitive. Some projects also mix splatting with triplanar mapping to reduce stretching on steep slopes.

If you’re experimenting with terrain systems, here’s an example of a browser environment where terrain texturing and exploration are used in a larger scene:

[https://theneoverse.web.app/#threeviewer&&crateria](https://theneoverse.web.app/#threeviewer&&crateria)

Terrain blending like this becomes really powerful when combined with heightmaps, splat maps, and procedural placement for vegetation or rocks.

Nice first shader experiment by the way. Getting a splat shader working is a great step into custom terrain rendering.

[Previous page](https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069.md?page=1)