All modifiers need to be applied and textures baked before exporting. The procedural shaders have to be replaced with the baked image textures. In export settings, select gltb default and choose “selected only” to accurately control what parts fo the mesh should be exported. As blenders Y axis corresponds to the Z axis in three js this setting has to be flipped in the export settings. The glft file size can be reduced by using a compressor like Draco which is supported by Three.js and therefore only has to be imported at the beginning of the js script.
ARM is short for Ambient Occlusion, Roughness and Metal and combines those three greyscale texture channels in the Red Green and Blue channels of an image.
Red channel: Ambient Occlusion (for crevices etc)
Green channel: Roughness (shiny surface)
Blue channel: Metallic (metallic or non-metallic)
Application:
This is a form of texture packing and therefore optimises performance by reducing the sheer amount of individual image textures needed. As such it is often used for real-time game engines such as Unreal and for development such as Three js.
When trying to animate circular motion or scatter points/objects on a radial area, it can be described as cos() and sin() of the same angle:
cos(angle) * radius;
sin(angle) * radius;
When plotting a circle on a coordinate system with the centre at the origin, the sin wave will correlate to the distance from the x axis. Likewise, the cos wave corresponds to the y axis. Since each axis represents one axis of circular motion, they form the coordinates of point moving around on a circle.
Application:
In p5.js or Three.js, for example:
let x = Math.cos(angle) * radius;
let y = Math.sin(angle) * radius;
As angle increases, those x-y values define a point orbiting the origin. This is a combination of sine and cosine that converts 1D angle input into 2D circular motion.