{"_id":"59bc03d31d2d8d001a344591","category":{"_id":"59bc03d31d2d8d001a344583","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":6,"slug":"api-reference","title":"API Reference"},"user":"579fce4e1435850e00dfbbbb","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.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":"Many Viro components take an array of materials. A material is a way to describe visual properties  that is applied to an object which affects the display of that object. For example, applying a black or gray material to a rock object will make the rock look as it should. For more information on Materials see our [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 diffuseColor 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\\nFalse if this material shouldn't factor in depth. Set to true by default.\",\n    \"16-1\": \"**ReactPropTypes.bool**\\n\\nFalse if this material shouldn't factor in depth. Set to true by default.\",\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 extent 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"}
Many Viro components take an array of materials. A material is a way to describe visual properties that is applied to an object which affects the display of that object. For example, applying a black or gray material to a rock object will make the rock look as it should. For more information on Materials see our [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 diffuseColor 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\nFalse if this material shouldn't factor in depth. Set to true by default.", "16-1": "**ReactPropTypes.bool**\n\nFalse if this material shouldn't factor in depth. Set to true by default.", "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 extent 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]