Web GL : cours 8

Les textures

PF Villard

Principe des textures

var crateTxr = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
var material = new THREE.MeshBasicMaterial( { map: crateTxr } );

Démo textures UV

Textures UV dans Three.js

var geo = new THREE.Geometry();

// generation de vertices
geo.vertices.push( new THREE.Vector3( 0.0, 0.0, 0.0 ) );
geo.vertices.push( new THREE.Vector3( 4.0, 0.0, 0.0 ) );
geo.vertices.push( new THREE.Vector3( 4.0, 4.0, 0.0 ) );

var uvs = [];
uvs.push( new THREE.Vector2( 0.0, 0.0 ) );
uvs.push( new THREE.Vector2( 1.0, 0.0 ) );
uvs.push( new THREE.Vector2( 1.0, 1.0 ) );

// generation de faces
geo.faces.push( new THREE.Face3( 0, 1, 2 ) );
geo.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[1], uvs[2] ] );
geo.faces.push( new THREE.Face3( 8, 2, 6 ) );
geo.faceVertexUvs[ 0 ].push( [ uvs[8], uvs[2], uvs[6] ] );

Texture mapping

Texture mapping

Modes d'application d'une textures

• Répéter
• Répéter en miroir
• Etiré aux arrêtes

Modes d'application d'une textures

• Répéter
• Répéter en miroir
• Etiré aux arrêtes

Dans Three.js :

var texture = new THREE.Texture();
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;

Transformation de texture

     
var texture = new THREE.Texture();
texture.repeat.set( 1, 1 );
texture.offset.set( 0, 0 );
 

Echantillonnage et filtre

var texture = new THREE.Texture();
texture.magFilter = THREE.NearestFilter;
texture.magFilter = THREE.LinearFilter; // la norme

texture.minFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter; // la norme

texture.anisotropy = 1;
texture.anisotropy = renderer.getMaxAnisotropy();

Démo sur l'anisotropie

Particules et billboard

Systèmes de particules dans Three.js

var disk = THREE.ImageUtils.loadTexture( "textures/disc.png" );
var material = new THREE.ParticleBasicMaterial(
    { size: 35, sizeAttenuation: false, map: disk, 
      transparent: true } );
material.color.setHSL( 0.9, 0.2, 0.6 );

var particles = new THREE.ParticleSystem( geometry, material );
particles.sortParticles = true;
scene.add( particles );

Systèmes de particules dans Three.js

var geometry = new THREE.Geometry();
for ( var i = 0; i < 8000; i ++ ) {
    var vertex = new THREE.Vector3();
    do {
        vertex.x = 2000 * Math.random() - 1000;
        vertex.y = 2000 * Math.random() - 1000;
        vertex.z = 2000 * Math.random() - 1000;
    } while ( vertex.length() > 1000 );
    geometry.vertices.push( vertex );
}

Skybox

Skybox

→Texture de type cube map

Reflexion map

Reflexion map

Refraxion map

Suite : Shaders

Les shaders