WebGL how two objects in the same shader can interact correctly

Question

I have two objects in a single shader: a cloth (made of vertices and triangles) and a sphere. When the cloth falls down and meets the sphere, there must be a collision such that the two objects are not in the same position or overlap each other. I know how to implement the collision, but the problem is that I need to have the correct coordinates of the two objects. Both of them are created at the origin (0,0,0) and then transformed in the vertex shader with the projection, view and model matrices (different view matrices for the two), but, for what I saw, if we work on them in the draw() function, the coordinates are the initial ones without all the transformation matrices (then I assume the transformation matrix is applied at the very end to visualise the objects). Because in my render the sphere is not in the same position of the cloth but below it, the result is wrong. How can I work on the coordinates of the two objects such that the result is visually correct? Because we don't have to see visually the two objects overlapping each other. I tried to tranform manually all coordinates with the entire transformation matrix but the result is really strange.

Answer 1

The solution I found is that when computations are done, the local coordinates of objects are taken (before model, projection and view matrix application). In my case all objects are created at the origin, then I had simply to change the local (original) coordinates moving the cloth above the sphere, and removing the view matrix for the y axis. The collision works as expected.