Ψηφιακή τέχνη DIGITAL ART

Transcript

1 Μάθηµα Πολυµέσων, Υπερµέσων και Βίντεο-τέχνης - ΑΣΚΤ - Διδάσκουσα: Νεφέλη Δηµητριάδη, Δρ. Ψηφιακή τέχνη DIGITAL ART Ψηφιακή εικόνα DIGITAL IMAGE Ψηφιακή κινούμενη εικόνα DIGITAL ANIMATION Ψηφιακή τρισδιάστατη εικόνα DIGITAL 3D IMAGE Ψηφιακά παιχνίδια DIGITAL 3D GAMES REAL-TIME 3D IMAGE Εικονική Πραγματικότητα VIRTUAL REALITY Τέχνη στο διαδίκτυο - Εικονικοί πολυχρηστικοί κόσμοι στο διαδίκτυο INTERNET ART VIRTUAL MULTIUSER NET-BASED WORLDS Εργαλεία Ψηφιακή επεξεργασία εικόνας: Adobe Photoshop Ψηφιακά παιχνίδια με 3D & 2D γραφικά: UNITY 3D

2 Δημιουργία ανάγλυφου χώρου (terrain) στο Unity. Tools: 1. raise & lower, 2. paint height, 3. smooth Height. Paint Height Με αυτό το εργαλείο ορίζουµε το target height, ώστε όποιο µέρος του terrain θέλουµε να µην ξεπεράσει αυτό το υψος. Ø Shift & click στο ύψος του terrain που θέλουµε. Ø Inspector > Height slider Ή αλλιώς Terrain->FlaVen... (στο ύψος που επιθυμούμε)

3 Επιζωγράφιση της «γής» (terrain) με τις κατάλληλες ΥΦΕΣ (textures) Επεξεργασία υφών (Photoshop) για επιζωγράφιση της «γής» (terrain) Texture import seongs Inspector (Unity) Ø Πολύ καλή οργάνωση για άμεση χρήση και δημιουργία φακέλου με επαναχρησιμοποιήσιμες υφές για διάφορα έργα Ø ΠΡΟΣΟΧΗ - Επιλογή μεγέθους από το στάδιο της φωτογράφισης + ανάλυσης εικόνας (ο αριθμός πίξελ εικόνας σε τί διαστάσεις αντιστοιχεί στον χώρο 1x1 ίδια μεγέθη φωτογραφιών για κάθε υφή πχ. σταθερό σημείο αναφοράς σε όλες τις φωτογραφίες) Ø 1 υφή για το σύνολο του εδάφους (βασικό συστατικό) Ø Επιπλέον υφές πχ. χόρτα (μικρότερο πινέλο στην 2 η κ.ο.κ.) Ø Ενότητα στην αισθητική των υφών (ρεαλισμός εικαστικότητα κτλ.) Ø Αποφυγή του wling effect περίμετρος εικόνας στο Photoshop ίδια δηλ. Copypaste + rotate (ver{al/ horizontal) πιξελ περιμέτρου ακριβώς τα ίδια. Δημιουργία pavern που να είναι ανεπαίσθητο και όμορφο (πχ. σφαιρικά μοτίβα, φιλικά στο μάτι + προσθήκη άλλων υφών με μικρότερα πινέλα)

4 Επιζωγράφιση της «γής» (terrain) με τις κατάλληλες ΥΦΕΣ (textures)

5 Ζωγραφίζοντας το έδαφος Opacity Διαφάνεια χρώματος στο πινέλο για συγκεκριμένο χρονικό διάστημα όταν «βάφεις» Target Strength maximum opacity που μπορείς να επιτύχεις αν «βάφεις» συνεχόμενα

6 Επανάληψη: Terrain - Import Heightmaps Lights Cookies Physics Terrain από Heightmap στο Unity 3d Ø Εικόνα πχ. gran canyon heightmap Ø RAW file > Photoshop SOS - merge layers Image mode greyscale Ø UNITY terrain se ngs (terrain tools) Ø Heightmap resolu{on ίδια με εικόνας + 1 Ø Import RAW file Ø Width height της εικόνας Μαύρο βάθος - γκρεμοί Άσπρο ύψος κορυφές Γκρί - πλαγιές

7 Φωτισµοί Μπορούμε να δημιουργήσουμε μια υφή (texture) που επριέχει ένα alpha channel και να το τοποθετήσουμε στην μεταβλητή Cookie του φωτός. Το Cookie θα προβάλεται μέσα από το φώς.. Μπορούμε να βάλουμε cookies στα Point lights

8 Spot Light Cookie Standard Assets->Light Cookies. Φωτισµοί Δημιοργία δικού μας: 1. Δημιουργία cookie texture στο Photoshop. (greyscale μαύρο για σκοτάδι, άσπρο για φώς, προσοχή οι άκρες να είναι μαύρες (για να μην «ξεφεύγει» από εκεί το φώς) 2. Texture Inspector > αντί για Repeat Wrap mode -> Clamp 3. Επιλέγουμε την Texture Import Seongs in the Inspector. Enable Border Mipmaps Enable Build Alpha From Grayscale Set the Texture Format to Alpha 8 Bit

9 Skybox Camera: Component > Rendering > Skybox

10 Skybox Δημιουργία SKYBOX Πριν ξεκινήσουμε το πρώτο βήμα είναι η δημιουργία 6 αρχείων εικόνας (μπροστά, πίσω, πάνω, κάτω, αριστερά, δεξιά ουσιαστικά μια εικόνα για την κάθε πλευρά στο εσωτερικό ενός κύβου). Πρώτα εισάγουμε τις εικόνες - επιλέγουμε wrap mode > clamp

11 Skybox Assets->Create->Material shader Inspector> Skybox/6 Sided Create Material Shader - Render FX Skybox / Skybox Cubed

12 Skybox Δημιουργία CUBEMAP από Texture

13 La{tude Longitude

14 Skybox Sphere Map (spherical) Fog color > Ligh{ng window. Επίσης χρησιμοποιούνται για τις αντανακλάσεις του περιβάλλοντος / Reflec{ons

15 Skybox Δημιουργία SKYBOX Πριν ξεκινήσουμε το πρώτο βήμα είναι η δημιουργία 6 αρχείων εικόνας (μπροστά, πίσω, πάνω, κάτω, αριστερά, δεξιά ουσιαστικά μια εικόνα για την κάθε πλευρά στο εσωτερικό ενός κύβου). Πρώτα εισάγουμε τις εικόνες - επιλέγουμε wrap mode > clamp

16 Skybox Δημιουργία CUBEMAP από Texture

17 Πάνω (εκεί που στρέφεται η κάμερα προς τον ουρανό πάνω από το έδαφος) Μπροστά (ο ορίζοντας μπροστά μας, εκεί που βλέπει η κάμερα μπροστά) Κάτω (Εκεί που πατάει το έδαφος μας) Πίσω (ο ορίζοντας από πίσω από την κάμερα, θα τον δεί με 180 μοίρες περιστροφή) Αριστερά Δεξιά

18 Οι εικόνες αυτές θα αποτελέσουν τον ορίζοντα μας, ο οποίος μπορεί να τοποθετηθεί πάνω στην κάμερα οπότε και θα φαίνεται όπου πηγαίνει η κάμερά μας. Μπορεί επίσης να τοποθετηθεί πάνω στην σκηνή, οπότε και αν αλλάξουμε σκηνή (πχ. Επίπεδο παιχνιδιού) μπορούμε να έχουμε διαφορετικό ορίζοντα. Πρώτα εισάγουμε τις εικόνες (επιλέγουμε wrap mode και clamp)

19 Ύστερα δημιουργούμε το υλικό μας στο οποίο θα τοποθετήσουμε τις εικόνες για να φτάξουμε το skybox. Επιλέγουμε assets > create > material κάνουμε click στο RenderFX->Skybox.. Είναι καλό να δώσουμε ένα όνομα στο δικό μας Skybox Material και μετά να φτιάξουμε το αντίστοιχο folder όπου θα τοποθετήσουμε τις εικόνες μας μέσα στο folder Textures, πχ. MySkybox MySxubox_back, down, front κτλ.

20 Δείτε επίσης το παράδειγμα: hvp://docs.unity3d.com/ Documentawon/Manual/ HOWTO-UseSkybox.html *** Αν έχετε τοποθετήσει το Skybox πάνω στην κάμερα, επιλέξετε την Clear mode της κάμερας σε Skybox. Skyboxes vs skyspheres = παρόμοιο οπτικό αποτέλεσμα ( φόντο στον ορίζοντα). Αλλά προτιμάμε να χρησιμοποιούμε το Skyboxe γιατί: Χρειάζεται λιγότερα polygons. Αν φωτοσκιάσει και τοποθετήσει κανείς σωστά τις έξι όψεις στο εσωτερικό του κύβου, δίνεται η ίδια εντύπωση ομοιόμορφου σφαιρικού περιβάλλοντος. Είναι ευκολότερο να γίνει το render τετράγωνων εικόνων skybox.

21 Material Shaders Textures Material : Shaders + Textures + παράμετροι (χρωματικό {nt κτλ.) Shaders: μικρά σκρίπ τα οποία περιέχουν τους μαθηματικούς υπολογισμούς και τους αλγορίθμους που ορίζουν πως θα υπολογίζεται εξάγεται (rendered) το κάθε πίξελ με βάση το input από τα φώτα και την διάταξη του υλικού. Textures: τοποθετείται μέσα στο υλικό - βασικό χρώμα υλικού (albedo)/ άλλες υφές πχ. για άλλες όψεις της επιφάνειας του υλικού όπως η ανακλαστικότητα ή το πόσο τραχύ είναι κτλ. Built-in Shaders Standard Shader FX: Ligh{ng - εφέ γυαλιού GUI - UI: user interface graphics. Mobile: Απλοποιημένος shader για κινητές συσκευές. Nature: Για δέντρα και έδαφος (terrain). Par{cles: εφέ συστημάτων σωματιδίων (Par{cle system). Skybox. Toon: για στυλ Cartoon. Unlit: για να μην λαμβάνει υπόψη του φωτισμό και φωτοσκιάσεις. Legacy: μεγάλη συλλογή παλαίοτερων shaders (ενυπάρχουν στον Standard Shader)

22 Physically Based Shading (PBS) Unity Standard Shader Diffus, Specular, Bumped Specular, Reflec{ve Energy conservawon διασφαλίζει ότι τσ αντικείμενα δεν αντανακλούν περισσότερο φώς απ ότι δέχονται High Dynamic Range (HDR) αναφέρεται σε χρώματα έξω από την συνηθισμένη 0-1 διαβάθμιση πχ. ήλιος Rendering mode. Albedo Color. (alpha value = transparency) Specular φωτεινές γυαλιστερές αντανακλάσεις Metallic Smoothness Normal map ειδική υφή που επιτρέπει να προσθέσουμε λεπτομέρειες ως γεωμετρία πχ. βίδες

23

24

25 Heightmap

26 Emission ένταση φωτός που εκπέμπεται (ακόμα και σε σκοτεινά σημεία της σκηνής) Secondary maps & detail mask δεύτερη υφή πάνω από την βασική (για λεπτομέρειες) Fresner effect - + smooth / - rough

27 Occlusion map grayscale > έμμεσο φως λευκό / μαύρο