Κατάλογος Ασκήσεων Javascript & WebGL

Antonios Kokkinos
Student ID: 20390107

GitHub

jsExample1.html

Ένα απλό πρόγραμμα σε Javascript για tutorial.

---

jsExample2.html

Ένας low budget calculator σε Javascript.

---

webGLExercise1.html

Σύνδεση με το WebGL API για δημιουργία ενός τριγώνου σε καμβά.

---

webGLExercise2.html

Απεικόνιση του τριγώνου στον καμβά και διαχείριση λαθών με τη βιβλιοθήκη webgl-debug.

---

webGLExercise3.html

Μετακίνηση και περιστροφή του τριγώνου.
Υπάρχει διαφορά αν εφαρμόσετε πρώτα μετακίνηση και μετά περιστροφή ή αντίστροφα.

---

webGLExercise4.html

Culling και χρήση triangle.split για δημιουργία τετραγώνου από τρίγωνο.
Προσοχή στη σωστή σειρά κορυφών για σωστή απεικόνιση.
Δημιουργία σχήματος "T" από τρίγωνο.

---

webGLExercise5.html

Μια άσκηση που έγινε σε χαμένη θεωρία, με αποτέλεσμα ένα απλό screensaver.

---

webGLExercise6.html

3D τετράεδρο — κατασκευή 3 τετραέδρων σε διαγώνιο και περιστροφή τους.

---

webGLExercise7.html

Άσκηση 3.2:
Χρήση εντολών:

glMatrix.mat4.identity(finalMatrix);
gl.uniformMatrix4fv(modelUniformPointer, false, finalMatrix);
gl.drawElements(gl.TRIANGLES, metablhthIndexBuffer.itemCount, gl.UNSIGNED_SHORT, 0);

Προσοχή στα ορθογραφικά λάθη στα σχόλια.

---

webGLExercise8.html

Απαιτούνται 3 συναρτήσεις:

• lookAt() για τη σωστή θέση και περιστροφή κάμερας.
• perspective() για την προοπτική της κάμερας.
• multiply() για πολλαπλασιασμό πινάκων (πρώτος πίνακας είναι perspectiveMatrix).

Προσοχή στο βήμα 6: Δημιουργία text box για μετακίνηση κάμερας προς τα πάνω.

---

webGLExercise9.html

• Χρήση Firefox (προτεινόμενος browser).
• Ρυθμίσεις και ονόματα εικόνων πρέπει να ταιριάζουν με τον κώδικα.
• Εικόνες για mipmapping πρέπει να έχουν διαστάσεις δύναμης του 2.

---

webGLExerciseA_B.html

Κίνηση ποντικιού:

• Συμπλήρωση βημάτων για λειτουργία και σε σταματημένη σκηνή (requestID στην stopAnimation()).
• Εκτέλεση drawScene() για ενημέρωση.
• Ρυθμός κύλισης με ροδέλα μπορεί να φαίνεται αργός - πειραματιστείτε αν χρειάζεται.