Skip to content

Commit

Permalink
documenting chromatic prefab
Browse files Browse the repository at this point in the history
  • Loading branch information
Saffo, David committed Jan 9, 2024
1 parent 8bee2f6 commit cdfd278
Showing 1 changed file with 29 additions and 19 deletions.
48 changes: 29 additions & 19 deletions docs/guide/prefabs/chromatic.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,45 @@ outline: deep

## Overview

The color scale prefab provides utility functions for generating color scales and returning them in a variety of formats (hex, color3, material, etc.). This prefab can be used standalone or in conjunction with [d3-scale](https://d3js.org/d3-scale). Additionally, these functions implement [chroma.js](https://gka.github.io/chroma.js/) to provide a variety of predefined schemes like [color brewer](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3), or your own custom color maps. We are also working on a few schemes of our own to come out later.
The color scale prefab provides utility class and methods for generating color scales and returning them in a variety of formats (hex, color3, material, etc.). This prefab can be used standalone or in conjunction with [d3-scale](https://d3js.org/d3-scale). Additionally, these functions implement [chroma.js](https://gka.github.io/chroma.js/) to provide a variety of predefined schemes like [color brewer](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3), or your own custom color maps. We are also working on a few schemes of our own to come out later.

## Usage

``` js
//With createPlaneText() returns Mesh
anu.createPlaneText(name: string, options: {}, scene: Scene);

//With create() returns Mesh
anu.create('planeText', name: string, scene: Scene, options: {}, data: {});

//With bind() returns Selection
anu.bind('planeText', scene: Scene, options: {}, data: [{}]);
``` js
//returns list of color from scheme name or list of color hex codes
anu.ordinalChromatic(string | string[]).toColor3()

//With bind() from a Selection returns a new Selection
Selection.bind('planeText', options: {}, data: [{}]);
//returns function that accepts int 0-1 and returns corresponding color
anu.sequentialChromatic(string | string[]).toColor3()
```

## Options

| Property | Value | Default |
| ------------- | ------------- | ------------- |
| text | (string) text to be rendered | 'undefined' |
| size | (number) scaling factor to be baked into the vertices | 1 |
| opacity | (number) opacity value between 0 and 1 | 1 |
| color | (Color3) color value of the mesh material | Color3.White() |
| font | (json) json spec of the MSDF text font | roboto-standard.json |
| atlas | (png) texture atlas of the MSDF text font | roboto-standard.png |

## Color and Material Formats

| Method | Return |
| ------------- | ------------- |
| toColor3(steps) | returns type of [color3](https://doc.babylonjs.com/typedoc/classes/BABYLON.Color3) length of steps or scheme by default |
| toColor4(steps) | returns type of [color3](https://doc.babylonjs.com/typedoc/classes/BABYLON.Color4) length of steps or scheme by default |
| toStandardMaterial(steps) | returns type of [standardMaterial](https://doc.babylonjs.com/typedoc/classes/BABYLON.StandardMaterial) length of steps or scheme by default |
| toPBRMaterialRough(steps) | returns type of [PBRMetallicRoughnessMaterial](https://doc.babylonjs.com/typedoc/classes/BABYLON.PBRMetallicRoughnessMaterial) length of steps or scheme by default |
| toPBRMaterialGlossy(steps) | returns type of [PBRSpecularGlossinessMaterial](https://doc.babylonjs.com/typedoc/classes/BABYLON.PBRSpecularGlossinessMaterial) length of steps or scheme by default |

<!--
## Predefined Schemes
### Ordinal Schemes
### Sequential Schemes
## Examples
### Ordinal Examples
``` js
let options = {
text: 'Hello World',
Expand All @@ -51,3 +59,5 @@ anu.createPlaneText('text2d', options, scene);
height="400"
src="/anu/examples.html?example=text">
</iframe>
### Sequential Examples -->

0 comments on commit cdfd278

Please sign in to comment.