Scroll
Follow

How to use material overrides

Since the launch of Layar API 8.3 it is possible to use material overrides. This allows you to customise the look and feel of a model, e.g. the color of a car, without the need to make different copies of the model. This makes the whole experience more efficient, as the client would not have to download all the different versions of this model.

To view this in action, we have implemented an example and you can view it by scanning the page below using Layar v8.3 and above.

origional-sized.png

In this example, we made use of the new material overrides parameters to show different colours of a 3D car as well as the palette colours buttons. To export the models and the initial scheme we used the new blender add-on to export the l3d file of the model and define the position of both the car and the 3D buttons. 

Screen_Shot_2014-06-20_at_17.04.50.png

 Getting Started

 In order to create your own experience you need to create a Vision layer (You cannot use Creator at the moment to implement such an experience). To implement this example we created a script that outputs the following Json file :

{
    "layer": "demo",
    "errorString": "OK",
    "errorCode": 0,
    "hotspots": [
        {
            "object": {
                "url": "http://yourserver.com/button_background.png",
                "contentType": "image/png",
                "size": 0.1953125
            },
            "id": "button_background",
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": 0,
                    "z": 0
                },
                "scale": 0.884919
            },
            "anchor": {
                "referenceImage": "image"
            }
        },
        {
            "object": {
                "url": "http://yourserver.com/button.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#660000",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": 0.169724,
                    "z": 0
                },
                "scale": {
                    "y": 0.035359,
                    "x": 0.070718,
                    "z": 0.014144
                }
            },
            "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=660000&ambient=000000"
                }
            ],
            "anchor": {
                "referenceImage": "image"
            },
            "id": "color_red"
        },
        {
            "object": {
                "url": "http://yourserver.com/button.001.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#cccccc",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": -0.339448,
                    "z": 0
                },
                "scale": {
                    "y": 0.035359,
                    "x": 0.070718,
                    "z": 0.014144
                }
            },
            "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=cccccc&ambient=000000"
                }
            ],
            "anchor": {
                "referenceImage": "image"
            },
            "id": "color_white"
        },
        {
            "object": {
                "url": "http://yourserver.com/button.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#cc8700",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": 0.339448,
                    "z": 0
                },
                "scale": {
                    "y": 0.035359,
                    "x": 0.070718,
                    "z": 0.014144
                }
            },
            "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=cc8700&ambient=000000"
                }
            ],
            "anchor": {
                "referenceImage": "image"
            },
            "id": "color_yellow"
        },
        {
            "object": {
                "url": "http://yourserver.com/button.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#080808",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": -0.169724,
                    "z": 0
                },
                "scale": {
                    "y": 0.035359,
                    "x": 0.070718,
                    "z": 0.014144
                }
            },
            "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=080808&ambient=000000"
                }
            ],
            "anchor": {
                "referenceImage": "image"
            },
            "id": "color_black"
        },
        {
            "object": {
                "url": "http://yourserver.com/button.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#000066",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },
            "transform": {
                "translate": {
                    "y": -0.396022,
                    "x": 0,
                    "z": 0
                },
                "scale": {
                    "y": 0.035359,
                    "x": 0.070718,
                    "z": 0.014144
                }
            },
            "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=000066&ambient=000000"
                }
            ],
            "anchor": {
                "referenceImage": "image"
            },
            "id": "color_blue"
        },
        {
            "object": {
                "url": "http://yourserver.com/car.l3d",
                "override": {
                    "materials": [
                        {
                            "ambientColor": "#000000",
                            "materialId": "paint",
                            "diffuseColor": "#ffffff"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 4.5767556031545
            },
            "id": "body",
            "transform": {
                "translate": {
                    "y": 0,
                    "x": 0.003129,
                    "z": 0
                },
                "rotate": {
                    "angle": 90.00003,
                    "axis": {
                        "y": 0,
                        "x": 0,
                        "z": 1
                    }
                },
                "scale": 0.240378
            },
            "anchor": {
                "referenceImage": "image"
            }
        }
    ]
}

 

 Creating the colour palette buttons

The colour palette buttons are 3D objects. We have created one 3D model and assigned different colours to them using the override options:

 

 {
            "object": {
                "url": "http://yourserver.com/button.l3d",
                "override": {
                    "materials": [
                        {
                            "opacity": 1,
                            "ambientColor": "#000000",
                            "diffuseColor": "#660000",
                            "shininess": 50,
                            "materialId": "paint",
                            "specularColor": "#7f7f7f"
                        }
                    ]
                },
                "contentType": "model/vnd.layar.l3d",
                "size": 0.6276541501283646
            },

 Every button has an action attached that sets new values to parameter diffuse and ambient. Using this parameters the script generates a new Json file showing the updated version of the car.

 

  "actions": [
                {
                    "contentType": "application/vnd.layar.internal",
                    "uri": "layar://layername/?diffuse=000066&ambient=000000"
                }
            ],
Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk