Ένα απλό πρόγραμμα σε javascript για tutorial
Ένας low budget calculator σε javascript
Σύνδεση με το WebGL API για την δημιουργία ενός τριγώνου σ' έναν καμβά.
Απεικόνιση του τριγώνου στον καμβά και διαχείριση λαθών από την βιβλιοθήκη webgl-debug
Εδώ είναι η μετακίνηση και η περιστροφή του τριγώνου. Υπάρχει διαφορά αν βάλεις πρώτα τη μετακίνηση και μετά την περιστροφή από το να βάλεις πρώτα την περιστροφή και μετά τη μετακίνηση.
Εδώ έχουμε το culling και το triangle.split για να κάνουμε ένα τετράγωνο από το τρίγωνο. Έπρεπε να βάλουμε επιπλέον κορυφές στον πίνακα κορυφών του τριγώνου, αλλά με τη σωστή σειρά για να μπορούν να φαίνονται.
Μόλις κάναμε το τρίγωνο και μετά το κάναμε και σε σχήμα "T". Απλά δεν είναι 100% σωστό εδώ γιατί όταν το περιστρέψεις πρέπει να μην φαίνεται τίποτα, αλλά ο Μπαρδής απλά γέλασε και μου είπε, "Ε, αφού φαίνεται το σχήμα, εντάξει είσαι."
Αυτή εδώ την κάναμε μια φορά που χάσαμε θεωρία (πάλι) και απλά κάναμε ένα screensaver.
Εδώ ήταν λίγο πιο δύσκολο στην κατανόηση, αλλά βγαίνει. Πήγαμε σε 3D τετράεδρο και μας είπε ότι πρέπει να το κάνουμε να είναι 3 τετράεδρα σε διαγώνιο όπως θα δεις άμα το τρέξεις. Επίσης, μας είπε να τα κάνουμε να περιστρέφονται.
Είναι λίγο περίεργη η άσκηση, ΕΙΔΙΚΑ το 3.2. Αλλά πρέπει ουσιαστικά να βάλετε τις εντολές:
glMatrix.mat4.identity(finalMatrix);
gl.uniformMatrix4fv(modelUniformPointer, false, finalMatrix);
gl.drawElements(gl.TRIANGLES, metablhthIndexBuffer.itemCount, gl.UNSIGNED_SHORT, 0);
Πέρα από αυτό, κάνετε ακριβώς ό,τι σας λένε τα σχόλια. Απλά να προσέχετε να μην κάνετε ορθογραφικά λάθη γιατί το debugger δεν τα βρίσκει καλά. Το κορόιδευε και ο Μπαρδής.
Θα χρειαστείτε 3 συναρτήσεις:
-
lookAt() για να φτιάξετε την κάμερα να κοιτάζει στο σωστό σημείο και να περιστρέφεται.
-
perspective() για να φτιάξετε την προοπτική της κάμερας.
-
multiply() που την κάναμε και άλλες φορές για πολλαπλασιασμό των πινάκων που φτιάχνουμε με την lookAt() και την perspective(), απλά ο πρώτος πίνακας στον πολλαπλασιασμό είναι το perspectiveMatrix.
ΠΡΟΣΟΧΗ!!! Μην σας ξεφύγει το βήμα 6 (το έβαλε κάτω κάτω), πρέπει να φτιάξετε ένα text box στην ιστοσελίδα για την μετακίνηση της κάμερας προς τα πάνω.
Καταρχάς πρέπει να βάλετε τον Firefox (τον καλύτερο browser στον κόσμο) και να αλλάξετε κάποιες ρυθμίσεις που γράφει πιο κάτω. Μόλις το κάνετε αυτό, ίσως χρειαστεί να αλλάξετε τα ονόματα των εικόνων για τα texture ώστε να είναι ίδια με αυτά που γράφει στον κώδικα. Μετά από αυτό ίσως να τρέχει καλά. Είναι λίγα βήματα να κάνετε, αλλά πρέπει να διαβάσετε καλά τα σχόλια για να καταλάβετε τι γίνεται.Αν σας βγάλει error για mipmapping, πρέπει να βάλετε εικόνες που έχουν διαστάσεις δυνάμεις του 2.
Αυτό έχει την κίνηση του ποντικιού Έχει τα βήματα που μπορείτε να συμπληρώσετε εύκολα, αλλά για να κάνετε την κίνηση του ποντικιού να δουλεύει και για σταματημένη σκηνή πρέπει να δείτε αν το requestID που είναι στην stopAnimation() να είναι 0 Και να τρέξετε την drawScene() θα το δείτε μέσα στον κώδικα Επίσης αν σας φαίνεται αργή η κίνηση με την ροδέλα, είναι κανονικό αυτό, έχει πει ότι μπορούμε να πειραματιστούμε για να το φτιάξουμε αλλά βαρέθηκα να την κάνω