Alle indlæg af Asger Dam Hoedt

O3D - 3D i browsere

3D grafik er sjovt. Og med O3D fra Google kan vi nu også få fuldt
hardware understøttet cross browser 3D grafik i browserne. Dette kan
give bedre muligheder for web spiludvikling naturligvis, men også
datavisualisering, 3D grafikere, legetøjsfirmaer der vil fange
interessen hos unge og hjemmesider, der bare gerne vil have et
ekstra pift kan nyde godt af dette.

For at anvende O3D skal der installeres en letvægts-plugin til din browser (lavet af Google naturligvis).
Derudover er selve O3D API’et er skrevet til Javascript, så webdevelopere behøver ikke lære et
nyt sprog for at bruge størstedelen af funktionaliteten. Undtagelsen
er shaders, der skrives i O3D’s eget shadersprog.

Endnu en fordel ved O3D er at det er cross browser og cross platform
kompatibelt. Således er både IE, Firefox, Safari og Chrome
understøttet i Windows, Linux og Mac OS X.

3D menu

Til at demonstrere mulighederne ved O3D har jeg lavet en lille
3D menu.

3D menuen er inspiret af 3D desktoppe som Compiz til Linux, hvor
brugerens forskellige desktoppe ligger på siden af en kube og der
skiftes mellem dem ved at vende kuben.

I eksemplet fungerer kubens sider som links og kan drejes for at
skifte link. Måden brugeren drejer kuben på er ved at trykke på
knapperne ovenfor eller bruge A eller S tasterne. Desuden kan man
zoome på W og S.

Muligheder demonstreret

I eksemplet demonstreres følgende:

  • Da O3D skrives i Javascript betyder det at det er nemt for
    webudviklere at foretage interaktioner mellem en given hjemmeside og
    3D miljøet. I eksemplet er dette demonstreret ved knapperne for
    oven, der er indsat som almindeligt HTML markup, og hvordan disse får kameraet til at
    svinge rundt om klodsen.
  • Dette demonstrerer en anden mulighed i O3D, nemlig at brugerne
    kan bevæge sig rundt i scenen.
  • Direkte interaktion med 3D miljøet er også en mulighed. I
    eksemplet illusteres dette ved at brugeren kan klikke på en figur i
    miljøet og blive dirigeret til en ny side.

O3D giver dog mulighed for langt mere end bare illustreret i dette ene
eksempel. De individuelle figure i scenen kan også bevæge sig, der kan
lægges texture på figurene, scener fra Maya og 3D Studio Max kan
importeres og der er understøttelse for shaders.

Flere eksempler og færdige programmer kan findes på
code.google.com

Introduktion til iPhone udvikling

IPhonen er et spændende stykke legetøj, komplet med en mini version af Mac OS, internet adgang, multitouch input, understøttelse af basale openGL kald og et accelerometer. Denne forholdsvis nye gadget skal der naturligvis leges med. Vi vil gerne her vise hvordan man selv får hul igennem til en “hello world” applikation på iPhone.

Opsætning af miljø

For at kunne udvikle iPhone applikationer fra en PC kræves det at man først får sat et ordentligt udviklingsmiljø op. Til dette har Apple stillet iPhone Simulator til rådighed. Simulatoren giver udviklere en virtuel iPhone til rådighed under OS X, så de derfor ikke behøver uploade deres applikation til iPhonen før hver kodetilpasning og test.

Opsætningen af miljøet er som følger:

  1. Find en Mac med OS X 10.5.5 eller nyere (kan fx. installeres som en VM under windows). Dette er i skrivende stund kravet for at kunne kører den nyeste iPhone SDK
  2. Først installeres Xcode Tools. Dette er udviklingsmiljøet (svarerende til Microsoft Visual Studio til Windows). Xcode kan findes på Install DVD’en, der følger med OS X.
  3. Bliv registreret som iPhone developer under iPhone Dev Center og download iPhone SDK.
  4. Installer iPhone SDK (men først efter Xcode installationen).
  5. Tillykke. Du har nu en virtuel iPhone på din computer. Kør programmet iPhone simulator og en iPhone vil dukke op på din skærm. Leg lidt med den inden vi går videre 🙂

Første program

Så går det løs, “Hello World” applikationen skal implementeres. Applikationen vil blot indeholde en label med tekst og en knap til at ændre denne tekst.

Først startes et nyt projekt. Dette gøres under File → New Project. Her vælges iPhone OS → Application → View-Based Application, da vi kun har brug for ét view og ingen af de ekstra features de andre muligheder giver os. Kald projektet “Hello World” og tryk OK.

Xcode laver nu selv et grundprojekt med et view tilknyttet, som nu skal udvides med den ønskede funktionalitet.

Når Xcode har generet projektet kommer “Project” vinduet frem (skulle det blive skjult igen kan der altid trykkes cmd + 0 for at få det vist på ny). Herfra vil vi som det først ændre lidt på vores applikationsbrugerflade. I “Project” vinduet gå da ind under HelloWorld → Resources og dobbeltklik HelloWorldViewController.xib. Dette starter Interface Builder Applikationen. Denne viser i vinduet View et billede af applikationsbrugerfladen, der pt blot er en uinteressant grå baggrund.

Hvis vinduet “Library” ikke allerede er åbent kan dette gøres fra Tools → Library. I “Library” ses en masse brugergrænseflade elementer, som kan trækkes over på i Interface builderen. I denne gennemgang skal vi som nævnt bruge en label og en knap, så træk disse to over i viewet.

Interface Builder

Dobbeltklik på lablens tekst og ret denne til &qout;Hello World!&qout;

Hvis vi bare ville have vores applikation til at vise en label med “Hello World”, så kunne vi være færdig nu. For at få noget kode ind, udvider vi den til ved klik på knappen at skrive “Hello Universe!”.

I HelloWorldViewController.h, fundet under “Classes” i projektmappen, udvides interface med følgende:

HelloWorldViewController.h

HelloWorldViewController.h er header filen for vores ViewController. Den første linje vi tilføjer definerer en variabel, lblHello, af typen UILabel og som er et outlet til en IO enhed. Den anden linje vi tilføjer definerer metoden, updateLabel, der skal kaldes når vores knap trykkes ned.

Nu skal vi så have forbundet vores erklærede variabel og metode med elementerne i vores interface. Derfor åbner vi igen Interface Builderen, så dobbeltklik på HelloWorldViewController.xib.

Klik på lablen og åben “Connections Inspectoren”, fra “Tools” menuen. Ud for “New Reference Outlet” ses en cirkel. Klik på denne cirkel, hold nede og træk den blå streg, der kommer frem, over til “File’s Owner” ikonet som illustreret her:

UI Element dragged to variabel

I den fremkommende menu, knyt da lablen til lblHello variablen.

På samme måde knytter vi knappen til projektet. Klik på knappen og gå ind i “Connections Inspector”. Da vi vil have noget til at ske når knappen trykkes ned, klikke vi på cirklen ud for “Touch Up Inside” eventet og trækker pilen over på “File’s Owner”, hvor vi knytter den til updateLabel metoden.

Nu skal koden skrives, som ændre lablen når knappen trykkes ned. Åben HelloWorldViewController.m fundet under “Classes” mappen. Der vil muligvis være en masse udkommenterede metoder heri, indsat af Xcode da filen blev genereret. Disse er bare metoder nedarvet fra UIViewControlleren og kan overskrives hvis man har behov for det. Vi er godt tilfredse med dem som de er, så vi ignorerer dem og udvider filen med følgende kode:

HelloWorldViewController.m

Dermed tildeles strengen “Hello Universe” til teksten i vores label.

Applikationen kan nu kompileres og køres i iPhone simulatoren.

Vælg “Simulator” som ønsket kompileringsresultat (target) og tryk “Build and Go” ikonet i toppen af “Project” vinduet for at starte applikationen.

Simulator target

IPhone simulatoren startes automatisk op af Xcode og viser det forventede resultat:

Hello World

Resourcer

iPhone Dev Center – Apple’s iPhone developer center.

iCodeBlog – Blog omkring iPhone development med gode introduktions toturials.