# Decal Creation RightHandedCoordinateSystem

**URL:** <https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902>\
**Category:** Questions\
**Tags:** pointerevents, decals, bug\
**Created:** [April 22, 2024, 11:24am UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902 "2024-04-22T11:24:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Forsaken](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/forsaken/32/21296_2.png) [@Forsaken](https://forum.babylonjs.com/u/Forsaken)\
**Post date:** [April 22, 2024, 11:24am UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/1 "2024-04-22T11:24:59Z")

</div>

Hey everyone,

I came across the following issue:  
Whenever I try to apply a decal to certain meshes while the rightHandedCoordinate system is enabled, the decals get placed on the inside of the mesh, I’ve tried inversing the normals but I couldn’t get the decals to unflip, I’m not sure if this is a bug or not. When you turn on right hand with the default decal scene’s cat model, this issue isn’t there…

I have the following scene as an example, for some reason my playground won’t save so you’ll have to paste it in the playground manually:

```auto
var createScene = function () {
	var scene = new BABYLON.Scene(engine);

	//Adding a light
	var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

	//Adding an Arc Rotate Camera
	var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);
    scene.useRightHandedSystem = true
	camera.attachControl(canvas, true);

	// The first parameter can be used to specify which mesh to import. Here we import all meshes
	BABYLON.SceneLoader.ImportMesh("", Assets.meshes.flightHelmet.rootUrl, Assets.meshes.flightHelmet.filename, scene, function (newMeshes) {  	
        var cat = newMeshes[0];

		// Set the target of the camera to the first imported mesh
		camera.setTarget(cat);

		var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
		decalMaterial.diffuseTexture = new BABYLON.Texture("/textures/impact.png", scene);
		decalMaterial.diffuseTexture.hasAlpha = true;
		decalMaterial.zOffset = -2;

    var onPointerDown = function (evt) {
        if (evt.button !== 0) {
            return;
        }

        var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return newMeshes.findIndex(m => m.uid == mesh.uid) > -1 });
        if (pickInfo.hit) {
            var decalSize = new BABYLON.Vector3(10, 10, 10);

            console.log(pickInfo.pickedMesh)
            var decal = BABYLON.MeshBuilder.CreateDecal("decal", pickInfo.pickedMesh, {
                position: pickInfo.pickedPoint,
                normal: pickInfo.getNormal(true),
                size: decalSize,
            });
            decal.material = decalMaterial;
            decal.setParent(pickInfo.pickedMesh);
        }
    }
		var canvas = engine.getRenderingCanvas();
		canvas.addEventListener("pointerdown", onPointerDown, false);

		scene.onDispose = function () {
			canvas.removeEventListener("pointerdown", onPointerDown);
		}
	});

	return scene;
};

```

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [April 22, 2024, 12:16pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/2 "2024-04-22T12:16:05Z")

</div>

Like this? [Babylon.js Playground](https://playground.babylonjs.com/#HVSUC1) There is some distortion though around the wooden base thingy.

---

<div class="post-metadata">

**Author:** ![Forsaken](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/forsaken/32/21296_2.png) [@Forsaken](https://forum.babylonjs.com/u/Forsaken)\
**Post date:** [April 22, 2024, 12:18pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/3 "2024-04-22T12:18:13Z")

</div>

Yes, thank you. I coincidentally also just ran into this solution myself. I’m a bit confused why this is required for some models and not for others though. As long as it works it’s fine for the most part however.

As a further example, it actually even breaks it here (the documentation provided example scene):

```auto
var createScene = function () {
	var scene = new BABYLON.Scene(engine);

	//Adding a light
	var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

    scene.useRightHandedSystem = true
	//Adding an Arc Rotate Camera
	var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

	camera.attachControl(canvas, true);

	// The first parameter can be used to specify which mesh to import. Here we import all meshes
	BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "/scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
		var cat = newMeshes[0];

		// Set the target of the camera to the first imported mesh
		camera.target = cat;

        setInterval(()=>{
            cat.rotation.y += 0.1
        }, 100);

		var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
        decalMaterial.sideOrientation = BABYLON.StandardMaterial.CounterClockWiseSideOrientation;
		decalMaterial.diffuseTexture = new BABYLON.Texture("/textures/impact.png", scene);
		decalMaterial.diffuseTexture.hasAlpha = true;
		decalMaterial.zOffset = -2;

		var onPointerDown = function (evt) {
			if (evt.button !== 0) {
				return;
			}

			// check if we are under a mesh
			var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; });
			if (pickInfo.hit) {
				var decalSize = new BABYLON.Vector3(10, 10, 10);

			/ **************************CREATE DECAL************************************************* /
				var decal = BABYLON.MeshBuilder.CreateDecal("decal", cat, {position: pickInfo.pickedPoint, normal: pickInfo.getNormal(true), size: decalSize});
				decal.material = decalMaterial;
                decal.setParent(cat); // this won't work too
			/ *************************************************************************************** /	
			
			}
		}
		var canvas = engine.getRenderingCanvas();
		canvas.addEventListener("pointerdown", onPointerDown, false);

		scene.onDispose = function () {
			canvas.removeEventListener("pointerdown", onPointerDown);
		}
	});

	return scene;
};

```

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

---

<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:** [April 22, 2024, 10:11pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/4 "2024-04-22T22:11:23Z")

</div>



---

<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:** [April 22, 2024, 10:11pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/5 "2024-04-22T22:11:38Z")

</div>

I will have a look as soon as possible.

---

<div class="post-metadata">

**Author:** ![Forsaken](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/forsaken/32/21296_2.png) [@Forsaken](https://forum.babylonjs.com/u/Forsaken)\
**Post date:** [May 2, 2024, 1:25pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/6 "2024-05-02T13:25:52Z")

</div>

Hi, not trying to be pushy. But did you have time yet to look into 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:** [May 2, 2024, 4:32pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/7 "2024-05-02T16:32:08Z")

</div>

It’s not really a bug, the problem is that meshes loaded from a .glb file have a right-handed geometry, so the decal mesh is also created as a right-handed geometry mesh.

To fix the problem, you either have to change the orientation of the material to `BABYLON.Material.CounterClockWiseSideOrientation`, or set the decal mesh `overrideMaterialSideOrientation` property to `BABYLON.Material.CounterClockWiseSideOrientation`.

There’s no problem with Schrodinger’s cat, because it comes from a .babylon file, which is left-handed.

---

<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:** [May 2, 2024, 4:32pm UTC](https://forum.babylonjs.com/t/decal-creation-righthandedcoordinatesystem/49902/8 "2024-05-02T16:32:25Z")

</div>