textura estirada inesperada

Question

Tengo los siguientes fragmentos de código:

    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);      
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);

    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.REPEAT);
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.REPEAT);

Mi dimensión textura es 256x256 .

1 - mi polígono

    const x0 = 100;
const x1 = -x0;
const z0 = x0;
const z1 = -z0;
var vertices = new Float32Array(
    [  x0, 0, z1,  x1, 0, z1,  x1, 0, z0,   x0, 0, z0]);

El resultado:. La textura se estira de manera que pierda el detalle

2 - mi polígono (nótese que esto es un polígono mucho más pequeña que la opción 1)

const x0 = 5;
const x1 = -x0;
const z0 = x0;
const z1 = -z0;
var vertices = new Float32Array(
    [  x0, 0, z1,  x1, 0, z1,  x1, 0, z0,   x0, 0, z0]);

El resultado:. Puedo ver los detalles de la textura de mi

Mi entendimiento es que la repetición (TEXTURE_WRAP_S y TEXTURE_WRAP_T) opción me dará los detalles incluso en la Opción 1. ¿Por qué se estira la textura en la opción 1? ¿Verdad que entienden mal?

Esto está ejecutando WebGL en Chrome Canary construcción.

¿Qué hice mal?

Gracias de antemano por su ayuda.

Answer 1

he cambiado mi coordinar textura a la siguiente:

Código: texCoords var = nuevo Float32Array ( // [1, 1, 0, 1, 0, 0, 1, 0]
[100, 100, -100, 100, -100, -100, 100, -100]
);

Se ajusta a coordinar el gran polígono. Muestra los detalles de la pequeña textura original en el gran polígono.

Khronos WebGL Foro para una discusión más detallada