Sonic boom draw order is incorrect

[avaer]

Sometimes the sonic boom app will draw on top, and sometimes below, for example, the street grid shaders.

This is a timing issue in the load. We should decide more strictly where the sonic boom lives in the render order; it should probably live next to (or even inside) the avatar it's bound to.

Whatever the solution, we should not sort apps every frame.

[avaer]

This also happens with the shield.

[tcm390]

Shield has higher priority than sonic boom. So the shield would draw on top of sonic-boom, ki, street shader (usually, street and shield have the same priority)

https://user-images.githubusercontent.com/60634884/163058031-af23f858-18a1-4e1c-b9f4-61ea4435f7a9.mp4

If we lower the shield's priority, then it would draw below the street shader. But still cannot guarantee that it would draw below sonic-boom and ki.

https://user-images.githubusercontent.com/60634884/163058643-e5942a55-de7e-40fa-ae16-38f89f70a708.mp4

Maybe we could set depthWrite: false to shield material, which would guarantee that the shield draw below street shader, sonic-boom, and ki.

https://user-images.githubusercontent.com/60634884/163058799-4ac493e5-9187-4589-9a50-0fd2b830d9c0.mp4

[avaer]

I think it's clear this stack needs a declarative sort infrastructure.

If we lower the shield's priority, then it would draw below the street shader. But still cannot guarantee that it would draw below sonic-boom and ki.

Yes, we can guarantee this.