Mapa de desplazamiento Mapeo UV?

Question

Resumen

Estoy tratando de aplicar un mapa de desplazamiento (mapa de altura) a un objeto bastante simple (avión hexagonal) y tengo algunos resultados inesperados. Estoy usando escala de grises y como tal, estaba bajo la impresión, mi mapa de altura solo debería estar afectando los valores z de mi malla. Sin embargo, el mapa de desplazamiento que he creado estira la malla a través de los aviones X e Y. Además, no parece usar el mapeo UV que he creado que todas las demás texturas se aplican con éxito.

Modelo y mapa UV

Aquí hay imágenes de referencia de mi malla hexagonal y su correspondiente mapa UV en Blender.

Texturas difusas y de desplazamiento

Estas son las texturas difusas y del mapa de desplazamiento que estoy aplicando a mi malla a través de tres.js.

Renders

Cuando rindo el avión sin un mapa de desplazamiento, puede ver que el avión hexagonal permanece dentro de las líneas. Sin embargo, cuando agrego el mapa de desplazamiento, afecta claramente las posiciones X e Y de los vértices en lugar de afectar solo a la Z, ampliando el avión bien sobre las líneas.

Código

Aquí está el código Three.js relevante:

    // Textures
    var diffuseTexture = THREE.ImageUtils.loadTexture('diffuse.png', null, loaded);
    var displacementTexture = THREE.ImageUtils.loadTexture('displacement.png', null, loaded);

    // Terrain Uniform
    var terrainShader = THREE.ShaderTerrain["terrain"];
    var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);

  //uniformsTerrain["tNormal"].value = null;
  //uniformsTerrain["uNormalScale"].value = 1;

    uniformsTerrain["tDisplacement"].value = displacementTexture;
    uniformsTerrain["uDisplacementScale"].value = 1;

    uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture;
  //uniformsTerrain[ "tDetail" ].value = null;
    uniformsTerrain[ "enableDiffuse1" ].value = true;
  //uniformsTerrain[ "enableDiffuse2" ].value = true;
  //uniformsTerrain[ "enableSpecular" ].value = true;

  //uniformsTerrain[ "uDiffuseColor" ].value.setHex(0xcccccc);
  //uniformsTerrain[ "uSpecularColor" ].value.setHex(0xff0000);
  //uniformsTerrain[ "uAmbientColor" ].value.setHex(0x0000cc);

  //uniformsTerrain[ "uShininess" ].value = 3;
  //uniformsTerrain[ "uRepeatOverlay" ].value.set(6, 6);

    // Terrain Material
    var material = new THREE.ShaderMaterial({
        uniforms:uniformsTerrain,
        vertexShader:terrainShader.vertexShader,
        fragmentShader:terrainShader.fragmentShader,
        lights:true,
        fog:true
    });

    // Load Tile
    var loader = new THREE.JSONLoader();
    loader.load('models/hextile.js', function(g) {
      //g.computeFaceNormals();
      //g.computeVertexNormals();
        g.computeTangents();
        g.materials[0] = material;

        tile = new THREE.Mesh(g, new THREE.MeshFaceMaterial());
        scene.add(tile);
    });

Hipótesis

Actualmente estoy haciendo malabares de tres posibilidades de por qué esto podría estar equivocado:

1. El mapa UV no está aplicando a mi mapa de desplazamiento.
2. He hecho incorrectamente el mapa de desplazamiento.
3. Me he perdido un paso crucial en el proceso que encerraría el desplazamiento a Z-SOLO.

Y, por supuesto, la opción secreta # 4, que no es de lo anterior y solo realmente no tiene idea de lo que estoy haciendo. O cualquier mezcla de lo mencionado anteriormente.

Ejemplo en vivo

Puede ver un ejemplo en vivo aquí .

Si alguien con más conocimiento sobre el tema podría guiarme, estaría muy agradecido!

Editar 1 : según su sugerencia, he comentado computeFaceNormals() y computeVertexNormals(). Si bien hizo una ligera mejora, la malla sigue siendo deformada.

Answer 1

En su material de terreno, establezca wireframe = true, y podrá ver lo que está sucediendo.

Su código y texturas están básicamente bien. El problema se produce cuando calcula las normales de vértice en la función de devolución de llamada del cargador.

Las normales de vértice computado para el anillo exterior de su punto de geometría un poco hacia afuera. Esto es muy probable porque en computeVertexNormals() se calculan promediando las normales de la cara de cada cara vecina, y las normales de la cara de los "lados" de su modelo (la parte negra) se promedian en el cálculo normal del vértice para aquellos vértices que componen. El anillo exterior de la "gorra".

Como resultado, el anillo exterior de la "CAP" se expande hacia afuera bajo el mapa de desplazamiento.

Editar: Efectivamente, directamente desde su modelo, las normales de vértice del anillo exterior apuntan hacia afuera. Las normales de vértice para los anillos internos son todos paralelos. Tal vez la licuadora está utilizando la misma lógica para generar normales de vértice como lo hace computeVertexNormals().

Answer 2

El problema es cómo se construye su objeto porque ocurre el desplazamiento a lo largo del vector normal.

El código está aquí.

HTTPS: // GitHub.com / mRdoOB / Three.js / Blob / Master / Ejemplos / JS / Shaderterrain.js # L348-350

"vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",

Esto lleva a un vector RGB de la textura de desplazamiento.

"float df = uDisplacementScale * dv.x + uDisplacementBias;",

Esto solo toma el valor rojo del vector Becuase UDISPLACEMENTSCALE es normalmente 1.0 y UDISPLACEMENTBIAS es 0.0.

"vec3 displacedPosition = normal * df + position;",

Esto desplaza la posción a lo largo del vector normal.

Para resolverlo, ya sea actualizar las normales o el sombreador.