Example to load splat map w/ Alpha?

Questions
, ,
1

Hi! I am new here & am scouring the web for a demo of splat map w/ alpha shader. Someone can tell me where to find one?

Thank you kindly!

2

Possible duplicate of:

3

Not really. I’m looking for reading splat textures with shader from RGBA image.

4

Can you please elaborate a bit? Showing an example would also be helpful in order to understand what you are looking for.

5

Yes, so basically I’m trying to texture splat terrain with this image

Splat Map w/ Alpha :

https://prnt.sc/kdwos3

Textures splatted onto Terrain :

https://prnt.sc/kdwp4f

As you can see, the roads drawn on the splat map with transparency are textures seamlessly melting into one another to create seamless road on terrain.

Alpha stands for snow, red stands for ground, green stands for grass & blue stands for gravel.

Here is another example :

If need to, I can try to explain a bit better. But I think this will do.

Thank You!

6

Anyone can help? I apologize for bumping this. I’m new here.

7

So you’re talking about texture splatting for materials? The standard method is using a weightmap/channel per material, in the fragment code you mix them together.

8

Yes. I have looked for example all over internet but find nothing.

9

For a basic terrain it’s simple, i think there is a height based splatting example in the examples. Anyways you need to write some shader code. You need to specify more where you stuck.

10

I learn by example. I need to be able to read RGBA image because I want to paint roads onto terrain.

11

Does the resolution of the weightmaps you intend to use suffice for drawing roads? They also won’t be directional mapped. It still isn’t specific enough, do you stuck at the shader code? There are examples, but those i remember face a different issue and aren’t made with THREE.

Just on a side note, i’m releasing a large scale terrain engine next week, it uses a method to support up to 256 materials at once including normal and displacment maps, fast with culling and LOD. It’s purpose is to enable large scale static-data terrains, also aiming to provide a road solution, since it isn’t trivial to solve. It’s a component of a larger framework of mine.

12

What you mean by weightmaps? I just want to be able to texture splat on terrain by reading RGBA splat map onto terrain & draw roads & paths. This terrain code. It is being released on github? Specifics? Can you add exporting of terrain to OBJ model with texture atlas? Would be great! I would love to beta test this terrain code!

13

With weightmaps you paint the different materials, it’s the alpha of the materials basically, in the fragment code you lookup the weight of the given material-texture and mix it according to this. For basic dirt roads which doesn’t have directional details it might fit your needs already.

The terrains geometry resolution is a geoclipmap LOD transformed fully on GPU, it’s even quite higher than the heightmap resolution and suffice for displacment details like rocks, it wouldn’t make sense in exporting it into a model, since the geometry is always locally around the camera (level of detail). The base capabilities of the terrain is similar to those of Unreal or Unity (several kilometers of sight, morphing etc.), but allows much more and is very optimized for performance and memory with webgl.

14

I would love to test terrain code for you! But right now I need basic shader to allow for reading RGBA to draw roads.

15

For a very simple setup with 4 materials you use 1 RGBA texture with each channel representing the alpha of the material over the terrain, then you add your 4 different texture with the weightmap as uniform to the shader material, in the framgent code you lookup the weightmap

vec4 weights = texture2D(weightMap, vUv);

Then you mix the textures according to that, while using their alpha maybe.

vec4 diffuseColor = texture2D(dirtTexture, vUv * offsetRepeat.zw); // You can use the first as base layer

vec4 l1 = texture2D(rocksTexture, vUv * offsetRepeat.zw);
vec4 l2 = texture2D(grassTexture, vUv * offsetRepeat.zw);
vec4 l3 = texture2D(snowTexture, vUv * offsetRepeat.zw);
vec4 l4 = texture2D(gravelTexture, vUv * offsetRepeat.zw);


diffuseColor.rgb = mix(
    diffuseColor.rgb,
    l1.rgb,
    weights.r * l1.a
);

diffuseColor.rgb = mix(
    diffuseColor.rgb,
    l2.rgb,
    weights.g * l2.a
);

diffuseColor.rgb = mix(
    diffuseColor.rgb,
    l3.rgb,
    weights.b * l3.a
);

diffuseColor.rgb = mix(
    diffuseColor.rgb,
    l4.rgb,
    weights.a * l4.a
);

Oh and you need to use 2 different uv coordinates, one is for the entire terrain to read the weightmap, the other is the uv for the terrain textures, since they are supposed to repeat, not being stretched accros the terrain.

1 Like
16

How I use shader on heightmap? I apologize for sounding stupid. I’m kinda’ new to this

Thank you so much for all of your help! I appreciate all of it!.

17

I don’t really know what you know, so the code fragment might not be of any help if you wouldn’t know glsl to start with for example. I don’t have time to setup an example, maybe just google a little, here’s one made for THREE too https://github.com/IceCreamYou/THREE.Terrain.

1 Like
18

I tried icecream you’s terrain & it’s way too confusing for me. I just want nice simple example. Nothing major.

20

This Icecream you shader. Does it read RGBA?

21

I don’t understand what you mean, i only found it as a quick search result and can’t give any information about it. Please stop double posting/bumping.

1 Like