{"_id":"5ba1a04d4f89f700039d85be","category":{"_id":"5ba1a04d4f89f700039d8599","project":"5a065a6134873d0010b396ab","version":"5ba1a04d4f89f700039d85d0","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T14:46:44.164Z","from_sync":false,"order":3,"slug":"enhanced-scenes","title":"Enhanced Scenes"},"project":"5a065a6134873d0010b396ab","parentDoc":null,"user":"578c4a62bd223d2000cc143e","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-18T18:29:46.178Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen. Partially transparent video (or \"alpha\" video) is also supported through chroma-key filtering.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Video Texture\"\n}\n[/block]\nThe [VideoTexture](https://developer.viromedia.com/virocore/reference/com/viro/core/VideoTexture.html) object is used to render video. Because this extends Texture, it can be assigned to any Material, and from any Material to any Geometry and Node. In the example below, a VideoTexture is loaded onto a Surface, simulating a video screen.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"VideoTexture videoTexture = new VideoTexture(context, uri);\\nMaterial material = new Material();\\nmaterial.setDiffuseTexture(videoTexture);\\n\\nQuad quad = new Quad(10, 10);\\nquad.setMaterials(Arrays.asList(material));\\n\\nvideoTexture.play();\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nSupported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, `Uri.parse(\"http://example.org/myvideo.mp4\")`. To load an asset as video, use URI's of the form `file:///android_asset/[asset-name]`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"360 Video\"\n}\n[/block]\nSpherical videos that surround the user can be displayed via VideoTexture as well. To do this, simply assign the VideoTexture to the Scene's background, as shown below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"VideoTexture videoTexture = new VideoTexture(context, uri);\\nscene.setBackgroundTexture(videoTexture);\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Alpha Video (Chroma Key Filtering)\"\n}\n[/block]\nViro supports rendering partially transparent video over any VR, AR, or 3D scene. For AR scenes in particular, this enables \"hologram\" type experiences like [Will.I.Am on CNN](https://www.youtube.com/watch?v=68-bjoF1Vdk) or [Princess Leia in Star Wars](https://www.youtube.com/watch?v=tf-1xeE3zzE).\n\nAlpha video works via \"chroma key filtering\". Chroma key filtering removes (makes transparent) all colors from a video that are within an epsilon range of a target color. This technique is useful when rendering \"green screen\" or \"blue screen\" videos, as is commonly seen in newscasting and motion pictures. The videos in their raw form look something like the image below.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4631b63-alpha.png\",\n        \"alpha.png\",\n        1546,\n        1012,\n        \"#04d304\"\n      ]\n    }\n  ]\n}\n[/block]\nThe code below shows how to enable chroma-key filtering, by invoking [setChromaKeyFilteringColor(int)][1] and [setChromaKeyFilteringEnabled(bool)][2] on the [Material][3] that houses the VideoTexture.\n\n[1]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html#setChromaKeyFilteringColor(int)\n[2]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html#setChromaKeyFilteringEnabled(boolean)\n[3]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// Load the video\\nVideoTexture videoTexture = new VideoTexture(mViroView.getViroContext(), Uri.parse(\\\"URL to Video\\\"));\\n        \\n// Place the video in a Material\\nfinal Material material = new Material();\\nmaterial.setDiffuseTexture(videoTexture);\\n\\n// Enable chroma-key filtering on the Material\\nmaterial.setChromaKeyFilteringColor(Color.GREEN);\\nmaterial.setChromaKeyFilteringEnabled(true);\\n\\n// Create a Quad on which the video will be displayed\\nQuad surface = new Quad(4, 4, 0, 0, 1, 1);\\nsurface.setMaterials(Arrays.asList(material));\\n\\n// Create a Node in which to house the Quad with the video\\nNode node = new Node();\\nnode.setPosition(new Vector(0, 0, -3));\\nnode.setGeometry(surface);\\n\\n// Add the Node to the Scene\\nscene.getRootNode().addChildNode(node);\\n\\n// Finally, play the video\\nvideoTexture.play();\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manipulating Video\"\n}\n[/block]\nVideoTexture also controls the playback of the video. You can:\n* Adjust volume via the ```volume``` property\n* Mute the video via the ```muted``` property\n* Make the video loop by setting the ```loop``` property\n* Pause and play the video\n* Seek the video to a specific time in seconds by invoking the ```seekToTime(float)``` method\n\nYou can also respond to various playback events by implementing a [PlaybackListener](https://developer.viromedia.com/virocore/reference/com/viro/core/VideoTexture.PlaybackListener.html).","excerpt":"Adding video to your scenes","slug":"video","type":"basic","title":"Video"}

Video

Adding video to your scenes

Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen. Partially transparent video (or "alpha" video) is also supported through chroma-key filtering. [block:api-header] { "type": "basic", "title": "Video Texture" } [/block] The [VideoTexture](https://developer.viromedia.com/virocore/reference/com/viro/core/VideoTexture.html) object is used to render video. Because this extends Texture, it can be assigned to any Material, and from any Material to any Geometry and Node. In the example below, a VideoTexture is loaded onto a Surface, simulating a video screen. [block:code] { "codes": [ { "code": "VideoTexture videoTexture = new VideoTexture(context, uri);\nMaterial material = new Material();\nmaterial.setDiffuseTexture(videoTexture);\n\nQuad quad = new Quad(10, 10);\nquad.setMaterials(Arrays.asList(material));\n\nvideoTexture.play();", "language": "java" } ] } [/block] Supported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, `Uri.parse("http://example.org/myvideo.mp4")`. To load an asset as video, use URI's of the form `file:///android_asset/[asset-name]`. [block:api-header] { "type": "basic", "title": "360 Video" } [/block] Spherical videos that surround the user can be displayed via VideoTexture as well. To do this, simply assign the VideoTexture to the Scene's background, as shown below. [block:code] { "codes": [ { "code": "VideoTexture videoTexture = new VideoTexture(context, uri);\nscene.setBackgroundTexture(videoTexture);", "language": "java" } ] } [/block] [block:api-header] { "title": "Alpha Video (Chroma Key Filtering)" } [/block] Viro supports rendering partially transparent video over any VR, AR, or 3D scene. For AR scenes in particular, this enables "hologram" type experiences like [Will.I.Am on CNN](https://www.youtube.com/watch?v=68-bjoF1Vdk) or [Princess Leia in Star Wars](https://www.youtube.com/watch?v=tf-1xeE3zzE). Alpha video works via "chroma key filtering". Chroma key filtering removes (makes transparent) all colors from a video that are within an epsilon range of a target color. This technique is useful when rendering "green screen" or "blue screen" videos, as is commonly seen in newscasting and motion pictures. The videos in their raw form look something like the image below. [block:image] { "images": [ { "image": [ "https://files.readme.io/4631b63-alpha.png", "alpha.png", 1546, 1012, "#04d304" ] } ] } [/block] The code below shows how to enable chroma-key filtering, by invoking [setChromaKeyFilteringColor(int)][1] and [setChromaKeyFilteringEnabled(bool)][2] on the [Material][3] that houses the VideoTexture. [1]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html#setChromaKeyFilteringColor(int) [2]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html#setChromaKeyFilteringEnabled(boolean) [3]: https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html [block:code] { "codes": [ { "code": "\n// Load the video\nVideoTexture videoTexture = new VideoTexture(mViroView.getViroContext(), Uri.parse(\"URL to Video\"));\n \n// Place the video in a Material\nfinal Material material = new Material();\nmaterial.setDiffuseTexture(videoTexture);\n\n// Enable chroma-key filtering on the Material\nmaterial.setChromaKeyFilteringColor(Color.GREEN);\nmaterial.setChromaKeyFilteringEnabled(true);\n\n// Create a Quad on which the video will be displayed\nQuad surface = new Quad(4, 4, 0, 0, 1, 1);\nsurface.setMaterials(Arrays.asList(material));\n\n// Create a Node in which to house the Quad with the video\nNode node = new Node();\nnode.setPosition(new Vector(0, 0, -3));\nnode.setGeometry(surface);\n\n// Add the Node to the Scene\nscene.getRootNode().addChildNode(node);\n\n// Finally, play the video\nvideoTexture.play();", "language": "java" } ] } [/block] [block:api-header] { "type": "basic", "title": "Manipulating Video" } [/block] VideoTexture also controls the playback of the video. You can: * Adjust volume via the ```volume``` property * Mute the video via the ```muted``` property * Make the video loop by setting the ```loop``` property * Pause and play the video * Seek the video to a specific time in seconds by invoking the ```seekToTime(float)``` method You can also respond to various playback events by implementing a [PlaybackListener](https://developer.viromedia.com/virocore/reference/com/viro/core/VideoTexture.PlaybackListener.html).