قالب وردپرس درنا توس
Home / IOS Development / SceneKit Tutorial Part 1

SceneKit Tutorial Part 1



We will launch a new series of SceneKit tutorials, the framework that lets you build and manipulate 3D objects in a 3D scene. SceneKit was introduced for the first time in MacOS 10.8 (Mountain Lion) and successively in iOS 8. Recently, SceneKit was added to watchOS 3.0 and tvOS 9.

SceneKit allows developers to create 3D games and add 3D- content in apps using high-level scene descriptions. Due to the recent introduction of ARKit, SceneKit is today a very relevant framework. If you want to build Augmented Reality application, you should learn SceneKit. The frame provides a range of APIs that make it easy to add animations, physics simulation, particle effects, and realistic physically based rendering.

We will first explore the basics of SceneKit. In future posts I will show you more sophisticated techniques, write custom shaders and mix SceneKit with Metal.

Sheet Music and Scene Engraving

SceneKit is based on the term nodes . Each 3D object you want to render with SceneKit is a node an object of the type SCNNode . A SCNNode object by itself has no visible content when the scene contained is rendered on screen. A SCNNode is just a model object that provides the coordinate column transformation (position, orientation and scale) relative to its overall node.

To build a SceneKit 3D scene, use a hierarchy of nodes to create its structure, and add lights, cameras, and geometry to each node to create the visible content. SceneKit implements content as a hierarchical tree structure of nodes, also known as scene chart . You can create a node hierarchy programmatically or load one from a file created using 3D author tools, or combine the two approaches.

rootNode object in a scene defines the coordinate system of the rendered 3D world. Each kidnap you add in this root node has its own coordinate system, which is inherited by its own children. This is very similar to the synagogue of UIKit.

SceneKit shows scenes in one SCNView treats the stage chart and performs animations before you effectively provide each frame on the GPU.

Before working with SceneKit, you should be familiar with basic graphics concepts such as coordinate systems and the mathematics of three-dimensional geometry. SceneKit uses a right-handed coordinate system where (as standard) the display direction lies along the negative z axis, as illustrated below.

  Figure 1. SceneKit coordinate system.
Figure 1 . SceneKit coordinate system.

You add 2D and 3D objects to a scene by attaching SCNGeometry objects to nodes. Geometries have in turn fixed SCNMaterial objects that determine their appearance. To shadow the geometries in a scene with light and shadow effects, add nodes with attached SCNLight objects. To control the viewing point as the scene appears when rendered, add nodes with attached SCNCamera objects. We will look at all these classes in this post.

Creating a Node

To create a node, use init (geometry :) to initialize an object with a specific geometry (see later Geometry ). You can also initialize a node using a Model I / O object using the init (mdlObject :) method method. Model I / O is a relatively new cocoa framework that provides an understanding of the system level of 3D model assets and related resources. Model I / O was introduced in IOS 9.

Another way to make a note is to use Editor Editor Editor available in Xcode. The editor appears when you select a SceneKit file. Then you drag nodes from the object library and assign a name to them.

Manage Node Transformations

Once the node has been created, you can assign a position eulerAngles ] and scale to transform the node.

Position of position locates it within the coordinate system of its parent, as modified by the property's turn property. The default position is the null vector, which indicates that the node is located at the origin of the parent nodes coordinate system.

Knutens eulerAngles represents the node's orientation, expressed as pitch, roll and angles, each in radians. The order of the components in this vector matches the axis of rotation:

  • The pitch (x-component) is the rotation around the node's x-axis.
  • Yaw (Y-component) is the rotation around the node's y-axis
  • The roll (z-component) is the rotation around the z-axis of the junction.

SceneKit applies to these rotations relative to the hub's pivot property in reverse order of the components: so please, so pitch.

Knutens scale represents the scale factor applied to the node. Each component of the scaling vector multiplies the corresponding dimension of the geometry of the node. The default scale is 1.0 in all three dimensions.

Knutens pivot resembles anchor point by a CALayer in Core Animation. Standard pivot is SCNMatrix4Identity and indicates that the position of the node locates the origin of its coordinate system, its rotation is whether an axis through the center is also in Relationship to this center point rotation eulerAngles and orientation properties affect the rotation aspect of the transformation property of the node. Any change to one of these attributes is reflected in the others.

The property transforms of a node is a 4×4 array of the type SCNMatrix4 . This property combines the properties of the node's rotation position and scale . The standard transformation is SCNMatrix4Identity . When you enter the value of this property, the display shows the node rotation orientation eulerAngles position and scale scale ] Properties are automatically changed to match the new transformation, and vice versa. SceneKit can only perform this conversion if the transform you provide is a combination of rotation translation and scale operations. If you set the value of this property to a slanted transformation or to a non-change, the values ​​of these properties will be undefined.

In IOS 11, SCNNode classifies all of the above features and uses SIMD types to simplify the interoperability between Metal and SceneKit. For example, you can now enter the location of a node using the old position and the new simdPosition position. Likewise, you can now use simdEulerAngles simdScale simdOrientation simdTransform and simdPivot in place eulerAngles scale orientation ] transform and pivot .

Managing Node Attributes

A node has more features you can specify:
Name is a string that you use as a unique identifier for a node
light is a SCNLight object that you can attach to the node to represent a light
camera is a SCNCamera item as represents a point of view
geometry is a SCNGeometry object representing the shape of the node
morpher is a SCNMorpher SCNMorpher 011] object responsible for mixing node geometry
- skinner is a SCNSkinner object responsible for skeleton animations of a node
- categoryBitMask is an Int which defines which category the node belongs to. You can assign each node of a scene to one or more categories.

Change the Visibility of the Node

You can change the visibility of a node using the following features:
- isHidden is a Boolean that determines the visibility of the node
- opacity is a CGFloat representing the opacity value of a node
- renderingOrder is an Int representing the order, the content of the node is drawn with respect for others nodes. The default value is null .
- castsShadow is a Boolean that determines whether SceneKit does the node's content to shadow maps
- movabilityHint controls how node contributes to various motion-related effects during reproduction. The default value is fixed . This value is just a hint that communicates with SceneKit's system of how to move content in your scene; It does not affect the ability to change the node's position or add animations or physics to the node.

Managing the node hierarchy

To inspect the scene diagram, you can use the parent property to request the main node. rootNode of a scene does not have a parent. In addition, you can use the childNodes property to retrieve the selection of child nodes for the current node.

The methods addChild (_ :) and insert_: at:) allow you to add a new node in another node. The method removeFromParentNode () removes a node from the scene chart. Finally, replacesChildNode (_: with :) replaces a child from the node's number of children and places another node instead.

Searching the nodhierarchy

To search for a particular node In the scene, you can use methods like childNode (withName: recursively :) . This method requires the name of the node you are applying for and a boolean value. If the Boolean value is true SceneKit is searching for the entire node baptism, otherwise it only seeks the closest children.

The method childNodes (passingTest :) returns each knot that satisfies a given test. For example, you can search for empty nodes using a block that returns true for nodes if light camera and geometry properties are all nil .

enumerateChildNodes (_ :) uses a closure for the child nub and the descendants. Finally, enumerateHierarchy (_ :) performs a specified closure for each of the node's children and descendants nodes as well as the actual node.

Customize the Node Rendering

To customize the look of a node, you have different options. This is a very wide theme that I will cover in a future post. However, it is also a simpler solution based on Core Image. The property of filters of a node is a number of CIFilter s you can assign to a node. The filters are then applied to reproduced content of the node. SceneKit makes the node (and its node hierarchy) an image buffer, and uses filters before composing the filter output to the rendered scene. The order in the array determines the order of the Core Image filter chain.

You can assign the node a rendererDelegate the item that is responsible for rendering custom content for the node using Metal or OpenGL.

Work with Location Sound

You can add an audio player or multiple audio players to a node using the addAudioPlayer (: _) method or the audioPLayers feature. You send a SCNAudioPlayer object to the node. This player is initialized either using a SCNAudioSource or an AVAudioNode . The audio player is a controller for playing a location audio source in a SceneKit scene.

You can use removeAudioPlayer (_ :) and removeAllAudioPlayers () methods to remove audio player from the node.

Copy a node

It is sometimes necessary to copy a node. The method clone () makes a copy of a node and its children. For a non-recursive copy, use copy () the method, which creates a copy of the node without any children's nodes. Note that cloning or copying of a node creates a duplicate of the node object, but not geometries, lights, cameras, and other SceneKit objects associated with it. Instead, each copied node shares references to these objects.

If you have a hierarchy hierarchy, use the flattenedClone () method and obtain a new single node containing the combined geometries and materials of the node and its subnode for child code.

Conversion between Node Coordinate

If you want to convert the position of a node from and to another node, use convertPosition (_: from :) and convertPosition (_: two: ) methods. Instead, the methods convert convertTransform (_: from :) and convertTransform (_: to :) a transformation matrix from and to the node coordinate part that is defined by another node.

Scene View

SceneKit uses a SCNView to render a 3D scene. A SCNView is a subclass of UIView on iOS and tvOS or NSView on macOS. You create a SCNView using Interface Builder or programmatically using the init (frame: options :) method. The second argument for the init (framework: options :) method is a set of possibilities you can send to the view to define:

  1. The preferred rendering API. This can be either Metal, OpenGL ES 2.0, Open GL, Open GL 3.2, or Open GL 4.1. Please check the documentation for SCNRenderingAPI the census for more details.
  2. The preferred metal device. If you chose Metal as the rendering API, you can also select the metal device ( MTLDevice ) that you want to use. For example, on a MacOS system with multiple GPUs, you can define which GPU will be used by SceneKit.
  3. If the system has multiple GPUs, you can enter a Boolean value to preferLowPowerDevice .

After you have created a SceneKit view, you assign a scene to it using the scene . The class SCNView provides different characteristics and methods. For example, you can use the allowsCameraControl property to determine whether the user can manipulate the current viewpoint used to render the scene. If you set this property to true the user can change the current view with the mouse or control panel in macOS or with multitouch gestures on iOS. This action does not change camera objects already in the scene chart or node containing them. The default value for this property is false .

If you need smooth edges on a rendered scene, you can change the sampling rate for rendering using the antialiasing Mode property. This property can be set to the following values:

  1. none (removes multisampling)
  2. multisampling2X
  3. multisampling4X
  4. ] multisampling8X
  5. multisampling16X

Multisampling makes each pixel multiple times and combines the results and creates a higher quality image at a performance cost proportional to the number of samples it uses. ” data-recalc-dims=”1″/>

The class SCNView also gives snapshot () the method of making the scene view in an image ( UIImage for iOS and NSImage for macOS ). Note that this method is thread-safe and can be called at any time.

Build a Scene

Let's see how to build a very simple scene. Let's create a new Xcode project. I will use Xcode 9 for this and the next examples. Name the project SimpleScene . The first thing we do is add a scene view to the storyboard. Open the Main.Storyboard file and add a SceneKit view at the top of the viewer's main view. Add the setup limitations to keep the full screen view. Now, go to ViewController.swift and add Import SceneKit under import the UIKit sentence. Let's make a withdrawal for the scene view:

Connect the output to the scene view.

Let's make a scene now. In the search engine of your Mac, create a new folder. Rename the folder scene.scnassets . Drag and drop the folder in the Xcode project. Create a new SceneKit file.

  Figure 2. Add a scene to the Xcode project.
Figure 2 . Add a scene to the Xcode project.

Name the scene.scn and finally drag it into the newly created folder. This folder improves the performance of loading this file while driving. In viewDidLoad () method, you add the following code lines:

Finally, let's add something to the scene. Open the scene.scn file. Drag and drop a bullet from the Object Library to the scene. If you click the small button at the bottom left corner of the scene (see next figure), you will uncover the scene chart. In our stage chart we can see 2 nodes: camera and sphere.

  Figure 3. Open the hub.
Figure 3 . Open the node graph.

The camera is a special node to provide a viewpoint for the user. Without the camera, you can not render the scene at runtime. When we created the electrical outlet, we set the property to cameraCrolision to true to allow the user to control the camera using pan and drag moves. When you do that, we move the camera in the 3D room.

Go to the scene and select camera the node. Then open the node inspector in Xcode (third tab in the Utilities panel). There you set the Position, Euler, and Scale camera to the following values:

  Figure 4. Camera settings in SceneKit Editor.
Figure 4 . Camera settings in SceneKit Editor.

Now select the sphere and set its position, Euler and Scale to the following values:

  Figure 5. New values ​​for the camera settings.
Figure 5 ]. New values ​​of camera settings.

Finally, run the program. You should see the sphere on the screen.

The camera

The camera is a very important SceneKit node. Without the camera, we can not visualize the 3D world. To display a scene, you must designate a node if the camera property contains a camera object as point of view. Each SCNNode object has a camera feature that defines a viewpoint, that is, position and orientation of the camera. The camera's directions are always along the negative z axis of the node's local coordinate system. To point the camera to different parts of your scene, use the position rotation or to transform the property to the node containing it.

The camera defines a region of the 3D space called frustum . Figure 6 highlights important parts of the frustum.

  Figure 6. Camera's frustration.
Figure 6 . The camera's frustration.

As you can see in Figure 6, the camera is on top of the pyramid. You can enter the camera field with display of the fieldOfView property. Instead, you can close the camera and limit the outer depth, using the features zNear and zFar . From and including iOS 10, Apple also introduced other features that make the camera simulate more realistic camera features. For example, you can decide to use a high-dynamic HDR camera and specify different features like wantHDR minimumExposure maximum view whitePoint and so on. You can also adjust the contrast, saturation and color classification of the camera ( contrast saturation colorGrading ). In iOS 11, Apple added more features like focalLenght focusDistance sensorHeight fStop and more.

Geometry [19659005] I would like to emphasize that the bullet we used in the previous example is a hub with a specific shape. In fact, a SCNNode has no special form. Instead, you must set the property geometry of a node to the specific shape you want. SceneKit provides embedded shapes:

  1. Floor ( SCNFloor )
  2. Box ( SCNBox )
  3. Capsule ( SCNCapule ) " data-recalc-dims="1"/>
    SCNCone )
  4. Cylinder ( SCNCylinder )
  5. Plane ( SCNPlane )
  6. Pyramid ( SCNPyramid )

     ] <code> ] <code>] </li>
<li> ] </li>
<li>  </li>
<li>  </li>
<li>  SCNTorus </code>) </li>
<li>  Tube (<code> SCNTube </code>) </li>
<li>  Text (<code> SCNText </code>) </li>
<li>  Form <code> SCNShape </code>). </li>
</ol>
<p>  All these embedded figures are subclasses of <code> SCNGeometry </code>. </p>
<p>  Let's look at these geometries. The following image highlights all available shapes in SceneKit. </p>
<figure><img src=
    Figure 7 . The available built-in geometries.

    SCNFloor

    A floor extends in the x and z axis the dimensions of its local coordinate space and is in the plane whose y coordinate is zero. You can specify the length and width of a floor, with the properties length and width . Other features, such as reflexiveness reflection FalloffStart reflectionFalloffEnd and reflectionResolutionScaleFactor are used to control the reflectivity of the floor.

    SceneKit creates a reflection effect by doing the stage twice. First, it makes the scene an offscreen buffer, with a viewpoint as the position is a reflection of the camera's position. Then, it performs the scene from the camera's point of view, using the screen saver as a texture map for the floor's surface. Recovering the scene twice causes a performance cost. Reducing the resolution of the shutter buffer reduces this cost, but causes the reflected image to appear unclear.

    SCNBox

    A SCNBox geometry defines the shape of the box in x, y, and z axis dimensions of its local coordinate space by setting the properties width height and length and length . If you want to place round edges and corners of a box, you can use the property chamferRadius . To position and orient a box in a scene, add it to the geometry property of an SCNNode object.

      Figure 8. A box geometry with different waste radius.
    Figure 8 .

    SCNCapsule

    A SCNCapsule geometry defines the size of the two hemispheres that form the end of a capsule with the property capRadius . Because the cylindrical body of the capsule extends between its two hemispherical ends, the circular cross section of the x and z axis dimensions has the same radius. You can define the size of the capsule in the z-axis dimension of the local coordinate area with the height property. To change the orientation of a capsule, just adjust transform the property of the node containing the capsule geometry.

      Figure 9. Two capsules of different height and radius.
    Figure 9 . Two capsules of different height and radius.

    SCNCone

    A cone defines the surface of a solid whose base is a circle and whose side surface runs to a point centered over its base. You define the size of the cone base in the x and z axis dimensions of the local coordinate area with the property bottomRadius and its extent in the y-axis dimension with its height ] property. You can create a cone that runs to a point by setting the topRadius property to zero. The following figure illustrates cones with different topRadius values.

      Figure 10. Cones with different peak radius values.
    Figure 10 . Cones with different peak radius values.

    SCNCylinder

    A cylinder defines the surface of a solid if each cross-section along a linear axis is a circle of the same size. You can define the size of the cylinder cross-section in the x and z axis dimensions of the local coordinate area with the radius property and its extent in the y-axis dimension with height property.

      Figure 11. Cylinders with different height and radius.
    Figure 11 . Cylinders with different height and radius.

    SCNPlane

    A plan defines a flat surface in the x and y axis dimensions of its local coordinate space according to width and height properties. To orient a plan different, the transform transform property of the node containing the flight geometry. You can create a rounded rectangular plan using the cornerRadius property.

      Figure 12. Plans with different corners.
    Figure 12 . Plans with different corners.

    SCNPyramid

    A pyramid defines the surface of a solid whose base is a rectangle and whose four triangular side faces converge at a point centered over its base. You define the shape of the pyramid base in the x and z axis dimensions of the local coordinate space with the properties width and length and its extent in the y axis dimension with height property.

      Figure 13. Pyramids of different width, height and length.
    Figure 13 . Pyramids of different width, height and length.

    SCNSphere

    A ball defines a surface if each point is as far from the center as it is located at the origin of the local coordinate area. You define the size of the sphere in all three dimensions using the radius property.

    If you set the sphere's isGeodesic property to true, the SceneKit constructs the sphere by successfully dividing triangular surfaces of an ordinary icosahedron.

    SCNTorus

    A torus is mathematically defined as a surface of revolution formed by turning a circle around a coplanar axis. It is the product of two circles: a large ring and a tube that surrounds the ring. SceneKit uses these conditions to define the dimensions of a torus geometry in its local coordinate space. Torus ringRadius property defines a circle in the x and z axis dimensions centered at the origin, and the property pipeRadius defines the width of the surface surrounding the ring. 19659187] Figure 14. Torque geometries with different ring and pipe radii. ” data-recalc-dims=”1″/>

    Figure 14 . Torque geometries with different ring and pipe radii.

    SCNTube

    The outer surface of a tube is a cylinder. Define the size of the cross section of the cylinder in the x and z axis dimensions of the local coordinate area with the property outerRadius and its extent in the y-axis dimension with height ] property.

      Figure 15. Pipes with different inner and outer radii.
    Figure 15 . Pipes with different inner and outer radii.

    SCNText

    You provide text for geometry using an NSString or NSAttributedString item. In the previous case, the properties of SCNText determine the object style and formatting of the entire text. When you create a text geometry from an attributed string, SceneKit styles the text according to the attributes in the string, and the properties of the SCNText object determine the default style for portions of the string that have no style attributes. SceneKit can create text geometry using any font and style supported by the Core Text framework, with the exception of bitmap fonts (such as those that define color emoji characters).

    In the local coordinate system of the text geometry, the origin corresponds to the lower left corner of the text, with the text extending in the x- and y-axis dimensions. The geometry is centered along its z-axis.

    Figure 16. 3D text in SceneKit.
    Figure 16. 3D text in SceneKit.

    SCNShape

    SceneKit can create a 3D geometry by extruding a Bézier path, which extends in the x- and y-axis directions of its local coordinate space, along the z-axis by a specified amount.
    This geometry is not available in the SceneKit editor. So, you can only build it programatically. You create this geometry using the init(path:extrusionDepth:) method, passing a Bezier path and the amount of extrusion. After that, you can chamfer the resulting 3D shape in different way using the chamferModechamferProfile and chamferRadius properties.

    Figure 17. A custom 3D shape.
    Figure 17. A custom 3D shape.

    Conclusions

    In this post, we look at some of the main classes in SceneKit. We just touched the surface of this framework that offers a huge set of functionalities. We will cover more about this framework in next posts. So, stay tuned.

    Geppy

    Geppy Parziale (@geppyp) is cofounder of InvasiveCode. He has developed many iOS applications and taught iOS development to many engineers around the world since 2008. He worked at Apple as iOS and OS X Engineer in the Core Recognition team. He has developed several iOS and OS X apps and frameworks for Apple, and many of his development projects are top-grossing iOS apps that are featured in the App Store. Geppy is an expert in computer vision and machine learning.

    iOS Consulting | INVASIVECODE

    iOS Training | INVASIVECODE

    (Visited 12,466 times, 22 visits today)


Source link