Mipmap ein Planet in drei.js?
So habe ich kürzlich etwas über die Definition von Mipmapping gelernt, bin mir aber nicht sicher, wie ich diese Technik innerhalb von three.js richtig anwenden soll.
Ich habe mir dieses Beispiel angesehen:http: //threejs.org/examples/webgl_materials_texture_manualmipmap.htm
Ich habe auch folgendes gesehen:http: //threejs.org/examples/#webgl_materials_texture_anisotrop
Beide scheinen Mipmapping zu verwenden. Das erste Beispiel hat diesen Codeabschnitt:
function mipmap( size, color ) {
var imageCanvas = document.createElement( "canvas" ),
context = imageCanvas.getContext( "2d" );
imageCanvas.width = imageCanvas.height = size;
context.fillStyle = "#444";
context.fillRect( 0, 0, size, size );
context.fillStyle = color;
context.fillRect( 0, 0, size / 2, size / 2 );
context.fillRect( size / 2, size / 2, size / 2, size / 2 );
return imageCanvas;
}
var canvas = mipmap( 128, '#f00' );
var textureCanvas1 = new THREE.CanvasTexture( canvas );
textureCanvas1.mipmaps[ 0 ] = canvas;
textureCanvas1.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
textureCanvas1.mipmaps[ 2 ] = mipmap( 32, '#00f' );
textureCanvas1.mipmaps[ 3 ] = mipmap( 16, '#400' );
textureCanvas1.mipmaps[ 4 ] = mipmap( 8, '#040' );
textureCanvas1.mipmaps[ 5 ] = mipmap( 4, '#004' );
textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' );
textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' );
textureCanvas1.repeat.set( 1000, 1000 );
textureCanvas1.wrapS = THREE.RepeatWrapping;
textureCanvas1.wrapT = THREE.RepeatWrapping;
var textureCanvas2 = textureCanvas1.clone();
textureCanvas2.magFilter = THREE.NearestFilter;
textureCanvas2.minFilter = THREE.NearestMipMapNearestFilter;
materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var meshCanvas1 = new THREE.Mesh( geometry, materialCanvas1 );
meshCanvas1.rotation.x = -Math.PI / 2;
meshCanvas1.scale.set(1000, 1000, 1000);
var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
meshCanvas2.rotation.x = -Math.PI / 2;
meshCanvas2.scale.set( 1000, 1000, 1000 );
So unklar ist:
textureCanvas1.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
und die Verwendung eines 2d-Kontexts.
Auf jeden Fall weiß ich aufgrund der Art der Beispiele immer noch nicht, wie man einen Planeten mipmapt. Ja, ich bin mir nicht sicher, wie ich eine Kugel richtig abbilden soll. Zuerst müsste mein Planet / meine Kugel aus getrennten Abschnitten bestehen, damit ich die verschiedenen Teile der zerbrochenen Textur auf jeden dieser Abschnitte der Kugel legen kann. Dann erstelle ich Potenzen von 2 Größenvarianten, aber was dann?
Also meine Frage ist, wie sieht Mipmapping in three.js aus, wenn es für Würfel, Kugeln usw. verwendet wird? Eine vereinfachte Demo wäre sehr dankbar, da die vorhandenen (seltenen) Beispiele entweder zu aufgebläht oder undokumentiert erscheinen.
EDIT: Ein anderer Benutzer in stackoverflow hat Folgendes gepostet:
var texture = THREE.ImageUtils.loadTexture( 'images/512.png', undefined, function() {
texture.repeat.set( 1, 1 );
texture.mipmaps[ 0 ] = texture.image;
texture.generateMipmaps = true;
texture.needsUpdate = true;
};
Es scheint, der Schlüssel zu MipMaps ist texture.mipmaps []. Hier hat die Person allerdings nur ein Bild angegeben. Sollten wir nicht verschiedene Bilder bereitstellen und den Computer entscheiden lassen, welches angemessen ist, je nachdem, wie weit Sie sind? Ich bin mir nicht sicher, wie dieses Mipmapping funktioniert.