Three.js - Textures - Versionsgeschichte

134.3.241.3 am 28. Dezember 2021 um 18:13 Uhr

2021-12-28T18:13:58Z

134.3.241.3 am 28. Dezember 2021 um 18:10 Uhr

2021-12-28T18:10:08Z

134.3.241.3: Die Seite wurde neu angelegt: „ Mesh Objekt > Geometry > Material > Textur === Prinzip' === '''Manuell:''' * Bild Objekt erstellen * Texture Objekt erstellen und Bild Objekt zuordnen * Bil…“

2021-12-28T18:09:04Z

Die Seite wurde neu angelegt: „ Mesh Objekt > Geometry > Material > Textur === Prinzip' === '''Manuell:''' * Bild Objekt erstellen * Texture Objekt erstellen und Bild Objekt zuordnen * Bil…“

Neue Seite

Mesh Objekt > Geometry > Material > Textur
=== Prinzip' ===
'''Manuell:'''
* Bild Objekt erstellen
* Texture Objekt erstellen und Bild Objekt zuordnen
* Bildsource dem Bildobjekt zuordnen >
* wenn Bild geladen ist (z.B addEventListener oder onload wie unten)texture.needsUpdate setzen, damit ThreeJs die Texture updaten kann
* Texture dem Material zuordnen (Property map)

'''Mit TextureLoader (recommended):'''
* Wenn gewünscht LoadingManager erstellen
* TextureLoader erstellen und LoadingManager übergeben
* Bildquelle mit .load() in TextureLoader laden -> gibt texture Objekt zurück
* texture dem Material zuordnen

=== Beispiele ===

'''Beispiel 1 - manuell laden'''
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const image = new Image()
const texture = new THREE.Texture(image)
image.src = '/textures/door/color.jpg'
image.onload = () =>
{
texture.needsUpdate = true
}

//...

const material = new THREE.MeshBasicMaterial({ map: texture })
</syntaxhighlight>

=== TextureLoader ===
Der TextureLoader macht im Prinzip das Gleiche, erspart uns aber die onload Funktion :-). Ein TextureLoader kann für mehrere Texturen verwendet werden.

<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg')
//...
const material = new THREE.MeshBasicMaterial({ map: texture })
</syntaxhighlight>

'''TextureLoader Callbacks'''
Manchmal nützlich für Fehlersuche etc.
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load(
'/textures/door/color.jpg',
() =>
{
console.log('load')
},
() =>
{
console.log('progress')
},
() =>
{
console.log('error')
}
)
</syntaxhighlight>

=== Loading Manager ===
Nützlich wenn viele Assets geladen werden müssen. Also z.B. viele Texturen. Wird erstellt und dann als Parameter dem TextureLoader übergeben. Dann kann man über die Callbacks den Ladevorgang checken und darauf reagieren.

<syntaxhighlight lang="javascript">

const loadingManager = new THREE.LoadingManager()

loadingManager.onStart = () =>
{
console.log('onStart')
}
loadingManager.onLoad = () =>
{
console.log('onLoad')
}
loadingManager.onProgress = () =>
{
console.log('onProgress')
}
loadingManager.onError = () =>
{
console.log('onError')
}

const textureLoader = new THREE.TextureLoader(loadingManager)

const colorTexture = textureLoader.load('/textures/door/color.jpg')
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const heightTexture = textureLoader.load('/textures/door/height.jpg')
const normalTexture = textureLoader.load('/textures/door/normal.jpg')
const ambientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const metalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')
</syntaxhighlight>

← Nächstältere Version		Version vom 28. Dezember 2021, 18:13 Uhr
Zeile 103:		Zeile 103:
	const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')		const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	=== UV Wrapping ===
		+	====Wrapping Mode====
		+	THREE.RepeatWrapping
		+	THREE.ClampToEdgeWrapping // default
		+	THREE.MirroredRepeatWrapping
		+
		+	<syntaxhighlight lang="javascript">
		+	const colorTexture = textureLoader.load('/textures/door/color.jpg')
		+
		+	// TEXTURE TRANSFORMATIONS
		+	colorTexture.repeat.x = 2
		+	colorTexture.repeat.y = 3
		+
		+	colorTexture.wrapS = THREE.RepeatWrapping
		+	colorTexture.wrapT = THREE.RepeatWrapping
		+	//colorTexture.wrapS = THREE.MirroredRepeatWrapping
		+	//colorTexture.wrapT = THREE.MirroredRepeatWrapping
		+
		+	colorTexture.offset.x = 0.5
		+	colorTexture.offset.y = 0.5
		+
		+	colorTexture.center.x = 0.5
		+	colorTexture.center.y = 0.5
		+	colorTexture.rotation = Math.PI * 0.25
		+
		+	</syntaxhighlight>
		+
		+	==== Mipmapping ====
		+	Je nach Entfernung eines Objekts wird eine Textur kleiner oder größer angezeigt. Daher erstellt ThreeJS kleinere Versionen einer Textur und speichert diese zusammen mit dem Original in einer Mipmap. Dazu wird die original Texture immer wieder um die Hälfte verkleinert bis nur noch ein Pixel vorhanden ist. Im Prinzip ist die Map ein Bild aus allen Bildern. Diesen Prozess nennt man Mipmapping.
		+
		+	Für das Erstellen dieser Bildversionen kann man verschiedene '''Filter''' einsetzen. Diese resultieren z.B. in besserer Schärfe oder weniger Moiree Effekten, resultieren aber auch in unterschiedlicher Performance.
		+
		+	'''Minification'''
		+
		+	Wenn das Objekt klein dargestellt wird, hat der Screen für das Bild weniger Pixel zur verfügung als die Textur hergibt. In dem Fall spricht man von '''Minification'''.
		+	<syntaxhighlight lang="javascript">
		+	const colorTexture = textureLoader.load('/textures/checkerboard-1024x1024.png')
		+	colorTexture.generateMipmaps = false // NearestFilter doesn't need Mipmap
		+	colorTexture.minFilter = THREE.NearestFilter // oft bessere Schärfe aber auch mehr Moiré
		+	</syntaxhighlight>
		+
		+	'''Magnification'''
		+
		+	Im gegenteiligen Fall - das Objekt ist sehr nahe reichen die Bildpixel der Textur nicht mehr aus und sie muss skaliert werden. Auch hier kann man die selben Filter einsetzen. Der Standardfilter interpoliert die Pixel und erzeugt eine '''Unschärfe'''. Das passt in den meisten Fällen am besten. Bei Geometrischen Formen (z.b. wie in Minecraft-Kacheln) funktioniert der Nearest Filter gut, der einfach die Pixel wiederholt.
		+
		+	<syntaxhighlight lang="javascript">
		+	const colorTexture = textureLoader.load('/textures/minecraft.png')
		+	colorTexture.magFilter = THREE.NearestFilter
		+	</syntaxhighlight>
		+
		+	'''Hinweise für bessere Performance'''
		+	* Mipmapping halbiert das Bild bis nur noch ein Pixel übrig ist. Daher sollte die '''Pixelanzahl''' des Bildes eine '''zweier Potenz''' sein. Am besten nimmt man Formate wie ... 256x256 / 512x1024 / 1024x1024 ... Oft nimmt man quadratische Formate.
		+
		+	* Da der '''NearestFilter''' keine Interpolation macht sondern nur Pixel wegwirft bzw. verdoppelt, hat er auch eine etwas bessere Performance als andere Filter.
		+
		+	* Wenn der '''NearestFilter für die Minification''' genutzt wird kann man das '''Mipmapping ausschalten'''. der Filter ignoriert einfach die nicht benötigten Pixel der Originaltextur.
		+
		+	* '''Transparenz''' kann über ein '''transparentes png''' erreicht werden oder über über eine '''Alpha-Kanal''' Bildversion (weiß = opak, schwarz = transparent). '''Alpha ist GPU-Freundlicher''', ein einzelnes png kann vielleicht etwas Ladezeit sparen.
		+
		+	* '''Normal-Maps''' geben über die Farbe die Richtung der Normalen (=Oberfläche) vor. Das sollte exakt sein, deshalb hier lieber ein '''png Verwenden''' (verlustfrei).
		+	<syntaxhighlight lang="javascript">
		+	colorTexture.generateMipmaps = false // NearestFilter doesn't need that
		+	colorTexture.minFilter = THREE.NearestFilter
		+	colorTexture.magFilter = THREE.NearestFilter
		+	</syntaxhighlight>
		+
		+	* Es ist möglich '''mehrere Texturen in einem Bild''' zu vereinen. '''Z.b.''' kann man den '''Rotkanal für eine Heightmap''' und den '''Blaukanal als Alphakanal''' verwenden. Dies verkürzt die ladezeit.

← Nächstältere Version		Version vom 28. Dezember 2021, 18:10 Uhr
Zeile 1:		Zeile 1:
		+	[[ThreeJS - Snippets]]
	Mesh Objekt > Geometry > Material > Textur		Mesh Objekt > Geometry > Material > Textur
	=== Prinzip' ===		=== Prinzip' ===