{"_id":"5ba1a04d4f89f700039d85b7","category":{"_id":"5ba1a04d4f89f700039d8595","version":"5ba1a04d4f89f700039d85d0","project":"5a065a6134873d0010b396ab","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":1,"slug":"develop","title":"Basics"},"parentDoc":null,"user":"578c4a62bd223d2000cc143e","project":"5a065a6134873d0010b396ab","version":{"_id":"5ba1a04d4f89f700039d85d0","project":"5a065a6134873d0010b396ab","__v":0,"forked_from":"5b8469fbe0a7ea00039d96b8","createdAt":"2018-04-18T18:19:34.288Z","releaseDate":"2018-04-18T18:19:34.288Z","categories":["5ba1a04d4f89f700039d8594","5ba1a04d4f89f700039d8595","5ba1a04d4f89f700039d8596","5b05923ea5a2f9000357b452","5b05f793c2c86c0003cbe414","5ba1a04d4f89f700039d8597","5ba1a04d4f89f700039d8598","5ba1a04d4f89f700039d8599"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.11.0","version":"1.11.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T19:28:47.231Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"Applications in Viro consist of Scenes, represented either by [Scene](https://developer.viromedia.com/virocore/reference/com/viro/core/Scene.html) or [ARScene](https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.html) objects. Scenes are the 3D equivalent of the Views found in most 2D application frameworks. They contain all the content that Viro renders in AR/VR: UI controls, 3D objects, lights, and more. \n\nAn application in Viro typically contains one or more of these Scenes. Scenes are rendered on Android by injecting them into a [ViroView](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroView.html). There are several types of ViroView available, one for each supported platform.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic Scene\"\n}\n[/block]\nA simple Scene is provided below. The scene contains a single [Text](https://developer.viromedia.com/virocore/reference/com/viro/core/Text.html) object, which displays the text \"Hello World\".\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Text text = new Text();\\ntext.setPosition(new Vector(0, -0.1f, -1.0f));\\ntext.setText(\\\"Hello World\\\");\\n\\nNode node = new Node();\\nnode.setGeometry(text);\\n\\nScene scene = new Scene();\\nscene.getRootNode().addChildNode(node);\\n\\nViroView view = new ViroViewARCore(context, null);\\nview.setScene(scene);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Positioning Objects in a Scene\"\n}\n[/block]\nViro uses a right-handed coordinate system, where the direction of view is along the negative z-axis. The point of view can be modified by changing the [Camera](doc:camera). By default, the camera is positioned at ```[0, 0, 0]``` and looks in the direction ```[0, 0, -1]```. In platforms with only 3DOF (3 degrees of freedom) support, the end user is only able to control the rotation of the camera. The camera stays at `[0, 0, 0]` until programmatically moved by the developer. In platforms with 6DOF platform (6 degrees of freedom), the end user can move about their world, and the camera in the Viro Scene will move in kind. [ViroViewGVR](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewGVR.html) and [ViroViewOVR](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewOVR.html) only support 3DOF, while [ViroViewARCore](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewARCore.html) supports 6DOF.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/54ce6ff-viro_camera_diagram.png\",\n        \"viro_camera_diagram.png\",\n        607,\n        676,\n        \"#3cbbfb\"\n      ]\n    }\n  ]\n}\n[/block]\nObjects in the scene are positioned in this 3D coordinate system via ```Node.setPosition(Vector)```. As scenes grow in complexity, it is best to take advantage of Viro's underlying [Scene Graph](#scene-graph) when placing objects. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Scene Backgrounds\"\n}\n[/block]\nThe background of a scene is the content rendered in the distance, behind all the objects. This background can either be a [360 degree image](doc:viro360image), or a [skybox](doc:skybox). In augmented reality, the background is a real-time video feed of the user's camera.\n\nTo render a 360 image as the background use ```Scene.setBackgroundTexture(Texture)```, as shown below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Bitmap image = loadBitmap(); // Load an image into an android.graphics.Bitmap\\nTexture texture = new Texture(image, Texture.Format.RGBA8, true, true);\\n\\nScene scene = new Scene();\\nscene.setBackgroundTexture(texture);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nTo render a skybox, use ```Scene.setBackgroundCubeTexture(...)``` or ```Scene.setBackgroundCubeWithColor(...)```. A skybox is a cube with 6 sides that encloses the user. The six sides can either be given a solid color by using the latter method, or they can each be assigned a texture by using the former. In the example below, each side of the skybox is assigned the same image.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Bitmap image = loadBitmap(); // Load an image into an android.graphics.Bitmap\\nTexture texture = new Texture(image, image, image, image, image, image, Texture.Format.RGBA8);\\n\\nScene scene = new Scene();\\nscene.setBackgroundCubeTexture(texture);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nThe six parameters for the [Texture](https://developer.viromedia.com/virocore/reference/com/viro/core/Texture.html) constructor above, nx, px, ny, py, nz, and pz, specify the Bitmap to use for each cube face (where nx is the face in the negative-x direction, px is the face in the positive-x direction, and so on).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Scene Graph\"\n}\n[/block]\nUnderlying the [Scene](https://developer.viromedia.com/virocore/reference/com/viro/core/Scene.html) is a full-featured 3D scene graph engine. A scene graph is a hierarchical tree structure of nodes that allows developers to intuitively construct a 3D environment. The root node can be retrieved via ```Scene.getRootNode()```. Sub-nodes are represented by child [Node](https://developer.viromedia.com/virocore/reference/com/viro/core/Node.html) objects. Each Node represents a position and transform in 3D space, to which you can attach [3D objects](doc:3d-objects), [lights](doc:3d-scene-lighting), [sound](doc:audio), or other content.\n\nA Node by itself has no visible content when it is rendered; it represents only a coordinate space transform (position, rotation, and scale) relative to its parent Node. You use a hierarchy of Node objects to model your scene in a way that makes sense for your app.\n\nFor example, in the scene below Text A's rendered position will be ```[0, 1, -1]```, and Text B's rendered position will be ```[1, 1, -1]```. Similarly, Text A's final scale will be ```[2, 2, 2]```, while Text B's final scale will be ```[8, 8, 8]```, since it picks up the scale from both its parent nodes.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene scene = new Scene();\\n\\nNode nodeA = new Node();\\nnodeA.setPosition(new Vector(0, 1, -1));\\nnodeA.setScale(new Vector(2, 2, 2));\\n\\nText textA = new Text();\\ntextA.setText(\\\"Text A\\\");\\nnodeA.setGeometry(textA);\\n\\nNode nodeB = new Node();\\nnodeB.setPosition(new Vector(1, 0, 0));\\nnodeB.setScale(new Vector(4, 4, 4));\\n\\nText textB = new Text();\\ntextB.setText(\\\"Text B\\\");\\nnodeB.setGeometry(textB);\\n\\nscene.addChildNode(nodeA);\\nnodeA.addChildNode(nodeB);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nTo take a more concrete example, suppose your app presents an animated view of a solar system.  You can construct a Node hierarchy that models celestial bodies relative to one another. Each body can be a Node, with its position in its orbit defined in the coordinate system of its parent. The sun would define its own coordinate space, and the Earth would position itself in that space. At the same time, the Earth would define its own coordinate space in which the moon would position itself. The snippet below shows a simple solar system.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Node sun = new Node();\\nnode.setGeometry(new Sphere(30));\\n\\nNode earth = new Node();\\nearth.setPosition(new Vector(100, 0, 0));\\nearth.setGeometry(new Sphere(2));\\nsun.addChildNode(earth);\\n\\nNode moon = new Node();\\nmoon.setPosition(new Vector(10, 0, 0));\\nmoon.setGeometry(new Sphere(0.1f));\\nearth.addChildNode(moon);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nThis scene hierarchy makes it intuitive to animate the celestial bodies: the revolution of the moon around the Earth and the Earth around the sun combine such that the moon follows the planet around the sun.","excerpt":"","slug":"scenes","type":"basic","title":"Scenes"}
Applications in Viro consist of Scenes, represented either by [Scene](https://developer.viromedia.com/virocore/reference/com/viro/core/Scene.html) or [ARScene](https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.html) objects. Scenes are the 3D equivalent of the Views found in most 2D application frameworks. They contain all the content that Viro renders in AR/VR: UI controls, 3D objects, lights, and more. An application in Viro typically contains one or more of these Scenes. Scenes are rendered on Android by injecting them into a [ViroView](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroView.html). There are several types of ViroView available, one for each supported platform. [block:api-header] { "type": "basic", "title": "Basic Scene" } [/block] A simple Scene is provided below. The scene contains a single [Text](https://developer.viromedia.com/virocore/reference/com/viro/core/Text.html) object, which displays the text "Hello World". [block:code] { "codes": [ { "code": "Text text = new Text();\ntext.setPosition(new Vector(0, -0.1f, -1.0f));\ntext.setText(\"Hello World\");\n\nNode node = new Node();\nnode.setGeometry(text);\n\nScene scene = new Scene();\nscene.getRootNode().addChildNode(node);\n\nViroView view = new ViroViewARCore(context, null);\nview.setScene(scene);", "language": "java" } ] } [/block] [block:api-header] { "type": "basic", "title": "Positioning Objects in a Scene" } [/block] Viro uses a right-handed coordinate system, where the direction of view is along the negative z-axis. The point of view can be modified by changing the [Camera](doc:camera). By default, the camera is positioned at ```[0, 0, 0]``` and looks in the direction ```[0, 0, -1]```. In platforms with only 3DOF (3 degrees of freedom) support, the end user is only able to control the rotation of the camera. The camera stays at `[0, 0, 0]` until programmatically moved by the developer. In platforms with 6DOF platform (6 degrees of freedom), the end user can move about their world, and the camera in the Viro Scene will move in kind. [ViroViewGVR](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewGVR.html) and [ViroViewOVR](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewOVR.html) only support 3DOF, while [ViroViewARCore](https://developer.viromedia.com/virocore/reference/com/viro/core/ViroViewARCore.html) supports 6DOF. [block:image] { "images": [ { "image": [ "https://files.readme.io/54ce6ff-viro_camera_diagram.png", "viro_camera_diagram.png", 607, 676, "#3cbbfb" ] } ] } [/block] Objects in the scene are positioned in this 3D coordinate system via ```Node.setPosition(Vector)```. As scenes grow in complexity, it is best to take advantage of Viro's underlying [Scene Graph](#scene-graph) when placing objects. [block:api-header] { "type": "basic", "title": "Scene Backgrounds" } [/block] The background of a scene is the content rendered in the distance, behind all the objects. This background can either be a [360 degree image](doc:viro360image), or a [skybox](doc:skybox). In augmented reality, the background is a real-time video feed of the user's camera. To render a 360 image as the background use ```Scene.setBackgroundTexture(Texture)```, as shown below. [block:code] { "codes": [ { "code": "Bitmap image = loadBitmap(); // Load an image into an android.graphics.Bitmap\nTexture texture = new Texture(image, Texture.Format.RGBA8, true, true);\n\nScene scene = new Scene();\nscene.setBackgroundTexture(texture);", "language": "java" } ] } [/block] To render a skybox, use ```Scene.setBackgroundCubeTexture(...)``` or ```Scene.setBackgroundCubeWithColor(...)```. A skybox is a cube with 6 sides that encloses the user. The six sides can either be given a solid color by using the latter method, or they can each be assigned a texture by using the former. In the example below, each side of the skybox is assigned the same image. [block:code] { "codes": [ { "code": "Bitmap image = loadBitmap(); // Load an image into an android.graphics.Bitmap\nTexture texture = new Texture(image, image, image, image, image, image, Texture.Format.RGBA8);\n\nScene scene = new Scene();\nscene.setBackgroundCubeTexture(texture);", "language": "java" } ] } [/block] The six parameters for the [Texture](https://developer.viromedia.com/virocore/reference/com/viro/core/Texture.html) constructor above, nx, px, ny, py, nz, and pz, specify the Bitmap to use for each cube face (where nx is the face in the negative-x direction, px is the face in the positive-x direction, and so on). [block:api-header] { "type": "basic", "title": "Scene Graph" } [/block] Underlying the [Scene](https://developer.viromedia.com/virocore/reference/com/viro/core/Scene.html) is a full-featured 3D scene graph engine. A scene graph is a hierarchical tree structure of nodes that allows developers to intuitively construct a 3D environment. The root node can be retrieved via ```Scene.getRootNode()```. Sub-nodes are represented by child [Node](https://developer.viromedia.com/virocore/reference/com/viro/core/Node.html) objects. Each Node represents a position and transform in 3D space, to which you can attach [3D objects](doc:3d-objects), [lights](doc:3d-scene-lighting), [sound](doc:audio), or other content. A Node by itself has no visible content when it is rendered; it represents only a coordinate space transform (position, rotation, and scale) relative to its parent Node. You use a hierarchy of Node objects to model your scene in a way that makes sense for your app. For example, in the scene below Text A's rendered position will be ```[0, 1, -1]```, and Text B's rendered position will be ```[1, 1, -1]```. Similarly, Text A's final scale will be ```[2, 2, 2]```, while Text B's final scale will be ```[8, 8, 8]```, since it picks up the scale from both its parent nodes. [block:code] { "codes": [ { "code": "Scene scene = new Scene();\n\nNode nodeA = new Node();\nnodeA.setPosition(new Vector(0, 1, -1));\nnodeA.setScale(new Vector(2, 2, 2));\n\nText textA = new Text();\ntextA.setText(\"Text A\");\nnodeA.setGeometry(textA);\n\nNode nodeB = new Node();\nnodeB.setPosition(new Vector(1, 0, 0));\nnodeB.setScale(new Vector(4, 4, 4));\n\nText textB = new Text();\ntextB.setText(\"Text B\");\nnodeB.setGeometry(textB);\n\nscene.addChildNode(nodeA);\nnodeA.addChildNode(nodeB);", "language": "java" } ] } [/block] To take a more concrete example, suppose your app presents an animated view of a solar system. You can construct a Node hierarchy that models celestial bodies relative to one another. Each body can be a Node, with its position in its orbit defined in the coordinate system of its parent. The sun would define its own coordinate space, and the Earth would position itself in that space. At the same time, the Earth would define its own coordinate space in which the moon would position itself. The snippet below shows a simple solar system. [block:code] { "codes": [ { "code": "Node sun = new Node();\nnode.setGeometry(new Sphere(30));\n\nNode earth = new Node();\nearth.setPosition(new Vector(100, 0, 0));\nearth.setGeometry(new Sphere(2));\nsun.addChildNode(earth);\n\nNode moon = new Node();\nmoon.setPosition(new Vector(10, 0, 0));\nmoon.setGeometry(new Sphere(0.1f));\nearth.addChildNode(moon);", "language": "java" } ] } [/block] This scene hierarchy makes it intuitive to animate the celestial bodies: the revolution of the moon around the Earth and the Earth around the sun combine such that the moon follows the planet around the sun.