texture inattendue tendue

Question

I ont les extraits de code suivants:

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); 

Ma dimension texture est 256x256.

Option 1 - mon polygone

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]); 

Le résultat: La texture est tendue si je perds le détail.

Option 2 - mon polygone (notez que ceci est beaucoup plus petit polygone que l'option 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]); 

Le résultat: Je peux voir les détails de ma texture. Je crois comprendre que l'option REPEAT (TEXTURE_WRAP_S et TEXTURE_WRAP_T) me donnera les détails même dans l'option 1. Pourquoi la texture est-elle étirée dans l'option 1? Ai-je mal compris?

Ceci exécute WebGL sur la version de Chrome Canary.

Qu'est-ce que j'ai fait de mal?

Merci d'avance pour votre aide.

Answer 1

J'ai changé de coordonnées de texture à ce qui suit:

Code: var texCoords = new Float32Array ( // [1, 1, 0, 1, 0, 0, 1, 0]
[100 , 100, -100, 100, -100, -100, 100, -100]
);

Il correspond à la grande coordonnée polygone. Il montre les détails de la petite texture originale sur le grand polygone.

S'il vous plaît voir Khronos WebGL Forum pour plus de détails