(3D) Build CSR Specifications¶
This is an extension of the current build system, targeted for the client-side rendering portion of the build. The specification file is meant to be automatically exported from the CSR Editor, as it will ensure parity between the editor and the final CSR view.
{
// the main assets section, which contain the
"assets": {
"meshes": {
"target": "meshes/base.glb",
"scene": "scenes/scene.glb"
},
"materials": {
// for each mesh, there's a list of possible materials
"meshName": {
// list of materials for the mesh
"materialName": {
// list of colors for the given material
"colorName": {
// textures point to the relative path inside build
"texture": "textures/texture.jpeg",
// numerical value or string, depends on property
"property": number or string
}
},
// if a mesh has no material in the build, or the mesh
// simply is not mentioned in the build, a default fallback
// material is automatically created, and can be edited,
// just like any specific material mentioned above
"default": {
"map": "textures/map.jpeg"
}
}
},
// list of animations, must be present inside the glTF file
// that is exported
"animations": [
"animation1",
"animation2"
],
// the animation that is played back when the everything
// is finished loading
"startingAnimation": "animation1" || null,
// boolean to see if the animation loops or not
"animationLoops": false,
// path to a background HDRI, used as an environment map
"background": "background.hdr" || null,
// boolean that determines whether the HDR background is also
// the background for the scene as well
"useEnvironmentAsBackground": true,
// the value of the color to be used for the background
// only active if the previous property is set to "false"
"backgroundColor": "#ff0000" || null,
// a simple to create mesh bundles, useful if there are mismatches
// between the build parts and meshes or their respective names.
// For example, if a watch has a part "bracelet" in build, but
// in practice it includes the meshes for the bolts, handle and
// bracelet, the specification could go as follows:
"parts": {
"bracelet": [
"bracelet",
"handle",
"bolts"
]
}
// CSR will match the names inside a mesh group to the respective
// mesh names, so they will need to match.
// this rule is enforced automatically in the Editor
},
// this section contains all the information for letters placement.
// when patches are added to both CSR and the Editor, their
// information will be added to the specification
"personalization": {
// the scale of each letter
"initialsSize": 1.0,
// the thickness of the 3D text
"initialsThickness": 0.01,
// the list of initials, ordered by their index in the text.
// includes the position and rotation of each one
"initialsPlacements": {
"0": {
"position": [ -1, 0, 0 ],
"rotation": [ 0, 0, 0 ]
},
"1": {
"position": [ 1, 0, 0 ],
"rotation": [ 0, 0, 0 ]
}
},
// lists all the available textures for the patches.
// relies on a "patches_placement" mesh to exist within
// the mesh substructure
"patches": [
"textures/patches_1.png",
"textures/patches_2.png"
],
// lists all the materials that can be applied to the initials,
// follows a similar logic to the materials for the meshes
"materials": {
// list of materials
"letterMaterialName": {
// list colors for the given material
"letterColorName": {
// only has properties, function similarly
// to materials for meshes
"property": number or string
}
}
},
// lists the name of the fonts that were added.
// these are stored inside their own directory
"fonts": [
"Roboto-Black"
]
},
// the camera section condenses all the properties to be
// applied to the viewport camera inside the CSR view,
// including specific constraints
"camera": {
// position in 3D space that serves as the pivot for the rotation,
// as well as a fallback when changing views
"target": {
"x": 0.24,
"y": 7.14,
"z": 0
},
// the minimum horizontal angle allowed
"minHorAngle": 0,
// the maximum horizontal angle allowed
"maxHorAngle": 90,
// the same as the previous properties, only in the vertical axis
"minVerAngle": 0,
"maxVerAngle": 89,
// the base horizontal angle to be applied when first loading
"horizontalAngle": 18.5,
// the base vertical angle to be applied when first loading
"verticalAngle": 12.8,
// the base distance of the camera to the target
"distance": 20,
// the minimum distance allowed to be scrolled to
"minDistance": 10,
// the maximum distance allowed to be scrolled to
"maxDistance": 50,
// the field-of-view for the camera
"fov": 41
},
// the lighting setup can be controlled with a high degree of
// customizability, with each light having several controlable
// parameters
"lights": {
// list of all the lights
"light0": {
// specifies the type of light it is
"type": "point",
// the color tint for the light
"color": "#ffffff",
// determines how bright the light is, ranges from 0 to Infinity
"intensity": 0.75,
// position for the light
"position": [ 1, 2, 3 ],
// rotation for the light, if the light contains that property
"rotation": [ 0, 0, 0 ],
// if light can cast shadxow, this option can be disabled
// (on by default)
"castShadow": true
},
"light1": {
// spotlights and directional contain specific properties,
// with some overlap unless directly mentioned
"type": "spotlight",
"color": "#ffffff",
"intensity": 1,
"position": [ 3, 4, 5 ],
"rotation": [ 0, 0, -10 ],
// how long does the spotlight illuminate, doesn't apply
// to directional lights
"distance": 10,
// spotlight and directional lights have a target,
// which serves to pinpoint where the direction
// they are illuminating
"target": [ 0, 0, 0 ],
"castShadow": true,
// penumbra controls the shadow falloff, doesn't apply
// to directional lights
"penumbra": 0
},
"light2": {
// hemisphere lights simulate a sky, with a color coming
// from above, and another from below (ground color)
"type": "hemisphere",
// in hemisphere lights, the controls the sky color
"color": "#ffffff",
// the ground color abstracts the bounce light from the floor
"groundColor": "#ffffff",
"intensity": 0.75,
// the position controlls the threshold between sky and ground
"position": [ 0, 0, 0 ],
},
"light3": {
// the rect area light simulates a rectangulare area, with
// an even fill of light
"type": "rectArea",
"color": "#ffffff",
"intensity": 0.75,
"position": [ 3, 4, 5 ],
"rotation": [ 0, 0, -10 ],
// these properties control the scale (width and height)
// of the rectangle that emanates light
"width": 3,
"height": 2
},
},
// shadows control not only the properties of shadows themselves
// but also the specifics of a potential shadow plane
"shadows": {
// the position, rotation and scale of the
// shadow plane in the scene
"position": [ 0, -1, 0 ],
"rotation": [ 0, 0, 0 ],
"scale": [ 5, 2 , 1 ],
// how opaque the shadow plane is
"opacity": 1,
// resolution of the lights shadow maps
"resolution": 1024,
// the texture for the shadow
"texture": "textures/shadow.png"
}
}