An Introduksjon til SceneKit: Fundamentals
28
Del
4
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Hva du skal lage
I denne opplæringen vil du lære hvordan du oppretter en grunnleggende 3D-scene i SceneKit uten kompleksiteten i OpenGL. Dette inkluderer grunnleggende geometri, kameraer, lys, materialer, og skygger.
Innledning
SceneKit rammeverket ble først lansert av Apple sammen med OS X 10.8 Mountain Lion, og ble senere gjort tilgjengelig på iOS med utgivelsen av iOS 8. Hensikten med dette rammeverket er å tillate utviklere å enkelt integrere 3D-grafikk i spill og programmer uten kompleksiteten i grafikk-APIer som OpenGL og Metal.
SceneKit lar deg enkelt gi en beskrivelse av eiendelene du ønsker i scene, med rammene selv håndterer alt av OpenGL rende koden for deg. I denne første opplæringen, vil jeg lære deg noen av de grunnleggende av å jobbe med 3D eiendeler og de grunnleggende i SceneKit rammeverket.
Denne opplæringen forutsetter at du kjører på Xcode 6 eller høyere. Selv om ikke nødvendig, anbefaler jeg å bruke en fysisk enhet som kjører iOS 8 for å teste din SceneKit koden på. Du kan bruke iOS Simulator, men ytelsen er ikke bra hvis din scene blir mer kompleks. Legg merke til at testing på en fysisk iOS-enhet krever at du har en registrert iOS developer konto.
1. Fundamentals
Det første du trenger å vite om SceneKit er at eiendeler, representert ved noder, er ordnet i et hierarkisk tre kalles en scene graf. Hvis du er kjent med iOS utvikling, dette treet fungerer omtrent som et vanlig syn hierarki Når du legger til en node til en scene, sin posisjon er spesifisert av et sett av tre tall, et tre-komponent-vector representert ved SCNVector3 strukturen i koden. Hver av disse tre komponentene definerer node posisjon på x, y og z aksene som vist på bildet nedenfor Din scenens rotnoden posisjon er definert som (0, 0 , 0). I det ovenstående bilde, er dette den stilling hvor de tre aksene krysser hverandre. Den medfølgende kamera i bildet representerer standard retning et kamera poeng i når det er lagt til din scene. Nå som du kjenner noen av de grunnleggende om hvordan objekter er representert ved SceneKit, er du klar til å begynne å skrive noen kode. Åpne Xcode og opprette en ny iOS Søknad Skriv inn et produktnavn, satt språk til Swift, og Devices til Universal. Klikk på Neste for å fortsette Når du har opprettet prosjektet, navigere til ViewController.swift og legge til følgende import uttalelse øverst for å importere SceneKit rammeverket. Deretter legger du til følgende implementering av viewDidLoad metoden i ViewController klassen: I viewDidLoad metode, skaper vi en SCNView objekt, passerer i rammen av den oppfatning kontrolleren syn. Vi tildele SCNView eksempel til en konstant, sceneView, og legge det til som en subview av visningen kontrolleren syn. SCNView klasse er en underklasse av UIView og gir et utløp for din SceneKit innhold. Bortsett fra å ha funksjonaliteten til en vanlig oppfatning har en SCNView også flere egenskaper og metoder knyttet til SceneKit innhold. For å sjekke at alt fungerer som det skal, bygge og drive din app. Du vil se at du bare har en blank hvit visning. For å gjengi innholdet i en SCNView, må du først opprette en SCNScene og tilordne den til visningen. I denne scenen, du da trenger å legge til en La oss gå gjennom viewDidLoad metoden trinnvis: Bygg og kjøre programmet ditt, og du vil se at du nå har en svart kube blir opplyst av lyset fra øverste høyre hjørne. Dessverre, kuben ser ikke tredimensjonalt i øyeblikket. Dette er fordi at kameraet er plassert direkte foran den. Hva du skal gjøre nå er å endre plasseringen av kameraet slik at den har en bedre visning av kuben. For å holde kameraet pekte direkte på terningen, men du er også kommer til å legge en SCNLookAtConstraint til kameraet. . Start med å oppdatere posisjonen til kameraet som vist nedenfor Deretter legger du inn følgende kode til viewDidLoad metoden, etter Instantiating noden for kuben: posisjonsendring beveger kameraet til venstre og opp. Ved å legge en begrensning, med kuben som sitt mål og gimbalLockEnabled satt til sann, du sørge for at kameraet skal stå parallelt med horisonten og synsfeltet, enhetens skjerm i dette tilfellet. Dette gjøres ved å deaktivere rotasjon langs rulleaksen, aksen peker fra kameraet til begrensningen mål. Bygg og kjøre appen på nytt, og du vil se kuben i all sin 3D herlighet. Det er på tide å legge til mer realisme til åstedet med materialer og skygger. Du først kommer til å trenge et annet objekt for å kaste en skygge på. Bruk følgende kode for å lage en plan, en flat rektangel, og plassere det under kuben. . Ikke glem å legge den nye noden som barn node til scenens rotnoden Ved å endre flyet nodes eulerAngles eiendom, roter du flyet bakover 90 grader langs x-aksen. Vi må gjøre dette, fordi flyene er laget vertikalt som standard. I SceneKit, er rotasjonsvinkler beregnet i radianer i stedet for grader, men disse verdiene kan enkelt konverteres ved hjelp av GLKMathDegreesToRadians (_ :) og GLKMathsRadiansToDegrees (_ :) funksjoner. GLK står for GLKit, Apples OpenGL rammeverk. Deretter må du legge et materiale til kuben og flyet. For dette eksempelet, skal du gi kuben og flyet en farge, rød og grønn hhv. Legg til følgende linjer til viewDidLoad metode for å lage disse materialene For hver SCNMaterial objekt, du overdra sine diffuse innholdet en UIColor verdi. Den diffuse egenskap ved et materiale bestemmer hvor det vises når det under direkte lys. Legg merke til at verdien som er tilordnet ikke behøver å være en UIColor gjenstand. Det er mange andre akseptabelt objekttyper skal tilordnes til dette hotellet, for eksempel UIImage, CALayer, og enda en SpriteKit tekstur (SKTexture). Bygg og kjøre appen på nytt for å ikke bare se flyet for første gang , men også de materialene du opprettet. Nå er det på tide å legge noen skygger til scene. Av de fire lette typer tilgjengelig i SceneKit kan bare spotlights lage skygger. For dette eksempelet, er du nødt til å slå din eksisterende omni lys inn i en spot lys, rettet mot kuben. Legg til følgende kode i viewDidLoad metode: For å opprette spot lys, må du først sette lysets typen til SCNLightTypeSpot. Du angir deretter flekken lette indre og ytre vinkler i grader. Standardverdiene er henholdsvis 0 og 45. Den indre vinkel bestemmer hvor mye areal lyset dekker i direkte lys mens den ytre vinkelen bestemmer hvor mye areal er delvis opplyst Forskjellen mellom disse vinklene vil bli klart når du ser den resulterende scene. Deretter eksplisitt ber lys til å kaste skygger og også legge til samme SCNLookAtConstraint som du opprettet for kameraet tidligere. Bygg og kjøre programmet ditt for å se den resulterende scene. Den indre vinkel du angitt i koden din vises der flyet er et solid grønt, rett under kuben. Den ytre vinkel vises av gradient av lys som blekner til svart som den beveger seg vekk fra lyset mål. Du vil se at du nå har fått kuben kaste skygge korrekt. Stedet lys, men lyser bare en del av flyet. Dette er fordi det er ingen ambient lys i scenen din. En omgivelseslyset er en lyskilde som lyser alt med en lik fordeling av lys. Fordi en omgivelseslyset lyser hele scenen, gjør sin posisjon ingen rolle, og du kan legge den til enhver node du vil, selv på samme node som kameraet. Bruk følgende kodebit å skape en ambient lys for scene. Kodebiten skaper en SCNLight, akkurat som du gjorde før. Den viktigste forskjellen er lysets typen eiendom, som er satt til SCNLightTypeAmbient. Du kan også sette sin farge til en mørk grå, slik at den ikke overmanne din scene. Standardfarge for et lys er hvit (RGB verdi på 1, 1, 1) og å ha denne fargen på en omgivelseslyset får hele scenen for å være fullt belyst som vist i skjermbildet nedenfor. Bygg og kjøre programmet ditt en siste gang for å se det endelige resultatet Hvis du har gjort det til slutten av denne opplæringen, bør du nå være komfortabel med følgende tema:. I neste opplæringen av denne serien, vil du lære om noen mer avanserte konsepter av SceneKit rammeverk, inkludert animasjon, brukermedvirkning, partikkel-systemer, og simulere fysikk.
i UIKit. Hver scene du oppretter har en enkelt rotnoden at du legger følgende noder på, og som også gir grunnlag for 3D koordinatsystem av den scenen.
Bilde Credit:. Apple SceneKit Work Reference
2. Prosjektet Setup
basert på Enkel visning Application mal. Mens du kan enkelt lage et program fra spillet mal ved hjelp SceneKit, for denne opplæringen jeg skal vise deg hvordan du kan begynne å jobbe med SceneKit fra scratch.
Import SceneKit
styre func viewDidLoad () {super.viewDidLoad () la sceneView = SCNView (ramme: self.view.frame) self.view.addSubview (sceneView)}
3. Scene Setup
kamera og minst ett lys. For dette eksempelet, er du også kommer til å legge en terning for SceneKit å gjengi. Legg til følgende kode i viewDidLoad metode:
styre func viewDidLoad () {super.viewDidLoad () la sceneView = SCNView (ramme: self.view.frame) self.view.addSubview (sceneView) la scene = SCNScene () sceneView.scene = scene la kamera = SCNCamera () la cameraNode = SCNNode () cameraNode.camera = kamera cameraNode.position = SCNVector3 (x: 0.0, y: 0,0, z: 3,0) la lyset = SCNLight () light.type = SCNLightTypeOmni la lightNode = SCNNode () lightNode.light = lys lightNode.position = SCNVector3 (x: 1,5, y: 1,5, z: 1,5) la cubeGeometry = SCNBox (bredde: 1,0, høyde: 1,0, lengde: 1,0, chamferRadius: 0.0 ) la cubeNode = SCNNode (geometri: cubeGeometry) scene.rootNode.addChildNode (lightNode) scene.rootNode.addChildNode (cameraNode) scene.rootNode.addChildNode (cubeNode)}
Du først opprette scenen for ditt syn ved å påberope seg init-metoden. Med mindre du legger i en forberedt scene fra en ekstern fil, er dette initializer du alltid vil bruke.
cameraNode.position = SCNVector3 (x: -3,0, y: 3,0, z: 3,0)
la begrensning = SCNLookAtConstraint (mål: cubeNode) constraint.gimbalLockEnabled = truecameraNode.constraints = [begrensning]
4. Materialer og Shadows
styre func viewDidLoad () {... la cubeGeometry = SCNBox (bredde: 1,0, høyde: 1,0, lengde: 1,0, chamferRadius: 0.0) la cubeNode = SCNNode (geometri: cubeGeometry) la planeGeometry = SCNPlane (bredde: 50,0, høyde: 50,0) la planeNode = SCNNode (geometri: planeGeometry) planeNode.eulerAngles = SCNVector3 (x: GLKMathDegreesToRadians (-90), y: 0 , z: 0) planeNode.position = SCNVector3 (x: 0, y: -0,5, z: 0) ... scene.rootNode.addChildNode (lightNode) scene.rootNode.addChildNode (cameraNode) scene.rootNode.addChildNode (cubeNode ) scene.rootNode.addChildNode (planeNode)}
styre func viewDidLoad () {... planeNode.position = SCNVector3. (X: 0, y: -0,5, z: 0) la redMaterial = SCNMaterial () redMaterial.diffuse.contents = UIColor.redColor () cubeGeometry.materials = [redMaterial] la greenMaterial = SCNMaterial () greenMaterial.diffuse.contents = UIColor.greenColor () planeGeometry.materials = [greenMaterial] la begrensningen = SCNLookAtConstraint (mål: cubeNode ) ...}
styre func viewDidLoad () {... la lyset = SCNLight () light.type = SCNLightTypeSpot light.spotInnerAngle = 30,0 light.spotOuterAngle = 80,0 light.castsShadow = true la lightNode = SCNNode () lightNode.light = lys lightNode.position = SCNVector3 (x: 1,5, y: 1,5, z: 1,5) ... la begrensningen = SCNLookAtConstraint (mål: cubeNode) constraint.gimbalLockEnabled = true cameraNode.constraints = [begrensning] lightNode.constraints = [begrensning] ...}
Styre func viewDidLoad () {... la kamera = SCNCamera () la cameraNode = SCNNode () cameraNode.camera = kamera cameraNode.position = SCNVector3 (x : -3,0, y: 3,0, z: 3,0) la Ambient = SCNLight () ambientLight.type = SCNLightTypeAmbient ambientLight.color = UIColor (red: 0,2, grønn: 0,2, blå: 0,2, alpha: 1,0) cameraNode.light = Ambient ...}
Konklusjon
3D koordinatsystem og scene graf brukes av SceneKit
sette opp en SCNView med en SCNScene
legge kameraer, lys og noder til en scene
< li> tildele materialer til geometrier
arbeide med lys for å belyse en scene og kaste skygger