# Drawing a decal shows a UV seam

**URL:** <https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845>\
**Category:** Questions\
**Created:** [November 22, 2023, 12:24am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845 "2023-11-22T00:24:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 12:24am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/1 "2023-11-22T00:24:24Z")

</div>

[https://playground.babylonjs.com/#N10DXG#156](https://playground.babylonjs.com/#N10DXG#156) (Click on mesh to draw decals)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/a/5a7bd220baa52f2ecaaa04b417d5ade61860f9aa.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/3/13b9f0478486a0e17961d59a4455f6b2597c540d.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/9/397542c9e32e4583e04e57a59ba17fa0df052cd4.jpeg)

In threeJS, I used to resolve this issue by changing the sampling mode on the texture and in BabylonJS I thought it was texture.updateSamplingMode but that is not yielding any result unfortunately.

I’ve tried both RenderTargetTexture and the Texture sampling mode and still nothing.

Thanks!

---

<div class="post-metadata">

**Author:** ![yamaciller](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yamaciller/32/21810_2.png) [@yamaciller](https://forum.babylonjs.com/u/yamaciller)\
**Post date:** [November 22, 2023, 9:32am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/2 "2023-11-22T09:32:58Z")

</div>

the UV layout is a bit shattered. If you do it in 2 islands - outer hull and bottom, so the seams dont run over the surface, would that resolve the issue?  
Best. WErner

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 9:45am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/3 "2023-11-22T09:45:47Z")

</div>

It is split up deliberately to show this issue.

Not all UVs are joined together, especially for tiling, but in this case its an example to show the problem that occurs.

---

<div class="post-metadata">

**Author:** ![yamaciller](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yamaciller/32/21810_2.png) [@yamaciller](https://forum.babylonjs.com/u/yamaciller)\
**Post date:** [November 22, 2023, 10:03am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/4 "2023-11-22T10:03:08Z")

</div>

I see ;), sry for that missunderstanding.  
We are in the mids of using decals, maybe I will learn something or experience the same issue.  
Thx! Werner

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [November 22, 2023, 12:06pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/5 "2023-11-22T12:06:16Z")

</div>

The PG is throwing an error:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/6/1650fe6859ed23dcb6fe7ebf8e508fe7f89deff5.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 22, 2023, 12:15pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/6 "2023-11-22T12:15:30Z")

</div>

You have discontinuities in your uv map:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8dea4f22d528f2c8d57c57ff3e44db3bb6de5b28.png)

This shows the (u,v) coordinates of each pixel. If possible, you can use a mesh decal, which does not depend on (u,v) coordinates.

@carolhmj You should re-click on “start”, as there are some downloads that may not be ready the first time you browse the PG.

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 1:52pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/7 "2023-11-22T13:52:13Z")

</div>

If you test it out and try to draw the decal you can see there are seams, this occurs whenever the UVs are split into islands. It’s standard stuff.

I’ve been using this decal system now for 9 months and this is the only major setback on it. The other options (mesh decal) are not good unfortunately.

Usually you fix this with sampling mode and it only occurs when the UV is set up like this.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 22, 2023, 3:49pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/8 "2023-11-22T15:49:56Z")

</div>

> [@Baktrian](#):
>
> In threeJS, I used to resolve this issue by changing the sampling mode on the texture

Does ThreeJS has a texture decal mode? Last time I looked, they only had mesh decal.  
If they have texture decal mode, it would be interesting to know what they are doing in that case, because in my understanding it’s the discontinuity in uv space that leads to this rendering artifact.

You can improve things a little bit by setting the “nearest” sampling mode to the decal texture, but it won’t completely fix it:

> **[Babylon.js Playground](https://playground.babylonjs.com/#N10DXG%23155)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 4:08pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/9 "2023-11-22T16:08:44Z")

</div>

No I don’t think ThreeJS has a decal system like BabylonJS.

BabylonJS is a much more advanced engine with all these great features. What Three does have is a way to fix the seams on textures where the UVs on the mesh are separate islands.

Its either an issue on the decal texture itself, or the MeshUVSpaceRenderer, or the RenderTargetTexture or the albedoTexture the decal ends up in on the material.

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 4:40pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/10 "2023-11-22T16:40:39Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/4/34926a6730a1370be1f79c7ca288f3e84f64aabf.jpeg)

I created another Playground build with an updated model that includes a baseColour texture.

> **[Babylon.js Playground](https://playground.babylonjs.com/#N10DXG%23156)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

The results conclude that the seams shown are actually the texture underneath the decal?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 22, 2023, 5:10pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/11 "2023-11-22T17:10:58Z")

</div>

Decals have an alpha=0 background, so you will see the diffuse texture when there’s no decal color:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/c/4ccc9064fdc3b5a9925e7b40f6cd0ce823b72d30.png)

For me, the problem is when generating the decal texture, because we render in uv space. When there’s a discontinuity, we will render either in one island or in another one, but not in both. We would probably need to render some king of “thickness” to be sure that when the texture is read we get the right color (but I don’t know how that could be done).

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 5:39pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/12 "2023-11-22T17:39:14Z")

</div>

Do the standard textures include this 1 pixel UV seam “thickness” already? or are they handled in another way, but there must be something in the usual texture function that corrects the UV seams, surely?

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 22, 2023, 6:31pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/13 "2023-11-22T18:31:22Z")

</div>

> <https://github.com/BabylonJS/Babylon.js/blob/58bb8984ceb36149e9050c50b3c362c889db53d5/packages/dev/core/src/Meshes/meshUVSpaceRenderer.ts#L147>

Could it be possible to update the shader to fix this bug?

Also here is the threejs splatter decal example.

[https://threejs.org/examples/webgl\_decals.html](https://threejs.org/examples/webgl_decals.html)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 23, 2023, 10:58am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/14 "2023-11-23T10:58:47Z")

</div>

> [@Baktrian](#):
>
> Could it be possible to update the shader to fix this bug?

I don’t know how to do that, but maybe someone else will be able to find a way.

> [@Baktrian](#):
>
> Also here is the threejs splatter decal example.

This example is using `DecalGeometry`, which is creating a new mesh.

---

<div class="post-metadata">

**Author:** ![yamaciller](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yamaciller/32/21810_2.png) [@yamaciller](https://forum.babylonjs.com/u/yamaciller)\
**Post date:** [November 23, 2023, 11:55am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/15 "2023-11-23T11:55:58Z")

</div>

Couldnt you just repeat the pixels when it comes to the UV edge.  
Isnt this kind of the same task as for a “render to texture”. In content tools there is this “seam” option which can be defined sometimes to overfill the edges.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 23, 2023, 12:17pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/16 "2023-11-23T12:17:20Z")

</div>

> [@yamaciller](#):
>
> Couldnt you just repeat the pixels when it comes to the UV edge.

No, because we don’t know we are at an edge when we generate the decal texture. Maybe this post will help to understand better how this process works:

> **[Another take at decals](https://babylonjs.medium.com/another-take-at-decals-ef8ec19221a1)**
>
> Before talking about the real subject of this post, let me introduce myself in a few words because it is the custom when a new team member…

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 23, 2023, 3:54pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/17 "2023-11-23T15:54:18Z")

</div>

So it should be possible with the meshUVSpaceRenderer Shader somehow.

Vertex

```auto
precision highp float;

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

uniform mat4 projMatrix;

varying vec2 vDecalTC;

#include<bonesDeclaration>
#include<bakedVertexAnimationDeclaration>

#include<morphTargetsVertexGlobalDeclaration>
#include<morphTargetsVertexDeclaration>[0..maxSimultaneousMorphTargets]

#include<instancesDeclaration>

void main(void) {
    vec3 positionUpdated = position;
    vec3 normalUpdated = normal;

    #include<morphTargetsVertexGlobal>
    #include<morphTargetsVertex>[0..maxSimultaneousMorphTargets]

    #include<instancesVertex>
    #include<bonesVertex>
    #include<bakedVertexAnimation>

    vec4 worldPos = finalWorld * vec4(positionUpdated, 1.0);

    mat3 normWorldSM = mat3(finalWorld);

    vec3 vNormalW;

    #if defined(INSTANCES) && defined(THIN_INSTANCES)
        vNormalW = normalUpdated / vec3(dot(normWorldSM[0], normWorldSM[0]), dot(normWorldSM[1], normWorldSM[1]), dot(normWorldSM[2], normWorldSM[2]));
        vNormalW = normalize(normWorldSM * vNormalW);
    #else
        #ifdef NONUNIFORMSCALING
            normWorldSM = transposeMat3(inverseMat3(normWorldSM));
        #endif

        vNormalW = normalize(normWorldSM * normalUpdated);
    #endif

    vec3 normalView = normalize((projMatrix * vec4(vNormalW, 0.0)).xyz);

    vec3 decalTC = (projMatrix * worldPos).xyz;
    vDecalTC = decalTC.xy;

    gl_Position = vec4(uv * 2.0 - 1.0, normalView.z > 0.0 ? 2. : decalTC.z, 1.0);
}

```

Fragment

```precision

varying vec2 vDecalTC;

uniform sampler2D textureSampler;

void main(void) {
    if (vDecalTC.x < 0. || vDecalTC.x > 1. || vDecalTC.y < 0. || vDecalTC.y > 1.) {
        discard;
    }

    gl_FragColor = texture2D(textureSampler, vDecalTC);
}

```

---

<div class="post-metadata">

**Author:** ![Baktrian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/baktrian/32/29646_2.png) [@Baktrian](https://forum.babylonjs.com/u/Baktrian)\
**Post date:** [November 24, 2023, 4:00am UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/18 "2023-11-24T04:00:25Z")

</div>

This might also be relevant:

> **[Texture-space Decals](https://devfault.wordpress.com/2018/06/13/texture-space-decals/)**
>
> I wanted to write up an interesting method of projected decal rendering I’ve been working on recently. The basic idea is (relatively) straightforward. To place a decal onto a mesh: – Re…

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 24, 2023, 2:37pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/19 "2023-11-24T14:37:58Z")

</div>

sounds quite nice but I am wondering how much it could bleed on other island ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 24, 2023, 3:50pm UTC](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845/20 "2023-11-24T15:50:01Z")

</div>

Also, it’s quite heavy because you have to make a new render pass and have another texture for the mask (having one texture per mesh that can receive a decal is already the main drawback of the technique)…

[Next page](https://forum.babylonjs.com/t/drawing-a-decal-shows-a-uv-seam/45845.md?page=2)