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 cloud assets in Rete, Blockly and TypeScript editors.
We assume that you have BoomBox.glb and CalmCup.step uploaded to your project. If you do not have them, please refer to the previous section.
Using cloud assets in Rete
Loading assets to Rete editor is quite simple. In this tutorial we are not going to give a step by step instruction on how to find all of the components seen in the script below. Each component contains a path indicator that represents the path it takes to find it. The most important component that loads cloud assets can be found using this path:
"Asset" -> "get" -> "cloud file"
Notice that in local assets you used the name of the asset itself to load it and not the file name, while here with cloud assets we must indicate exact file name with it's extension before we load it.
There are also few things to note about the fact that because glb asset is the mesh, Rete can change its location only when working with a referenced BabylonJS Mesh. Components that deal with BabylonJS meshes in "Babylon" category do not clone the mesh at each step. This means that editing experience of such a mesh can be a bit different and "unusual" than that of OCCT geometry. This is done for performance reasons. If you want to work with cloned mesh you can use "Babylon" -> "Mesh" -> "edit" -> "clone" component.
When loading both glb and step assets we use the same initial component, but then things diverge. Glb file is interpreted by BabylonJS IO component while step file is interpreted by OCCT IO component. Glb is turned into a mesh instantly while Step needs to be processed and meshed by OCCT. We also scale and transform the shape in the process before drawing it.
In this example we also added skybox, a light and enabled the shadows. We also create a ground from a circle face. All of these steps are not necessary to load the assets, but they make the scene look nicer. You can ignore these components if you want.
Click Run button to see the result of this script. After computation finsihes click menu button with two arrows to swap the canvas and enter 3D environment.
Using cloud assets in Blockly
As with Rete we are not going to explain how to build this script step by step. We will only explain the core principles. Again there are some non-essential parts here that create the same skybox and directional light with the ground.
You may notice that Blockly script feels quite a bit more involved than that of Rete. That is because Rete hides quite a lot of complexity related to asynchronous code, while Blockly is intentionally left to match real programming language experience. This is done so that you could more easily transition from Blockly to TypeScript and learn fundamental concepts in this visual environment, but also to have more power to write real-time simulations and even games.
You will see the same "asset.getFile" components as in Rete. The process of interpreting Step and Glb files are the same as well. We do use some additional variables to make this script shorter and more readable. While this is beyond this tutorial, we create asynchronous context to be able to await the long running computations that are loading the files. This way of coding allows to deal with asynchronous code in a synchronous way. This is a very powerful feature.
The use of glb file also requires us to use the right handed coordinate system.
Using cloud assets in TypeScript
TypeScript is the most powerful way to use bitbybit.dev. It is also the most complex as you need to know how to program. Here is how you can load the assets into your TypeScript project.
This script has some functions that indicate which parts are essential for loading the assets and which are less important. The non essential parts create ground, skybox and directional light.
If you are comparing this code to the code of other editors you will see that it is quite similar in that it uses bitbybit constant to call the same functions. Also as in Blockly we need to create asynchronous context functions to be able to await the long running computations that are loading and parsing the files or drawing geometry.
Conclusion
You have seen how all of the editors were used to create exactly the same thing - two assets in the environment. You can use these scripts as a reference to load your unique designs into bitbybit.dev and publish them for everyone to see.
We are excited to provide our users with 3 editors, each with it's own unique strengths. We believe that you will be able to choose the right tool for the right job.