Σύστημα προσομοίωσης ρευστού και πιτσιλιάς σημείου σε JavaScript για γραφικά παιχνιδιών HTML5

Fluid simulation and splashing system in Javascript for HTML5 games graphics (Αγγλική)

  1. MSc thesis
  2. Αρβανιτάκης, Γεώργιος
  3. Μεταπτυχιακή Εξειδίκευση στα Πληροφοριακά Συστήματα (ΠΛΣ)
  4. 23 Σεπτεμβρίου 2017 [2017-09-23]
  5. Ελληνικά
  6. 68
  7. Φωκά, Αμαλία
  8. Υγρό | Liquid | Προσομοίωση | Simulation | Πιτσιλιά | Splash | Javascript | HTML5 | Smoothed | Particle | Hydrodynamics | Fluid
  9. 1
  10. 38
  11. Περιέχει : πίνακες, διαγράμματα, εικόνες
    • Η διαρκής παρουσία του Διαδικτύου στη ζωή του σύγχρονου ανθρώπου έχει κάνει τις εφαρμογές ιστού μια βιώσιμη, και πολλές φορές ενδεδειγμένη, λύση για τις εταιρείες ανάπτυξης λογισμικού, προσφέροντας συμβατότητα με όλες τις μοντέρνες συσκευές, φορητές και μη, διανομή από ένα και μόνο κεντρικό σημείο και συντήρηση και ανανέωση μόνο μιας βάσης κώδικα. H έλευση του HTML5 προσφέρει νέες τεχνικές δυνατότητες που υποστηρίζουν την ανάπτυξη πιο διαδραστικών ηλεκτρονικών παιχνιδιών για τον ιστό απ’ ότι τα παλαιότερα χρόνια. Η προσομοίωση ρευστών χρησιμοποιείται πολύ συχνά στα ηλεκτρονικά παιχνίδια για να ενισχύσει το ρεαλισμό των εικονικών κόσμων τους. Μπορεί να αξιοποιηθεί για τη δημιουργία μιας μεγάλης ποικιλίας οπτικών εφέ, από τον ανερχόμενο καπνό, τα σύννεφα και την ομίχλη μέχρι τη ροή ποταμών και ωκεανών. Η υλοποίηση ενός μηχανισμού για την προσομοίωση ρευστών είναι πάντα μια πρόκληση γιατί απαιτεί περίπλοκους υπολογισμούς σε πραγματικό χρόνο. Συνήθως γίνεται χρήση πολλών υπολογιστικών πόρων και εξειδικευμένων μονάδων επεξεργασίας γραφικών, σε έναν φυλλομετρητή όμως οι πόροι είναι περιορισμένοι και η υποστήριξη επιτάχυνσης υλικού δεν είναι πάντα παρούσα. Σκοπός της εργασίας αυτής είναι η υλοποίηση σε JavaScript της προσομοίωσης υγρού το οποίο μπορεί να βάλλεται από διάφορα σημεία του χώρου και να καταλήγει σε πιτσιλιές πάνω σε κάποιες επιφάνειες, με σκοπό να μπορεί να χρησιμοποιηθεί για ανάπτυξη παιχνιδιών HTML5. Στην παρούσα εργασία γίνεται μια επισκόπηση της κατάστασης της βιομηχανίας παιχνιδιών σήμερα και των εργαλείων που υπάρχουν για την ανάπτυξη παιχνιδιών σε HTML5/JS. Στη συνέχεια γίνεται μια αναφορά στη ρευστοδυναμική και παρουσιάζονται τεχνικές που χρησιμοποιούνται για την προσομοίωση ρευστών, οι οποίες χωρίζονται σε δύο μεγάλες κατηγορίες, αυτές που χρησιμοποιούν σωματίδια και αυτές που χρησιμοποιούν πλέγμα για να αναπαραστήσουν το ρευστό. Για το σκοπό της εργασίας αυτής επιλέχθηκε η υλοποίηση να γίνει με τεχνική σωματιδίων και συγκεκριμένα με την Εξομαλυμένη Υδροδυναμική Σωματιδίων με Χαλάρωση Διπλής Πυκνότητας (Smoothed Particle Hydrodynamics with Double Density Relaxation). Η εξομοίωση χρησιμοποιεί τη βιβλιοθήκη JavaScript Babylon.JS για την προβολή 3D γραφικών σε WebGL. Οι παράμετροι του ρευστού, όπως η πυκνότητα και το ιξώδες, και η θέση και η ταχύτητα των σωματιδίων μπορεί να φορτώνεται από αρχείο XML. Οι εξομοίωση είναι αρκετά ομαλή, διατηρώντας το ρυθμό ανανέωσης της σκηνής πάνω από τα 25 καρέ ανά δευτερόλεπτο για εξομοιώσεις που χρησιμοποιούν έως 800 σωματίδια. Τόσο οι mobile όσο και οι desktop φυλλομετρητές παρουσίασαν συγκρίσιμα αποτελέσματα, που σημαίνει ότι το επίπεδο της απόδοσης είναι σχετικά ανεξάρτητο της πλατφόρμας που τρέχει την προσομοίωση. Φαίνεται λοιπόν ότι με τα σημερινά δεδομένα η προσομοίωση ρευστών με JavaScript είναι εφικτή και τα παιχνίδια HTML5 μπορούν να επωφεληθούν από αυτήν εμπλουτίζοντας την εμπειρία που προσφέρουν στο χρήστη.
    • The omnipresence of the Internet has made web applications a viable and attractive solution for software developers, offering cross platform compatibility, single point, centralized distribution and single code base maintenance. The advent of HTML5 offers new technical capabilities that support the development of more interactive web games than before. Fluid simulation is very often used in video games to enhance the realism of their virtual worlds. It can be utilized to create a wide variety of visual effects, from rising smoke, clouds and fog to the flow of rivers and oceans. Implementing a mechanism for fluid simulation is always a challenge because it requires complex real-time calculations. Usually this happens through heavy processing and the aid of specialized graphics processing units, in a browser though, resources are limited and hardware acceleration support is not always present. The purpose of this work is to implement a JavaScript program for simulating a liquid that can be thrown from various locations and form splashes on several surfaces, in order to be used for HTML5 game development. We present an overview of the state of the game industry today and the tools available for HTML5/JS game development. Then there is a reference to fluid dynamics in general and the techniques used to simulate fluids, which are divided into two major categories, those using particles and those using a grid to represent the fluid. For the purpose of this study, the implementation was based on a particle method, namely Smoothed Particle Hydrodynamics with Double Density Relaxation. The simulation uses the Babylon.JS JavaScript library to display 3D graphics using WebGL. Fluid parameters, such as density and viscosity, and also particle position and velocity can be inserted from an XML file. The simulation is fairly smooth, keeping the scene refresh rate above 25 frames per second for simulations up to 800 particles. Both mobile and desktop browsers showed comparable results, meaning that the level of performance is relatively independent of the platform that runs the simulation. It seems that nowadays, fluid simulation using JavaScript is feasible and HTML5 games can take advantage of it, thus enriching the user experience.
  13. Items in Apothesis are protected by copyright, with all rights reserved, unless otherwise indicated.