Kmom03: Kuber och texturer

Du fortsätter att öva på programmering med JavaScript. Denna gången är det fokus på arrayer och objekt. Samtidigt fördjupar du dig i WebGL med texturer, MVP-matriser och du ritar kuber i en 3D-värld.

Det kan se ut så här när du jobbar med övningarna.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 4-8 studietimmar)

#Kurslitteratur

Läs följande:

1. WebGL Programming Guide.
   • Ch 5: Using Colors and Texture Images
   • Ch 6: The OpenGL ES Shading Language (GLSL ES) (översiktligt, använd som referens)
   • Ch 7: Toward the 3D World

I kapitlen finns en del exempelprogram som du kan testa direkt i ditt kursrepo example/webgl/theBook, eller via dbwebb’s kopia av kursrepot.

1. Läs i boken Speaking JavaScript: An In-Depth Guide for Programmers om arrayer och grunderna för objekt.
   • Ch17 Objects and Inheritance (läs endast första stycket om “Layer 1: Single Objects”)
   • Ch18 Arrays

#MDN

Läs följande:

1. I dokumentet “MDN JavaScript Guide” läs om konstruktioner för arrayer och grunderna om objekt.

   • Indexed collections
   • Working with objects

2. I referensmanualen JavaScript reference läs översiktligt om arrayer.

   • Array

#Artiklar

Läs igenom följande artiklar.

1. Kika igenom tutorialen om WebGL på MDN, där ser du hur en kub kan animeras och renderas med texturer.

#Video

Kika på följande videor.

1. Videoserien Lär dig JavaScript är tätt kopplat till kursmaterialet. Kika igenom serien under kursens gång.

2. Kika på Getting started with three.js and WebGL by Jaume Sanchez Elias at JSConf Budapest 2015 om du är intresserad av att se hur ramverket Three.js jobbar med 3D för webben ovanpå WebGL.

#Lästips

Läs gärna följande för att förkovra dig.

1. Kika i specifikationen för WebGL för att orientera dig om vilka funktioner som finns.

2. Kika på de artiklar som WebGL Fundamentals presenterar inom det område som kursmomentet omspänner.

3. Kika på de lektioner som Learning WebGL erbjuder inom kursmomentets område.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

Gör följande övningar för att träna inför uppgifterna.

1. För att träna inför uppgiften så bör du skapa dina egna varianter av de exempelprogram som visas i bokens kapitel om texturer och 3D-världen.

2. Studera koden i de exempelprogram som finns i kursrepot och är döpta till example/sandboxWebGL5* och example/sandboxWebGL7*. De kan hjälpa dig att lösa uppgifterna.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

2. Gör uppgiften “JavaScript med objekt”. Spara resultatet i me/kmom03/lab5.

3. Gör uppgiften “Skapa en animerad 3D-värld”. Spara resultatet i me/kmom03/world.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

• Gjorde du några särskilda iakttagelser i bokens kapitel 5, 6 och 7 som du vill nämna?
• Hur gick det att utföra labbarna med arrayer och objekt?
• Berätta kort om hur du löste uppgiften om kuber och texturer?
• Känner du att du har en god bas i WebGL? Vad känner du att du saknar?
• Var det något som var klurigt, utmanande eller tog extra mycket tid?

#Revision history