Also, the default front to back sorting is using the bounding box center as the sorting key. So, depending on the position of objects, you may have the sphere coming before the ground or the other way around.
You should provide your own sorting function and make sure that your sphere will always come after the ground by this function (maybe set a
sortkey property on the sub meshes,
sortfunction = (a,b) => a.sortkey < b.sortkey ? -1 : a.sortkey > b.sortkey ? 1 : 0).
Note however that it won’t change the display as the zbuffer will do its job. You could disable the zbuffer testing when rendering the sphere so that what has been rendered prior to the sphere does not interfere, but it won’t work because the triangles of the sphere not being tested against the zbuffer, triangles farther away could occlude triangles closer if they are drawn last:
One way to achieve this would be to actually render the sphere first and update the stencil buffer with some value where the sphere is drawn (say value
1) and when rendering the other objects (the ground), setup the stencil buffer test so that those objects don’t write to the screen where the stencil value is
[UPDATE] I don’t know if it’s an option, but if you create the ground first and apply a material to it that does not write to the zbuffer, it will also work: