# Quickstart

To render a glb/glTF as an image it's as simple as adding *<https://www.flowkit.app/s/demo/r/>* as a prefix to your URL.

For example:

If this is the URL to the glb/glTF file you want to render:

> <https:/raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf>

Then this will be the new URL for the rendered image:

> <https://www.flowkit.app/s/demo/r/https:/raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf>


# API Key

How to set your API key

By default the API key used is *demo* which results in the following url:

> <https://www.flowkit.app/s/demo/r/\\>\<URL\_TO\_YOUR\_FILE>

The generic URL looks like this:

> <https://www.flowkit.app/s/\\>\<API\_KEY>/r/\<URL\_TO\_YOUR\_FILE>


# Image settings

How to change the retrieved picture

To customize image settings, insert them between `/r/` and `/u/` in the URL, as shown below:

> <https://www.flowkit.app/s/\\>\<API\_KEY>/r/\<IMAGE\_SETTINGS>/u/\<URL\_TO\_YOUR\_FILE>

For example:

> <https://www.flowkit.app/s/demo/r/rv:15,rh:-45/u/https:/raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf>

All image settings can be set as a comma (,) separated key-value list in the following format:

> \<KEY>:\<VALUE>

You can find a list of all possible image settings below

## Image Params

### rv - rotation vertical - default: 0

Controls how far the camera is rotated up or down.

Examples:

* rv:45 means the camera is rotated 45 degrees up
* rv:-70 means the camera is rotated -70 degrees down, showing the object from below

### rh - rotation horizontal - default: 0

Controls how far the camera is rotated to the left or right.

Examples:

* rh:45 means the camera is rotated 45 degrees to the right
* rh:-70 means the camera is rotated -70 degrees to the left

### s - size - default: 1024

Set the resolution of the returned image. Images are always square.

Examples:

* s:256 means the returned image has a resolution of 256x256 pixels

### v - variant

Set the variant name that should be rendered.

[About glTF Material Variants](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_variants/README.md)

Examples:

* v:street means the returned image will be off the glTF/glb with variant name 'street'

## Additional information

The returned image has by default the type **png**.&#x20;


# CodeSandbox

Code snippets to get started

[GLB 2 PNG minimal demo (vanilla HTML and Javascript)](https://codesandbox.io/p/sandbox/flowkit-glb2png-minimal-demo-prkp7p)


# FAQ

Frequently asked questions

<details>

<summary>How do I set the background color of an image?</summary>

Since all pictures are transparent, you can change the background by setting a background color on the HTML IMG tag.

</details>

<details>

<summary>Why is the maximum resolution locked at 1024?</summary>

The free/demo renderings are locked to a maximum resolution of 1024x1024 pixels. If you require a higher resolution please get in touch with us.

</details>

<details>

<summary>Why do all images have a <em>flowkit.app</em> watermark?</summary>

The free/demo renderings have a watermark for marketing reasons, enabling us to provide a free version. If you want a higher resolution please get in touch with us.

</details>

If you have any questions not covered in the FAQ don't hesitate to send us a one-liner to <hello@flowkit.app>