Intro
In order to understand this section you must complete the Uploading Cloud Assets tutorial. In this tutorial we will show you how to use image based cloud assets in Rete, Blockly and TypeScript editors to create textures and apply them to meshes.
Be aware that to use assets you need to be signed-up to our cloud platform. You can sign-up here.
Please upload dogs-small.jpeg image to your project as a cloud asset.
Image of dogs that we will use to create a texture and apply it on a 3D mesh
Working with image assets is similar to working with 3D assets. You need to load the file first, then use appropriate methods to convert that file to something that algorithms of bitbybit can understand. In this case we will be loading a 2D image, which will be used to create a texture. That texture will then be applied to the material and material will be set to the mesh.
Using 2D cloud assets
We will not explain how to find each component in this tutorial, but will provide concise explanation of the steps involved. The steps apply to all of the editors. Then we will give you the full script examples in 3 embedded editors for Rete, Blockly and TypeScript. Remember that you can always find the right component by tracing the path indicated on each component.
First thing we need to do is to load the image file itself that we have uploaded to our assets. This is done via the assets category get file method and will load the file into the browsers memory.
Now that you have the file we will need to create an object URL out of it so that we could reference the contents of the file via generated URL to BabylonJS texture component. If you want to learn more how object urls work you can check this documentation page from mozilla MDN Web Docs. In short, object url is a reference to the file that is stored in the browsers memory. If you would share that url with something else, they could not open it - only your browser knows what it represents, because only your browser generated it.
The output of object URL is then used as an input for url property of the texture. This texture gets applied to the material and material is set to the mesh. To create meshes we use very basic BabylonJS mesh builder and make a box and a plane. These do not require us to use the draw commands, because BabylonJS already knows how to render them on the screen. We change the location and rotation for these meshes to position them well in the scene. After that is done we apply the material to both of them. And that is it, these steps describe the basic process of loading an image and applying it to a mesh.
Other things that happen in these scripts, but are not related to the core process of loading the image are - we create a skybox, a light and enable shadows. These are not necessary to load the image, but they make the scene look nicer.
Implementation in Rete editor
If you'll see the other 2 editors you will realize that Rete gives you the code which is closest to what was explained in the previous paragraphs. This is because Rete hides quite a lot of complexity related to asynchronous code, while Blockly is intentionally left to match the code structure of the TypeScript editor.
Implementation in Blockly editor
Blockly editor is a bit more involved than Rete, but the core principles are the same. Pay attention to how we handle asynchronous code. First we create the context from the Time category and in it we can use Await blocks. This makes asynchronous code run in a synchronous manner and thus makes it easier to understand.
Implementation in TypeScript editor
TypeScript gives you the freedom to organize the code in a way you see fit, but you will see that the code resembles the algorithms that are used in the visual editors. We did use additional functions to make it all more readable for programmers.