@oJAHRASTAo, glad to hear that you are already comfortable in this pipeline as it really does offer you some extra flexibility. That said, I know that there are some ideas that are fairly abstract if you aren’t comfortable writing code so let me break down what I do. I am including a reference to the glTF chart on Textures which is a broad definition but lays down some basic rules.
I am also going to refer to the sheen asset glTF file from above so I can give you a clear example:
For the most part, you will likely be adding content to an already existing glTF file, so you don’t really need to worry about the samplers part of textures as you will likely want to use the same samplers as the other textures in the file. In this case, you can leave the samplers parameters alone and use the same value for sampler as set in the other textures in the file.
The next thing to do is add your texture URIs to the images array. Just so there isn’t any confusion around the format here, if you are unclear about it, bear with me while I explain what the format means. If you are already familiar with it, I apologize, but it may help someone else here. What you are looking at with "images" is an array of objects (which is also a parameter in an object). You can tell by the brackets/braces that are being used as arrays are contained in and objects are contained in { }. Each object can contain any number of key: value pairs and an array can contain any number of items which also have a key and a value (bear with me here… it will all make sense).
The array keys will start with 0 and increment by 1 for each item in the array so an array like this:
array = ["item1", "item2", "item3"]
would contain three items with the keys 0, 1, and 2. So if you can pass a key to get the value from the key position in the array:
array[1] == "item2" would evaluate as true because we start the array keys at 0.
So then an object is a single entity with one or more key:value pairs that has a string as a key instead of an integer. So this would be the above array as an object:
object = { "first": "item1", "second": "item 2", "third": "item3" }
This means that:
object.second == "item 2" would evaluate as true as we match the key string to find the value.
So now you can see where we are going with the images array above. It’s an array of four items that each hold an object with one key:value pair for the URI of the image you want to load. If you count, starting from 0, through the array to the file path that you want to reference in the textures parameter, you will enter that key in the "source" value in the "textures" array.
When it comes to the "textures" array, it does not matter which order the textures are in, since the loader will step through the array one at a time. The important thing is that you enter the correct values for "sampler" and "source" that correspond to the position of that element within each respective array. The "name" value should just match the file name of the file being used.
In terms of where you can store images, you don’t need to store them in the same directory as your glTF file, but doing so makes the files universally usable. If you store the textures in some other path, you will need to have a similar path for the storage of the files if you pass the glTF to someone else. This makes even less sense for a glb since you are placing all of the needed files (glTF, bin, and textures) into one container to share.
Hope this helps explain, but please let me know if you have other questions.
