# Help Please ! Triplannar mapping of texture is not working

**URL:** <https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362>\
**Category:** Questions\
**Tags:** loaders, materials, textures, geometry\
**Created:** [July 15, 2022, 10:21am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362 "2022-07-15T10:21:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 15, 2022, 10:21am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/1 "2022-07-15T10:21:05Z")

</div>

I am trying to do texture mapping with triplanner mapping in three.js in terrain created after heightmap data into plane mesh.

To do that i load the diffuse texture by

```javascript
 let diffuseTex;
  loader.load(
    "./resources/images/satellite.png",
    function (image) {
      diffuseTex = image;
    },
    undefined,
    function () {
      console.error("An error happened.");
    }
  );

```

I did use that texture created from the diffusemap image that i have locally as an uniform

```javascript
var uniforms1 = {
    diffuseTexture: { type: "t", value: diffuseTex },
  };

  const _meshMaterial = new THREE.RawShaderMaterial({
    uniforms: uniforms1,
    vertexShader: terrainShader._VS,
    fragmentShader: terrainShader._FS,
  });

```

My shader code is:

```javascript
const _VS = `#version 300 es
precision highp float;

uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

in vec3 position;
in vec3 normal;

out vec3 vNormal;
out vec3 vPosition;

#define saturate(a) clamp( a, 0.0, 1.0 )

void main(){
    vNormal = normal;
    vPosition = position.xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    vPosition = vec3(gl_Position.xyz)*0.5 + 0.5;
    
  }
`;

const _FS = `#version 300 es

precision mediump sampler2DArray;
precision highp float;
precision highp int;

uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform vec3 cameraPosition;
uniform sampler2D diffuseMap;

in vec3 vNormal;
in vec3 vPosition;

out vec4 out_FragColor;

vec3 blendNormal(vec3 normal){
    vec3 blending = abs(normal);
    blending = normalize(max(blending, 0.00001));
    blending /= vec3(blending.x + blending.y + blending.z);
    return blending;
}

vec3 triplanarMapping (sampler2D tex, vec3 normal, vec3 position) {
  vec3 normalBlend = blendNormal(normal);
  vec3 xColor = texture(tex, position.yz).rgb;
  vec3 yColor = texture(tex, position.xz).rgb;
  vec3 zColor = texture(tex, position.xy).rgb;
  return (xColor * normalBlend.x + yColor * normalBlend.y + zColor * normalBlend.z);
}

void main(){
    vec3 color = triplanarMapping(diffuseMap, vNormal, vPosition);
    out_FragColor = vec4(color, 1.0);

  }
`;
export const terrainShader = { _VS, _FS };

```

Then i create a mesh with the geometry which is filled with the vertices data and material created with custom shader:

```javascript
let geometry = new THREE.PlaneGeometry(
      partial.x,
      partial.y,
      partial.x - 1,
      partial.y - 1
    );
    geometry.setFromPoints(chunk[i]);
    geometry.computeVertexNormals();
    let mesh = new THREE.Mesh(geometry, _meshMaterial);
    mesh.castShadow = false;
    mesh.receiveShadow = true;

    scene.add(mesh);

```

I don’t know what i am doing wrong because i am getting this as output of terrain:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/d/7d392ddd23ed25c18f87a6c4c336291a74d42758.jpeg)

I was expecting mapping of this texture above this terrain.

texture to map:

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/e/de35cfc2391d99d79cf2e88a586877e609065a4a.jpeg)

I am new to this and struggling can anyone please help me ?

This is the complete code and this code is not working because though i did put all code into fiddle but three.js loader.load( image url) is thowing error of CORS which is not going even if i am doing loader.setCrossOrigin(“anonymous”);

because of it demo is not working but fiddle is

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/c5htgjq0/4/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 15, 2022, 1:44pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/2 "2022-07-15T13:44:58Z")

</div>

You want to use webgl 2.0 shader into webgl 1.0 shader

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [July 15, 2022, 2:53pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/3 "2022-07-15T14:53:44Z")

</div>

you don’t happen to use any SharedArrayBuffers do you? if so changed it to ArrayBuffer

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 17, 2022, 7:21am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/4 "2022-07-17T07:21:47Z")

</div>

is there anything wrong on the shader?

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 17, 2022, 7:22am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/5 "2022-07-17T07:22:13Z")

</div>

i am sorry, can you please help me know where can i use that ?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 17, 2022, 8:00am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/6 "2022-07-17T08:00:05Z")

</div>

Test one projection

```javascript
void main(){
    out_FragColor = texture(diffuseMap,position.yz);
  }

```

If black, then into console use  
`diffuseTex.needsUpdate=true;`

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 19, 2022, 5:53am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/7 "2022-07-19T05:53:35Z")

</div>

With that texture doing this:

```javascript
loader.load(
    "./resources/images/satellite.png",
    function (texture) {
      texture.needsUpdate = true;
      texture.minFilter = THREE.NearestMipmapNearestFilter;
      texture.magFilter = THREE.LinearFilter;
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

```

and shader code as:

```javascript
 vec3 color = triplanarMapping(diffuseTexture, vNormal, vPosition);
    out_FragColor = vec4(color, 1.0);

```

Output is:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/2/72a32577f3081599634de257230961c5a61ea119.jpeg)

This is zoomed in, this is same image tiled. I just wanted to let you know if it will help.

even with:

I removed that repeat wrapping and with this in shader

` out_FragColor = vec4(texture(diffuseTexture, vPosition.yz).rgb, 1.0);`

output is same as with

```javascript
  vec3 color = triplanarMapping(diffuseTexture, vNormal, vPosition);
    out_FragColor = vec4(color, 1.0);

```

which is

The output is no longer after i created material in callback of load i.e

```javascript
const loader = new THREE.TextureLoader();
  loader.setCrossOrigin("anonymous");

  loader.load(
    "./resources/images/satellite.png",
    function (texture) {
      texture.needsUpdate = true;
      texture.minFilter = THREE.NearestMipmapNearestFilter;
      texture.magFilter = THREE.LinearFilter;
      // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

      var uniforms1 = {
        diffuseTexture: { type: "t", value: texture },
      };

      _meshMaterial = new THREE.RawShaderMaterial({
        uniforms: uniforms1,
        vertexShader: terrainShader._VS,
        fragmentShader: terrainShader._FS,
      });
      createMainMesh();
      // createChunkFromMesh();
      lightingSetUp();
    },
    undefined,
    function (err) {
      console.error("An error happened.", err);
    }
  );

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/6/c6325965d4d39ab9b3e81d7710627aca787e207a.jpeg)

Please help me i am clueless on this

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 19, 2022, 7:02am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/8 "2022-07-19T07:02:52Z")

</div>

Works good if comment this

```javascript
//#version 300 es
//vPosition = vec3(gl_Position.xyz)*0.5 + 0.5;

```

Into material: `glslVersion: THREE.GLSL3,`

```javascript
				const material = new THREE.RawShaderMaterial( {
					glslVersion: THREE.GLSL3,
					uniforms: {
						diffuseMap: { value: texture },
					},
					vertexShader,
					fragmentShader,
					side: THREE.DoubleSide,
				} );

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/e/8e65fc9e87f269aaa843822d94311dbd731b0cc6.jpeg)

For stretched texture:

```javascript
void main(){
    vNormal = normal;
    vPosition = position.xyz/10.0;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    //vPosition = vec3(gl_Position.xyz)*0.5 + 0.5;
}

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/7/a77c6a2cd9e7b31c02633cd5b63f58a6b54da78f.jpeg)

Texture code:

```javascript
var texture_loader=new THREE.TextureLoader();
var texture=texture_loader.load("test.jpg");
texture.wrapS=texture.wrapT=THREE.RepeatWrapping;

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a148dcfdef4ae206d52342a565c8b29667c7d0a1.jpeg)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 19, 2022, 7:12am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/9 "2022-07-19T07:12:27Z")

</div>

I tried this but no change in output, do you think that for passing vertex position to shader, am doing good?

I do nothing but just put  
`in position`

in shader

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 19, 2022, 7:16am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/10 "2022-07-19T07:16:15Z")

</div>

If landScape is chunks, then maybe need add chunk position to his vertexposition in shader

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 19, 2022, 7:18am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/11 "2022-07-19T07:18:42Z")

</div>

Need full zip archive

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/c/dcc0ca437723c4dd2084ed22b683bb508ce33641.jpeg)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 19, 2022, 9:09am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/12 "2022-07-19T09:09:31Z")

</div>

The terrain is not in chunk rather it is complete one mesh.

This is my terrain this is color that i used normalized normal for color so its red and green  
I am posting this to show my terrain

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/8/f8e63c85e8fda9508d7d78f12a43b61d4fb092f6.jpeg)

The mesh i have is 4104x1856 in length and breadth

and mapping texture is also of 4104x1856

The texture is supposed to map into the mesh

My texture is:

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/f/8f77fc5a69b96c62af325484cc5b44e4c7969f26.jpeg)

I saw that you were dividing the position with value of 10 so i did this:

```javascript
 vPosition = vec3(position.x/4104.0, position.y/1000.0, position.z/1856.0);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

```

I am dividing y with 1000 because i am getting y value of the vertices from the elevation file containing elevation of the vertices between 0 and 1 and multplying it by 1000 to get final result

```javascript
const geometry = new THREE.PlaneGeometry(
    4104,
    1856,
    4103,
    1855
  );

  const vertices: Array<number> = (geometry as THREE.BufferGeometry).attributes
    .position.array as Array<number>;

  let i = 0,
    j = 0,
    l = 0;

for (i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
    vertices[j + 1] = data[i] * 1000;
  }

```

data is array of height value from elevation file which has generated the above terrain.

so i divided position.y by 1000 in

` vPosition = vec3(position.x/4104.0, position.y/1000.0, position.z/1856.0);`

I removed the

` texture.wrapS = texture.wrapT = THREE.RepeatWrapping;`

because right now i have texture of same size as the mesh size.

and this time i am getting something which i believe is progress than what i had earlier.

Big thanks to you.

but the problem now is that it is not mapping correctly

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/8/a84cee3b5039c5f7bd66bbad20257a6bb1ade389.jpeg)

And this is output for

`out_FragColor = vec4(vPosition.xyz, 1.0);`

in the mesh i dont see any place white, i dont know what position shader is getting or value of position attribute which i thought get its value automatically.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/f/afa9b3fc915ae16a8e7203f55cafeaded36d468d.jpeg)

Another case is with this texture:

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c34d5c48c14ef3aeeb379f27c8202568caa953b1.png)

output is:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/7/f7de5861d845807fa7957178462d725b8ba5b8d4.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 19, 2022, 11:05am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/13 "2022-07-19T11:05:53Z")

</div>

Star texture shows incorrect. Star moved to left. PlaneGeometry scale geometry to left and up from center 0.0. You can add some offset to vPosition

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/6/46568fccd0ad088738e53831cc177213b623c8e8.png)

```javascript
void main(){
vNormal = normal;
vPosition=vec3(position.x/4104.0+0.5,position.y/1000.0,position.z/1856.0+0.5);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57ab1a49b243ad2c893837f0e38728ebac4bb35d.png)

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [July 20, 2022, 10:27am UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/14 "2022-07-20T10:27:17Z")

</div>

Are you sure the uvs are properly mapped inside your mesh?

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 22, 2022, 12:22pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/15 "2022-07-22T12:22:02Z")

</div>

I did this:

```javascript
    vNormal = normal;
    vNormalView = normalize(normalMatrix*normal);
    float _positiony = position.y*heightScale;
    vPosition.x = ((position.x/15216.0) *-0.5) + 0.5;
    vPosition.z = ((position.z/7424.0)*0.5) + 0.5;
    float _heightScale = 1000.0*heightScale;
    vPosition.y = position.y/_heightScale;

```

and the output is now after applying a directional lighting:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2d5be9ed8602ea4cc3984f34240c5066363a776c.jpeg)

Thank you very very much for guiding me.

I have heightmap data for 4104x1856 vertices,

So i create mesh with this:

const geometry = new THREE.PlaneGeometry(  
8 \* 4104,  
8 \* 1856,  
4104 - 1,  
1856 - 1  
);

I multiplied with 8 because putting higher number looks much better than 4104. I dont know the reason.

I apply the topological map image which is also 4104x1856 in the fragment shader with triplanar sampling.

I am sue if i am not understanding how this woks but

The problem is that when i zoom in the output is this:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/a/9a6e042fb80de27f3056ce314526753652dc3416.jpeg)

is there any thing that i can do make this smooth ? or atleast something that won’t look wierd like this?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 22, 2022, 1:03pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/16 "2022-07-22T13:03:23Z")

</div>

Looks good. I use another triplanar. For one texture:

```javascript
void main(){
vec3 blend_weights=vNormal*vNormal;
float maxBlend=max(blend_weights.x,max(blend_weights.y,blend_weights.z));
blend_weights=max(blend_weights-maxBlend*0.5,0.0);
blend_weights.y*=0.5;
float rcpBlend=1.0/(blend_weights.x+blend_weights.y+blend_weights.z);
vec3 weights=blend_weights*rcpBlend;
vec3 color=weights.x*texture(diffuseMap,vPosition.zy).rgb+weights.y*texture(diffuseMap,vPosition.xz).rgb+weights.z*texture(diffuseMap,vPosition.xy).rgb;
out_FragColor = vec4(color*light_c, 1.0);
  }

```

For 2 textures:

```javascript
void main(){
vec3 blend_weights=vNormal*vNormal;
float maxBlend=max(blend_weights.x,max(blend_weights.y,blend_weights.z));
blend_weights=max(blend_weights-maxBlend*0.5,0.0);
blend_weights.y*=0.5;
float rcpBlend=1.0/(blend_weights.x+blend_weights.y+blend_weights.z);
vec3 weights=blend_weights*rcpBlend;
vec3 color=weights.x*texture(diffuseMap2,vPosition.zy).rgb+weights.y*texture(diffuseMap,vPosition.xz).rgb+weights.z*texture(diffuseMap2,vPosition.xy).rgb;
out_FragColor = vec4(color*light_c, 1.0);
}

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/c/ac9bf6fbf27f34914706ea1642e502b865a6f76f.jpeg)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 22, 2022, 1:49pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/17 "2022-07-22T13:49:15Z")

</div>

It looks more smoother when there is flat plane but looks very unusual when there is a hill or elevation and on closer proximity i dont know but there is a artifact like this:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/6/c69da75f02ae18553e3e2e68edb4d0be8e080a3b.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b00f007b01446ec8155b3a7d1c8e91b3c47c3346.jpeg)

and this is on hill:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/0/502e3849b1d93b4fc41ba1dafcea509e7c103ffc.jpeg)

but overall image looks smooth from far:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0dce0a82364802725ae72f2174978be9503c40d2.jpeg)

what do you suggest?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 22, 2022, 2:08pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/18 "2022-07-22T14:08:58Z")

</div>

Try change order likes this: vPosition.zy to vPosition.yz, vPosition.xy to vPosition.yx  
`vec3 color=weights.x*texture(diffuseMap2,vPosition.yz).rgb+weights.y*texture(diffuseMap,vPosition.xz).rgb+weights.z*texture(diffuseMap2,vPosition.yx).rgb;`

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [July 22, 2022, 2:24pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/19 "2022-07-22T14:24:32Z")

</div>

I did this but the texture mapping went more mad !!! When i dont have texture mapped even at that time there is pixalation kind of thing is visible which i believe is height difference but height data of vertices in elevation map file is very correlated data like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/c/9cd494e764d417d3753e6e5feb9e9888c71b097f.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 22, 2022, 2:57pm UTC](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362/20 "2022-07-22T14:57:36Z")

</div>

Maybe in total one side be good looking but if look at back side there again wiil be not correct, because it not seamless texture.

[Next page](https://discourse.threejs.org/t/help-please-triplannar-mapping-of-texture-is-not-working/40362.md?page=2)