Blender uv-mapping

Blender Texturing Tipps

Beim uv-mapping versucht man Texturen möglichst optimal auf einen Körper zu kleben. Dazu kann man Seams von Hand oder automatisch oder beides festlegen. An dieser Stelle "schneidet" Blender dann die Form auf.

Wichtige Shortcuts:

U - Unwrap Menü
Select Shortcuts
Shift - Select Klick
Command - Select Klick (Reihe markieren)
Ctrl + L - Linked (Faces etc. markieren)
...

Quickstart

• Einen uv Bereich öffnen
• Objekt(e) das/die gewrapt werden sollen markieren.
• In Edit Mode wechseln
• Unwrap Menü öffnet sich mit u. von da kann man Seams machen oder unwrappen.
• Im kleinen Unwrap Menü bei mehreren Objekten einen kleinen Margin (z.B. 0.45) setzen, damit Platz für Schatten bleibt wenn diese gebaket werden.
• Im ersten Schritt Gruppen bilden in ein Quadrat packen (egal wo nur nicht überlappen mit anderen Gruppen) auf etwa ein Viertel skalieren.
• Am Ende über das Overlay Menü (im uv Fenster) Show Display Stretch anzeigen und auf passende Größe skalieren und final platzieren.

Tipps:

• Zusammengehörige Gruppen auch zusammen auf der uv-Map platzieren (wenn man eine gemeinsame nutzen möchte). So kann man leichter neu organisieren, wenn sich an der Szene was ändert.
• Arbeit kann smart uv mapping sparen wenn es nicht ganz optimiert sein muss.
• In mehreren Schritten vorgehen
• Mehrere Gruppen bilden.
• Am Ende über Display Stretch optimieren.
• Mit ctrl + L (Linked) ganze Objekte wählen (im uv Editor)

Addons

5_Textools

https://github.com/SavMartin/TexTools... it is A collection of tools that helps any texture artist with UV and texture related tasks. The main philosophy is to shorten typical steps into simple context-sensitive single clicks.

4_Texel Density Checker

This Blender addon can be used to solve a simple but serious problem when creating UVs. in 3d software in general when creating UVs you need to keep the aspect ratio between UV islands accurate otherwise the textures will not look perfect nor with the same details.

3_Zen Uv

https://blendermarket.com/products/ze... Zen UV is another addon that combines a set of tools that can be used for creating fast UV’s in Blender. its tools are intuitive and can help you do some complex UV unwrapping tasks with ease.

2_UVpackmaster

https://gumroad.com/l/uvpackmaster2 when you use this addon you will realize that it is one of the most efficient UV packing solutions for Blender because it is very fast and uses both the CPU and Cuda GPUs as well at the same time. so if you have a strong CPU and a strong GPU you will be able to pack the UVs super fast with maximum efficiency.

1_Uv Toolkit

https://blendermarket.com/products/uv... UV Toolkit is an addon that has a set of tools for fast and high-quality UVs creation within Blender. it comes with a lot of features that make the process of creating UVs faster easier.

Baking

Man kann das Lichtrendering statisch in eine Textur umwandeln. Das nennt man Baking. Natürlich ändert sich dann das Licht nicht mehr bei Bewegungen aber das kann enorm Resoucen sparen und man kann aufwändige Lichtsettings und Raytracing nutzen. Gerade bei Three.js kann das cool sein. Je nachdem wo der Fokus der Szene liegt.

Bake workflow für Three.js

Texturgröße für Three.js

Normalerweise reichen 2048 für eine Three.js Szene gut aus. Wenn man nur eine Textur hat, kann man auch mal 4096 nehmen. Das packen auch ältere Rechner locker (Stand 2021)

Externe high quality Textur erzeugen

• Object Mode
• Im uv Fenster neues Bild erzeugen
• color white (background) - falls es einen Glimps gibt sieht das eher aus wie eine Reflection
• kein alpha
• blank
• 32bit float nutzen (wichtig)

Als nächstes speichern wir die Textur als HDR 32bit Bild. Das nutzen wir später nicht so, aber hierdurch erzielen wir bessere Ergebnisse. Hinweis, Blender speichert Texturen auch innerhalb des blend Files aber auf diese Weise habe wir separaten Zugriff.

• Image > Save As (Ordner wo blendfile liegt oder Unterordner) > Radiance HDR

Jetzt hat Blender das Bild als externe Resource gespeichert. Durch die hohe Qualität des HDR können wir später in der Bildverarbeitung eine schönes JPEG erzeugen, dass in Three.js genauso gut ausschaut wie in Blender.

Hinweis: Mit Alt+S kannst du die Textur immer wieder mal schnell speichern (Maus über uv Bereich)

Materialien In Textur baken

Wir baken alle notwendigen Materialien in die angelegte hdr Textur. Im UV-Mapping haben wir vorher alle Objekte so angelegt, dass sie schön auf einer quadratischen Fläche Platz haben. Jetzt müssen wir den Materialien sagen in welche Textur sie gebacken werden.

Blender macht das ganz einfach. Möglichkeit eins: Er baked das ausgewählte Objekt in die ausgewählte Texturnode. Möglichkeit zwei (besser):

• Eine Image-Texture im Shader Editor anlegen und zwar in dem/den Material(ien) die gebacken werden sollen.
• Ein Bild über das Icon zuweisen.

Das heißt wir brauchen den Shader Editor (am besten neuen Bereich Öffnen und evtl. sogar ein neues Material???).

Tipp im Shader Editor kann man das seitliche Menü mit N toggeln.

• Use Nodes muss angehakt sein
• Objekt (z.b. Floor) ist aktiviert
• Add Texture (Shift A) > Image Texture
• Im Bild Icon die vorher erzeugte Textur in die gebacken wird auswählen.
• Jedes Material das in den Objekten vorkommt benötigt so einen Node (Node kann in die Materialien auch mit copy und paste gesetzt werden.

Zum Baken muss dann nur noch das Objekt angewählt werden, das gebacken wird.

Bake

• Wichtig Es wird das gewählte Objekt in den gewählten Node gebacken -> den neuen Node auswählen (Rahmen muss drumrum sein) Der Node muss ausgewählt sein, damit beim Baken diesem das Ergebnis zugewiesen wird.
• Es muss noch keine Verbindung zum Material gemacht werden.
• Render Tab > Baking (Cycles muss als Render Engine ausgewählt sein)
• Option Clear Image nicht aktivieren. So können wir Objekt für Objekt nacheinander draufrendern. Andernfalls wird das Bild bei jedem Bake Vorgang gelöscht.
• Margin 16px erstmal lassen. Das kann man dann im Ergebnis prüfen ob der Abstand reicht und im Zweifel reduzieren.
• Bei einem großen Bild (4096px) reicht eine kleinere Sampling Max z.B. 256. 2048 ist oft auch ausreichen.
• BAKE
• Fehler mit Überlappungen kann man einfach "drüber" rendern. Sieht dann komisch aus wegen den Artefakten des vorigen Versuchs - geht aber trotzdem.
• Hinweis, geht man in den Edit Mode kann man die Margins als Preview sehen und checken ob alles passt.

Für alle Objekte wiederholen. Der Node kann auch mit Copy Paste dupliziert werden.

Bildoptimierung mit Compositor

Baked Textures haben per Default kein Filmic Workspace und kein Denoising. Aber Du kannst das über den Compositor nachholen. Wenn man eine HDR Textur für Three.js exportieren möchte muss man auch noch einen sRGB Export machen.

Color Correction Die Farben der Textur sind nicht so schön wie die des Blender Renderings. Es fehlt noch das Color Managment, das Blender für seine Renders verwendet (i.d.R. Filmic).

Denoising Auch das Entrauschen fehlt noch.

Bildformat für Three.js (sRGB)

Alle Probleme lassen sich innerhalb von Blender mit dem Compositor lösen.

• Compositor Bereich machen (Shader wird nicht mehr benötigt)
• Use Nodes anklicken

Jetzt siehts du das Standard Compositor Setting. Im Prinzip wird hier der Compositer beim Rendering angesprochen und erzeugt das gerenderte Bild als Output.

Wir nutzen nun unsere HDR Texture als Input und hängen Bildoptimierung als Nodes in die Pipeline um ein fertiges Bild zu bekommen.

• Nodes erzeugen:

Shift + a > Input > Image (Input Node erzeugen, darin die baked texture auswählen)
Shift + a > Denoise (Denoise Knoten erzeugen)

• Filmic muss nicht als Node hinzugefügt werden. Wenn in den Render-Settings Filmic ausgewählt ist wendet er dies automatisch an.
• Render Layers Knoten muten (Anwählen und m klicken)
• Neue Pipeline: Input -> Denoise -> Compositer
• In den Output Settings die gleiche Auflösung einstellen die die Textur hat (z.B. 2048 x 2048).
• F12 erzeugt nun statt dem Rendering in Blender ein neues Bild.
• Bild Speichern: ALT + S, File Format JPEG, lower the quality a little (75% should be enough) and name it baked.jpg:
• Am Ende kannst du die beiden neuen Nodes muten damit sie nicht jedesmal berechnet werden und den Render Layers Knoten wieder an den Output hängen.

Mehr optimieren - Model mergen

Wenn wir alle Objekte die mit der Textur belegt werden zu einem mergen haben wir eine weit bessere Performance:

• Neue Collection "merged" anlegen
• Alle Objekte der Textur markieren
• Duplizieren (shift + d) und rechtsklick (damit man nicht ausversehen verschiebt)
• M klicken und der neuen Collection zuweisen
• cmd j klicken zum joinen
• Materialien entfernen die benötigen wir nicht, außerdem erstellt blender für jedes Material beim Export ein eigenes Objekt.

Export

Alle benötigten Geometrien (die gejointen + sonstige z.B. Emitter.

• Geometrien aktivieren und auswählen
• File > Export
• glTF .glb
• Only Selected Objects
• transform y-up (bei Three.js ist die y-Achse nach oben gerichtet)
• Keine Modifier
• uvs aktivieren
• Normals benötigen wir hier nicht. Du benötigst sie wenn du Reflections in Three.js verwenden möchtest. Wir nutzen aber nur die externe Textur.
• Materials weglassen wir bauen diese in Three.js und setzen unsere separate Textur drauf.
• Compression wenn gewünscht (vorsicht manche Blender Versionen sind hier Buggy)

Als nächstes geht's in Three.js weiter:

Three.js - baked map texture