#429 Add `CsrRenderedInitials`

[NFSS10]

-	-
Issue	Logic to handle the initials generation https://github.com/ripe-tech/ripe-sdk/issues/429
Dependencies	https://github.com/ripe-tech/ripe-sdk/pull/420
Decisions	- Create CsrRenderedInitials which handles the bread and meat of the CSR initials rendering. The interface is simple and easy to use so heavy logic is encapsulate on this class and the SDK should only use the public methods. - Setup layout elements that are going to be used by CsrRenderedInitials - Add loadTexture() to utils - Add applyOptions() to utils - Add heightMapToNormalMap() to utils - Add normalMapFromCanvas() to utils

Next steps:

• Support points so that we can have a curved plane mesh
• Optimize default values for better performance and a better size (currently the plane is very big)
• Use it in CSR Configurator

How to use:

1º Create a CsrRenderedInitials instance

const canvas = ...; // canvas element to be used to build the text
const displacementCanvas = ...; // canvas element to be used to build the text height map
const width = 1000; // width resolution in pixels
const height = 1000; // height resolution in pixels
const pixelRatio = window.devicePixelRatio; // pixel ratio
const options = {}; // set of optional options to customize pratically everything about this renderer

// creates a new CsrRenderedInitialsinstance
const initialsRenderer = new ripe.CsrRenderedInitials(canvas, displacementCanvas, width, height, pixelRatio, options );

2º Set the initials text

initialsRenderer .setInitials("Example");

3º You can use getMaterial() to obtain the material and apply to your own mesh, or you can use the getMesh() and obtain a plane mesh with everything working (recommended).

// recommended
const mesh = await initialsRenderer.getMesh();

// there is also the option to just use the material and you can then apply it where you want!
const material = await initialsRenderer.getMaterial();

4º When you want to stop using the CsrRenderedInitials and free resources, don't forget to call destroy()

initialsRenderer.destroy();

More info

You can apply textures to the initials text with the following methods:

await initialsRenderer.setBaseTexture("path/to/diffuse.png");
await initialsRenderer.setDisplacementTexture("path/to/height.png"),

You can update the initials renderer state whenever you want by calling updateOptions()

await initialsRenderer.updateOptions(options);

Result example

https://user-images.githubusercontent.com/22588915/191307600-30631268-6776-4a40-8be0-f82e76e2f7f5.mp4

Small comparison for the normal map generation step

With normal map generation:

No normal map generation: