[SOLVED] Rendering order

Help & Support
1

A quick question, in case someone knows. I have a following setup:
https://playcanvas.com/editor/scene/1580325

Position:

  • A cube is in front of the ball.
  • A ball is in front of the cone.

Rendering now:

  • Ball renders after cube, but before the cone.
  • Cone renders after ball and after cube

I would like the cube to render after the ball, the ball after the cone, and the cone after the cube.

Now:

image
image808×605 32.6 KB

I want:

image
image802×597 49.5 KB

Edit: adjusted the drawing a bit - the cone should not ignore the ball, so that would be the right shape I assume.

2
  • you could either create multiple layers, and add your objects to layers
  • or you can enable manual sorting (on camera I think) and use meshInstance.drawOrder MeshInstance | PlayCanvas API Reference
3

The interesting part is drawing the red cone both in front of the blue cube AND in front of the green cube

Wondering if you can do something like render the red cone twice and do some sort of masking?

4

@mvaligursky hmm, but using layers would mean there is a one way drawing sequence of objects, right? Like, L3 over L2 over L1. How can I then make L1 over L3 afterwards?

@yaustar interesting. Do you mean some sort of fragment shader?

5

Yeah, I was thinking about somehow using the green ball camera render capture as a mask for the red cone. No idea how to do it but that’s where my mind is going at the moment

6

hmm I guess I didn’t really read that. So you want this order:
‘cone, ball, cube, cone’

Sounds like you need two cones then. And use manual sorting?

Otherwise, what is the scenario here in general?

7

if some meshes can be overwritten by another mesh later, maybe you need to turn off depth-write for it?

8

Right, so the use case is I want this arrow mesh not to clip through the level (should be rendered on top of everything), but at the same time should not be rendered over the ball, so it would visually penetrate the ball.

9

Ah, in which case an occluder approach could work here. Give me a few minutes to try something

1 Like
10

3 layers:
1: render the table as normal
2: render the arrow without depth testing set on material
3: render the ball

11

@mvaligursky yes, I tried it. I would work fine for a table. However, this is a golf type of a game, with different level pieces, which should occlude the ball if they are in the way. With the setup you mentioned the ball would be drawn on top of the level pieces.

12

I don’t think there would be a problem with the ball - it would still depth test correctly, and so be occluded by meshes from layer 1.

1 Like
13

The closest I got is https://playcanvas.com/project/1004580

image
image970×754 45.7 KB

I do feel that your actual use case is simpler to do

1 Like
14

Here is another take on render setup:

  1. level as usual
  2. arrow with material.depthTest = false
  3. ball

@yaustar yes, I think there is an easier way to do it - there usually is :slight_smile:

15

In your case, because it’s only the ball that shouldn’t be rendered over by the arrow, you can use a variant of my method. If you are willing to share a very basic fork of your golf issue, we can try to make it work specifically to your project

17

Well, the demo project actually replicates the setup that is needed. I can change it a bit, e.g. using a plane as an arrow and move around the boxes. One moment.

18

In your video, why is the ball on top of the level? If both level and the ball render to depth buffer, it should get correctly occluded.

19

Hmm, I placed it into its own layer. I assumed that is what your numbers in your list mean? :slight_smile: Should I place it to world?

20

Separate layer. But that only defines the order, nothing else. Depth buffer should still work between layers. You don’t disable depth-test on the ball or something like that?

21

@yaustar I’ve rearranged the project:

image
image1092×688 26.5 KB

So, the only change would be that the plane would be visible through boxes. No other changes (i.e. boxes should occlude the ball).