{"_id":"5a06037134873d0010b39223","category":{"_id":"5a06037134873d0010b39204","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":5,"slug":"api-reference","title":"API Reference"},"user":"579fce4e1435850e00dfbbbb","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-24T18:56:29.359Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":18,"body":"Materials are the set of shading attributes that define the appearance of a geometry's surfaces when rendered. Each object in a scene can be assigned one or more materials. All UI elements, and most basic 3D models, utilize only one material. Complex 3D objects, represented by ```<Viro3DObject>```, typically have multiple materials, one for each defined mesh surface in the 3D\nobject.\n \nThe final color of each pixel on a surface is determined by both the Material attributes and the parameters of each ```<ViroLight>``` in the Scene. For more information refer to the  [Lighting and Materials Guide](http://viro.readme.io/docs/3d-scene-lighting).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"static createMaterials(materials:{[key:string]: any})\",\n    \"0-0\": \"Create materials is a static takes a key/value of objects that conform to ```MaterialPropTypes```. They key is a string that represents a **unique** name for the material while value is a list of properties that align with ```MaterialPropTypes```\\n\\nExample showing the creation of two materials:\\n\\n```\\nViroMaterials.createMaterials({\\n  earth: {\\n    shininess: 2.0,\\n    lightingModel: \\\"Lambert\\\",\\n    diffuseTexture: require('./res/earth_texture.jpg'),\\n  },\\n  moon: {\\n    shininess: 2.0,\\n    lightingModel: \\\"Constant\\\",\\n    diffuseTexture: require('./res/moon_texture.jpg'),\\n  },\\n});\\n```\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Material Prop Types\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-0\": \"**ambientOcclusionColor**\",\n    \"3-0\": \"**diffuseColor**\",\n    \"5-0\": \"**diffuseTexture**\",\n    \"6-0\": \"**lightingModel**\",\n    \"11-0\": \"**readsFromDepthBuffer**\",\n    \"12-0\": \"**shininess**\",\n    \"13-0\": \"**specularTexture**\",\n    \"16-0\": \"**writesToDepthBuffer**\",\n    \"0-1\": \"**ColorPropType**\\n\\nThe color of the text. The default text color is white.\\n\\nValid color formats are:\\n\\n  * '#f0f' (#rgb)\\n  * '#f0fc' (#rgba)\\n  * '#ff00ff' (#rrggbb)\\n  * '#ff00ff00' (#rrggbbaa)\\n  * 'rgb(255, 255, 255)'\\n  * 'rgba(255, 255, 255, 1.0)'\\n  * 'hsl(360, 100%, 100%)'\\n  * 'hsla(360, 100%, 100%, 1.0)'\\n  * 'transparent'\\n  * 'red'\\n  * 0xff00ff00 (0xrrggbbaa)\",\n    \"3-1\": \"**ColorPropType**\\n\\nThe color of this material. Note: Either diffuseColor or diffuseTexture can be specified. Both **cannot** be specified.\\n\\nValid color formats are:\\n\\n  * '#f0f' (#rgb)\\n  * '#f0fc' (#rgba)\\n  * '#ff00ff' (#rrggbb)\\n  * '#ff00ff00' (#rrggbbaa)\\n  * 'rgb(255, 255, 255)'\\n  * 'rgba(255, 255, 255, 1.0)'\\n  * 'hsl(360, 100%, 100%)'\\n  * 'hsla(360, 100%, 100%, 1.0)'\\n  * 'transparent'\\n  * 'red'\\n  * 0xff00ff00 (0xrrggbbaa)\",\n    \"5-1\": \"**ReactPropTypes.any**\\n\\nA texture iamge which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"6-1\": \"**ReactPropTypes.oneOf(['Phong', 'Blinn', 'Lambert', 'Constant'])**\\n\\nLighting that applies to this material. Default is ```Blinn```.\",\n    \"11-1\": \"**ReactPropTypes.bool**\\n\\nViro tracks the depth of each object in the scene with a depth buffer. This way the renderer can determine which surfaces are on top of (occlude) others from the point of view of the user. \\n\\nTrue if surfaces using this material should read from the depth buffer. By doing so, the surface first checks if any other surface is closer to the user: if so, the surface will not appear (it is occluded). Defaults to true.\\n\\nSet to false for advanced usage only.\",\n    \"16-1\": \"**ReactPropTypes.bool**\\n\\nViro tracks the depth of each object in the scene with a depth buffer. This way the renderer can determine which surfaces are on top of (occlude) others from the point of view of the user. \\n\\nSet this to true if surfaces using this material should write to the depth buffer. By doing so, any surfaces that *read* from the depth buffer will only appear if they are at a shallower depth than this material (e.g. if they are closer to the user). Defaults to true. \\n\\nSet to false for advanced usage only.\",\n    \"13-1\": \"**ReactPropTypes.any**\\n\\nA specular texture image which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"12-1\": \"**ReactPropTypes.number**\\n\\nThe sharpness of specular highlights, which only applies if there is a ```specularTexture```.\",\n    \"2-0\": \"**cullMode**\",\n    \"2-1\": \"**ReactPropTypes.oneOf(['None', 'Back', 'Front'])**\\n\\nSpecifies whether or not the object that applies this material renders all surfaces or only surfaces whose normal is facing the user. By default, **Back** is enabled.\",\n    \"10-0\": \"**normalTexture**\",\n    \"10-1\": \"**ReactPropTypes.any**\\n\\nA normal map texture which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nNormal maps define the orientation of the surface at each point for use in lighting. Viro treats the R, G, and B components of each pixel in the normal map as the X, Y, and Z components of a surface normal vector. Normal maps are often used to simulate rough surfaces or to add details to otherwise smooth surfaces.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"4-0\": \"**diffuseIntensity**\",\n    \"14-0\": \"**wrapS**\",\n    \"15-0\": \"**wrapT**\",\n    \"8-0\": \"**minificationFilter**\",\n    \"7-0\": \"**magnificationFilter**\",\n    \"9-0\": \"**mipFilter**\",\n    \"1-0\": \"**bloomThreshold**\",\n    \"4-1\": \"**PropTypes.number**\\n\\nModulates the impact of the diffuseTexture and diffuseColor on the overall appearance of the surface. Ranges from 0 to 1. \\n\\nSetting to 0 implies the diffuseTexture and diffuseColor will have no influence on the overall appearance of the surface.\\n\\nDefault value is 1.0.\",\n    \"8-1\": \"**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\\n\\nThe filter to use when the texture image needs to be rendered onto a surface *smaller* than the image. This occurs, for example, when rendering a textured surface very far away from the camera.\\n\\n'Nearest' filtering returns the color from the texel nearest to the coordinates being sampled. \\n\\n'Linear' filtering samples the texels in the neighborhood of the coordinate and linearly interpolates between them.\\n\\nDefault is 'Linear'.\",\n    \"7-1\": \"**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\\n\\nThe filter to use when the texture image needs to be rendered onto a surface *larger* than the image. This occurs, for example, when rendering a textured surface very close to the camera.\\n\\n'Nearest' filtering returns the color from the texel nearest to the coordinates being sampled. \\n\\n'Linear' filtering samples the texels in the neighborhood of the coordinate and linearly interpolates between them.\\n\\nDefault is 'Linear'.\",\n    \"1-1\": \"**PropTypes.number**\\n\\nBloom is an effect that makes surfaces appear to glow by applying a Gaussian blur and additive blend.\\n\\nThis value specifies at what 'brightness' the pixels of the surfaces using this material should start to bloom. Brightness is effectively the magnitude of the final color of a pixel (modified for the human eye: specifically it is the dot product of the final color with (0.2126, 0.7152, 0.0722)). \\n\\nFor example, if this property is set to 0.0, then all surfaces using this material will bloom. If this property is set to 1.0, then only those pixels of the surface whose brightness exceeds 1.0 (after lights are applied) will bloom.\",\n    \"9-1\": \"**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\\n\\nMipmapping increases rendering performance when rendering textures at small sizes. When used, Viro will create scaled down versions of the texture, and during rendering will sample the version that's closest to the size of the surface being rendered.\\n\\n'Nearest' filtering will return the color from the mip-level closest to the size of the rendered surface.\\n\\n'Linear' filtering will return the color found by interpolating between the two nearest mip-levels.\",\n    \"14-1\": \"**PropTypes.oneOf(['Clamp', 'Repeat', 'Mirror'])**\\n\\nDetermines what happens when the texture coordinates extend outside the [0.0, 1.0] in the X direction of the image.\\n\\nClamp: texture coordinates are clamped between 0.0 and 1.0.\\n\\nRepeat: texture coordinates repeat by going back to 0.0 after exceeding 1.0. Essentially this means the renderer only uses the fractional part of the texture coordinates when sampling.\\n\\nMirror: Similar to repeat, but the range reverses each time the limit is exceeded. E.g. from 0.0 to 1.0, then 1.0 to 0.0, then 0.0 to 1.0, etc.\",\n    \"15-1\": \"**PropTypes.oneOf(['Clamp', 'Repeat', 'Mirror'])**\\n\\nDetermines what happens when the texture coordinates extend outside the [0.0, 1.0] range in the Y direction of the image.\\n\\nClamp: texture coordinates are clamped between 0.0 and 1.0.\\n\\nRepeat: texture coordinates repeat by going back to 0.0 after exceeding 1.0. Essentially this means the renderer only uses the fractional part of the texture coordinates when sampling.\\n\\nMirror: Similar to repeat, but the range reverses each time the limit is exceeded. E.g. from 0.0 to 1.0, then 1.0 to 0.0, then 0.0 to 1.0, etc.\"\n  },\n  \"cols\": 2,\n  \"rows\": 17\n}\n[/block]","excerpt":"","slug":"materials","type":"basic","title":"ViroMaterials"}
Materials are the set of shading attributes that define the appearance of a geometry's surfaces when rendered. Each object in a scene can be assigned one or more materials. All UI elements, and most basic 3D models, utilize only one material. Complex 3D objects, represented by ```<Viro3DObject>```, typically have multiple materials, one for each defined mesh surface in the 3D object. The final color of each pixel on a surface is determined by both the Material attributes and the parameters of each ```<ViroLight>``` in the Scene. For more information refer to the [Lighting and Materials Guide](http://viro.readme.io/docs/3d-scene-lighting). [block:api-header] { "type": "basic", "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "static createMaterials(materials:{[key:string]: any})", "0-0": "Create materials is a static takes a key/value of objects that conform to ```MaterialPropTypes```. They key is a string that represents a **unique** name for the material while value is a list of properties that align with ```MaterialPropTypes```\n\nExample showing the creation of two materials:\n\n```\nViroMaterials.createMaterials({\n earth: {\n shininess: 2.0,\n lightingModel: \"Lambert\",\n diffuseTexture: require('./res/earth_texture.jpg'),\n },\n moon: {\n shininess: 2.0,\n lightingModel: \"Constant\",\n diffuseTexture: require('./res/moon_texture.jpg'),\n },\n});\n```" }, "cols": 1, "rows": 1 } [/block] [block:api-header] { "type": "basic", "title": "Material Prop Types" } [/block] [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-0": "**ambientOcclusionColor**", "3-0": "**diffuseColor**", "5-0": "**diffuseTexture**", "6-0": "**lightingModel**", "11-0": "**readsFromDepthBuffer**", "12-0": "**shininess**", "13-0": "**specularTexture**", "16-0": "**writesToDepthBuffer**", "0-1": "**ColorPropType**\n\nThe color of the text. The default text color is white.\n\nValid color formats are:\n\n * '#f0f' (#rgb)\n * '#f0fc' (#rgba)\n * '#ff00ff' (#rrggbb)\n * '#ff00ff00' (#rrggbbaa)\n * 'rgb(255, 255, 255)'\n * 'rgba(255, 255, 255, 1.0)'\n * 'hsl(360, 100%, 100%)'\n * 'hsla(360, 100%, 100%, 1.0)'\n * 'transparent'\n * 'red'\n * 0xff00ff00 (0xrrggbbaa)", "3-1": "**ColorPropType**\n\nThe color of this material. Note: Either diffuseColor or diffuseTexture can be specified. Both **cannot** be specified.\n\nValid color formats are:\n\n * '#f0f' (#rgb)\n * '#f0fc' (#rgba)\n * '#ff00ff' (#rrggbb)\n * '#ff00ff00' (#rrggbbaa)\n * 'rgb(255, 255, 255)'\n * 'rgba(255, 255, 255, 1.0)'\n * 'hsl(360, 100%, 100%)'\n * 'hsla(360, 100%, 100%, 1.0)'\n * 'transparent'\n * 'red'\n * 0xff00ff00 (0xrrggbbaa)", "5-1": "**ReactPropTypes.any**\n\nA texture iamge which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "6-1": "**ReactPropTypes.oneOf(['Phong', 'Blinn', 'Lambert', 'Constant'])**\n\nLighting that applies to this material. Default is ```Blinn```.", "11-1": "**ReactPropTypes.bool**\n\nViro tracks the depth of each object in the scene with a depth buffer. This way the renderer can determine which surfaces are on top of (occlude) others from the point of view of the user. \n\nTrue if surfaces using this material should read from the depth buffer. By doing so, the surface first checks if any other surface is closer to the user: if so, the surface will not appear (it is occluded). Defaults to true.\n\nSet to false for advanced usage only.", "16-1": "**ReactPropTypes.bool**\n\nViro tracks the depth of each object in the scene with a depth buffer. This way the renderer can determine which surfaces are on top of (occlude) others from the point of view of the user. \n\nSet this to true if surfaces using this material should write to the depth buffer. By doing so, any surfaces that *read* from the depth buffer will only appear if they are at a shallower depth than this material (e.g. if they are closer to the user). Defaults to true. \n\nSet to false for advanced usage only.", "13-1": "**ReactPropTypes.any**\n\nA specular texture image which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "12-1": "**ReactPropTypes.number**\n\nThe sharpness of specular highlights, which only applies if there is a ```specularTexture```.", "2-0": "**cullMode**", "2-1": "**ReactPropTypes.oneOf(['None', 'Back', 'Front'])**\n\nSpecifies whether or not the object that applies this material renders all surfaces or only surfaces whose normal is facing the user. By default, **Back** is enabled.", "10-0": "**normalTexture**", "10-1": "**ReactPropTypes.any**\n\nA normal map texture which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nNormal maps define the orientation of the surface at each point for use in lighting. Viro treats the R, G, and B components of each pixel in the normal map as the X, Y, and Z components of a surface normal vector. Normal maps are often used to simulate rough surfaces or to add details to otherwise smooth surfaces.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "4-0": "**diffuseIntensity**", "14-0": "**wrapS**", "15-0": "**wrapT**", "8-0": "**minificationFilter**", "7-0": "**magnificationFilter**", "9-0": "**mipFilter**", "1-0": "**bloomThreshold**", "4-1": "**PropTypes.number**\n\nModulates the impact of the diffuseTexture and diffuseColor on the overall appearance of the surface. Ranges from 0 to 1. \n\nSetting to 0 implies the diffuseTexture and diffuseColor will have no influence on the overall appearance of the surface.\n\nDefault value is 1.0.", "8-1": "**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\n\nThe filter to use when the texture image needs to be rendered onto a surface *smaller* than the image. This occurs, for example, when rendering a textured surface very far away from the camera.\n\n'Nearest' filtering returns the color from the texel nearest to the coordinates being sampled. \n\n'Linear' filtering samples the texels in the neighborhood of the coordinate and linearly interpolates between them.\n\nDefault is 'Linear'.", "7-1": "**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\n\nThe filter to use when the texture image needs to be rendered onto a surface *larger* than the image. This occurs, for example, when rendering a textured surface very close to the camera.\n\n'Nearest' filtering returns the color from the texel nearest to the coordinates being sampled. \n\n'Linear' filtering samples the texels in the neighborhood of the coordinate and linearly interpolates between them.\n\nDefault is 'Linear'.", "1-1": "**PropTypes.number**\n\nBloom is an effect that makes surfaces appear to glow by applying a Gaussian blur and additive blend.\n\nThis value specifies at what 'brightness' the pixels of the surfaces using this material should start to bloom. Brightness is effectively the magnitude of the final color of a pixel (modified for the human eye: specifically it is the dot product of the final color with (0.2126, 0.7152, 0.0722)). \n\nFor example, if this property is set to 0.0, then all surfaces using this material will bloom. If this property is set to 1.0, then only those pixels of the surface whose brightness exceeds 1.0 (after lights are applied) will bloom.", "9-1": "**ReactPropTypes.oneOf(['Nearest', 'Linear'])**\n\nMipmapping increases rendering performance when rendering textures at small sizes. When used, Viro will create scaled down versions of the texture, and during rendering will sample the version that's closest to the size of the surface being rendered.\n\n'Nearest' filtering will return the color from the mip-level closest to the size of the rendered surface.\n\n'Linear' filtering will return the color found by interpolating between the two nearest mip-levels.", "14-1": "**PropTypes.oneOf(['Clamp', 'Repeat', 'Mirror'])**\n\nDetermines what happens when the texture coordinates extend outside the [0.0, 1.0] in the X direction of the image.\n\nClamp: texture coordinates are clamped between 0.0 and 1.0.\n\nRepeat: texture coordinates repeat by going back to 0.0 after exceeding 1.0. Essentially this means the renderer only uses the fractional part of the texture coordinates when sampling.\n\nMirror: Similar to repeat, but the range reverses each time the limit is exceeded. E.g. from 0.0 to 1.0, then 1.0 to 0.0, then 0.0 to 1.0, etc.", "15-1": "**PropTypes.oneOf(['Clamp', 'Repeat', 'Mirror'])**\n\nDetermines what happens when the texture coordinates extend outside the [0.0, 1.0] range in the Y direction of the image.\n\nClamp: texture coordinates are clamped between 0.0 and 1.0.\n\nRepeat: texture coordinates repeat by going back to 0.0 after exceeding 1.0. Essentially this means the renderer only uses the fractional part of the texture coordinates when sampling.\n\nMirror: Similar to repeat, but the range reverses each time the limit is exceeded. E.g. from 0.0 to 1.0, then 1.0 to 0.0, then 0.0 to 1.0, etc." }, "cols": 2, "rows": 17 } [/block]