# Depth Sorting and PShape
**URL:** https://discourse.processing.org/t/depth-sorting-and-pshape/1730
**Category:** Libraries
**Created:** [July 13, 2018, 4:07am UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730 "2018-07-13T04:07:55Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [July 13, 2018, 4:07am UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/1 "2018-07-13T04:07:55Z")
Am I doing something wrong or `hint(ENABLE_DEPTH_SORT);` only works with beginShape() and endShape() and not with PShape. If I am not wrong, and this is a issue, how can I do depth sort myself on PShapes ?
Screenshot, red = PShape, blue = not PShape like : beginShape(), box(), line() …
The code, using QueasyCam library :
```auto
import queasycam.*;
QueasyCam cam;
PShape box;
PShape sphere;
public void setup() {
fullScreen(P3D);
cam = new QueasyCam(this);
box = createShape(BOX, 100.0f);
sphere = createShape(SPHERE, 50.0f);
box.setStroke(false);
box.setFill(color(255, 0, 0, 100));
sphere.setStroke(false);
sphere.setFill(color(255, 0, 0, 100));
}
public void draw() {
background(255);
// Just to be sure
hint(ENABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_MASK);
// Magic line that should all correct
hint(ENABLE_DEPTH_SORT);
shape(box);
pushMatrix();
translate(0, 0, 200);
shape(sphere);
popMatrix();
pushMatrix();
translate(200, 0, 0);
noStroke();
fill(0, 0, 255, 100);
box(100);
popMatrix();
pushMatrix();
translate(200, 0, 200);
noStroke();
fill(0, 0, 255, 100);
sphere(50);
popMatrix();
}
```
Also, weird lag when going in between the 4 shapes, dont know why.
Thank you !
---
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [October 8, 2018, 5:38pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/2 "2018-10-08T17:38:25Z")
Does someone know how to solve this issue ?
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 8, 2018, 7:58pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/3 "2018-10-08T19:58:04Z")
I could not install QueasyCam (it fails) so I tried with PeasyCam
```auto
import peasy.*;
PeasyCam cam;
PShape box;
PShape sphere;
public void setup() {
fullScreen(P3D);
cam = new PeasyCam(this, 400);
box = createShape(BOX, 100.0f);
sphere = createShape(SPHERE, 50.0f);
box.setStroke(false);
box.setFill(color(255, 0, 0, 100));
sphere.setStroke(false);
sphere.setFill(color(255, 0, 0, 100));
noStroke();
fill(0, 0, 255, 100);
}
public void draw() {
background(255);
// Just to be sure
hint(ENABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_MASK);
// Magic line that should all correct
hint(ENABLE_DEPTH_SORT);
for(int i=0; i<2; i++) {
translate(0, 0, i*200);
pushMatrix();
translate(100, 100, 0);
sphere(50);
translate(-200, 0, 0);
box(100);
translate(0, -200, 0);
shape(box);
translate(200, 0, 0);
shape(sphere);
popMatrix();
}
}
```
For me too the shapes created with `createShape` behave different from those drawn directly.
But even when dealing only with shapes drawn directly the transparency works only sometimes, depending on the rotation.
 
---
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [October 12, 2018, 11:06pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/4 "2018-10-12T23:06:48Z")
To use QueasyCam you can also paste the source code in a new tab : [https://github.com/jrc03c/queasycam/blob/master/src/template/library/QueasyCam.java](https://github.com/jrc03c/queasycam/blob/master/src/template/library/QueasyCam.java)
But same problem with QueasyCam in some angles `hint(ENABLE_DEPTH_SORT);` doesent work properly PShape or not 😕 I thought at least it worked 100% without PShape
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [October 13, 2018, 8:24am UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/5 "2018-10-13T08:24:45Z")
Don’t you want to be _disabling_ the depth test to get this to work correctly?
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 13, 2018, 11:21am UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/6 "2018-10-13T11:21:01Z")
I modified [this program](https://discourse.processing.org/t/program-to-test-hint-with-transparency/4361) for testing transparency and hints and it seems like things are fine ( ~~as @neilcsmith suggests~~ ) when all three hints are disabled.
```auto
import peasy.*;
PeasyCam cam;
boolean b[] = new boolean[3];
PShape shp1, shp2;
void setup() {
size(800, 600, P3D);
cam = new PeasyCam(this, 400);
hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);
shp1 = createShape(SPHERE, 90);
shp1.setStroke(false);
shp1.setFill(color(255, 40, 20, 100));
shp2 = createShape(BOX, 180);
shp2.setStroke(false);
shp2.setFill(color(255, 40, 20, 100));
}
void draw() {
background(255);
cam.beginHUD();
fill(0);
text("DEPTH_TEST " + b[0], 20, 20);
text("DEPTH_SORT " + b[1], 20, 40);
text("DEPTH_MASK " + b[2], 20, 60);
text("<- use the mouse to toggle settings", 200, 40);
cam.endHUD();
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, 0, y);
shape((x+y)/200 % 2 == 0 ? shp1 : shp2);
popMatrix();
}
}
}
void mousePressed() {
int id = mouseY / 20;
if (id < b.length) {
b[id] ^= true; // same as b[id] = !b[id]
}
hint(b[0] ? ENABLE_DEPTH_TEST : DISABLE_DEPTH_TEST);
hint(b[1] ? ENABLE_DEPTH_SORT : DISABLE_DEPTH_SORT);
hint(b[2] ? ENABLE_DEPTH_MASK : DISABLE_DEPTH_MASK);
}
```
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [October 13, 2018, 12:09pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/7 "2018-10-13T12:09:15Z")
> [@hamoid](#):
>
> it seems like things are fine (as @neilcsmith suggests) when all three hints are disabled.
That wasn’t quite what I suggested! There are still times you might want to depth sort to do the painter’s algorithm, although sometimes the output will be fine without. I’m just not sure when you’d want to depth test and depth sort together.
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 13, 2018, 2:40pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/8 "2018-10-13T14:40:53Z")
You’re right. Sorry, I was rewriting the sentence and left it in the wrong state.
---
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [October 15, 2018, 3:42pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/9 "2018-10-15T15:42:01Z")
Wow ! At first i thought it worked well… but if you add opaque objects you see it doesent work. I also tried enabling per object depth mask but still doesent work.
Any solutions ?
````auto
PeasyCam cam;
boolean b[] = new boolean[3];
PShape shp1, shp2;
void setup() {
size(800, 600, P3D);
cam = new PeasyCam(this, 400);
hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);
shp1 = createShape(SPHERE, 90);
shp1.setStroke(false);
shp1.setFill(color(100));
shp2 = createShape(BOX, 180);
shp2.setStroke(false);
shp2.setFill(color(255, 40, 20, 100));
}
void draw() {
background(255);
cam.beginHUD();
fill(0);
text("DEPTH_TEST " + b[0], 20, 20);
text("DEPTH_SORT " + b[1], 20, 40);
text("DEPTH_MASK " + b[2], 20, 60);
text("<- use the mouse to toggle settings", 200, 40);
cam.endHUD();
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
// per object depth mask
// hint((x+y)/200 % 2 == 0 ? ENABLE_DEPTH_MASK : DISABLE_DEPTH_MASK);
shape((x+y)/200 % 2 == 0 ? shp1 : shp2);
popMatrix();
}
}
}
}
void mousePressed() {
int id = mouseY / 20;
if (id < b.length) {
b[id] ^= true; // same as b[id] = !b[id]
}
hint(b[0] ? ENABLE_DEPTH_TEST : DISABLE_DEPTH_TEST);
hint(b[1] ? ENABLE_DEPTH_SORT : DISABLE_DEPTH_SORT);
hint(b[2] ? ENABLE_DEPTH_MASK : DISABLE_DEPTH_MASK);
}```
````
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 15, 2018, 4:14pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/10 "2018-10-15T16:14:35Z")
Maybe ideas here?
> **[Alpha channel(transparency) is not working? Transparent ellipse completely masks...](https://forum.openframeworks.cc/t/alpha-channel-transparency-is-not-working-transparent-ellipse-completely-masks-a-box/21767/2)**
>
> Hi there! It’s not a bug, it’s the way OpenGL works, regarding translucency and the depth buffer. Basically: In order to achieve translucency, all opaque objects must be drawn before drawing any translucent ones. (From the OpenGL Wiki —...
Update: I wonder if the faces are single sided and they should be made double sided? And if that’s the case, can it be done by tweaking the shader?
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [October 15, 2018, 6:15pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/11 "2018-10-15T18:15:45Z")
And also in [https://www.khronos.org/opengl/wiki/Transparency\_Sorting](https://www.khronos.org/opengl/wiki/Transparency_Sorting)
Thinking about it I’m not sure disabling the depth test is correct. Draw solid objects with depth mask enabled, then draw depth sorted translucent objects with depth mask disabled?
---
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [October 16, 2018, 6:54pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/12 "2018-10-16T18:54:04Z")
@hamoid yes but not in the shader and by default it is double sided. Anything that can be done in OpenGL can be done in processing so :
```auto
import peasy.*;
import com.jogamp.opengl.GL2ES2;
import com.jogamp.opengl.GL;
PeasyCam cam;
boolean b[] = new boolean[3];
PShape shp1, shp2;
PGL pgl;
GL2ES2 gl;
void setup() {
size(800, 600, P3D);
cam = new PeasyCam(this, 400);
hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);
shp1 = createShape(SPHERE, 90);
shp1.setStroke(false);
shp1.setFill(color(100));
shp2 = createShape(BOX, 180);
shp2.setStroke(false);
shp2.setFill(color(255, 40, 20, 100));
}
void draw() {
background(255);
cam.beginHUD();
fill(0);
text("DEPTH_TEST " + b[0], 20, 20);
text("DEPTH_SORT " + b[1], 20, 40);
text("DEPTH_MASK " + b[2], 20, 60);
text("<- use the mouse to toggle settings", 200, 40);
cam.endHUD();
pgl = beginPGL();
gl = ((PJOGL)pgl).gl.getGL2ES2();
// OpenGL Code
gl.glEnable(GL.GL_CULL_FACE);
gl.glCullFace(GL.GL_FRONT); // GL_BACK, GL_FRONT_AND_BACK
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
// hint((x+y)/200 % 2 == 0 ? ENABLE_DEPTH_MASK : DISABLE_DEPTH_MASK);
shape((x+y)/200 % 2 == 0 ? shp1 : shp2);
popMatrix();
}
}
}
endPGL();
}
void mousePressed() {
int id = mouseY / 20;
if (id < b.length) {
b[id] ^= true; // same as b[id] = !b[id]
}
hint(b[0] ? ENABLE_DEPTH_TEST : DISABLE_DEPTH_TEST);
hint(b[1] ? ENABLE_DEPTH_SORT : DISABLE_DEPTH_SORT);
hint(b[2] ? ENABLE_DEPTH_MASK : DISABLE_DEPTH_MASK);
}
```
@neilcsmith could you make a quick exemple, i tried to do that but I failed.
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [October 17, 2018, 10:01am UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/13 "2018-10-17T10:01:25Z")
> [@Stephcraft](#):
>
> @neilcsmith could you make a quick exemple, i tried to do that but I failed.
This seems to work correctly? Enabling / Disabling depth sort doesn’t change anything, although I think it might if the translucent shapes were different colours / opacities? 😕
```auto
import peasy.*;
PeasyCam cam;
PShape shp1, shp2;
void setup() {
size(800, 600, P3D);
cam = new PeasyCam(this, 400);
shp1 = createShape(SPHERE, 90);
shp1.setStroke(false);
shp1.setFill(color(100));
shp2 = createShape(BOX, 180);
shp2.setStroke(false);
shp2.setFill(color(255, 40, 20, 100));
}
void draw() {
background(255);
// All opaque
hint(ENABLE_DEPTH_MASK);
//hint(DISABLE_DEPTH_SORT);
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
if ((x+y)/200 % 2 == 0) {
shape(shp1);
}
popMatrix();
}
}
}
// All transparent
hint(DISABLE_DEPTH_MASK);
//hint(ENABLE_DEPTH_SORT);
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
if ((x+y)/200 % 2 != 0) {
shape(shp2);
}
popMatrix();
}
}
}
}
```
---
### Author:  [@Stephcraft](https://discourse.processing.org/u/Stephcraft)
#### Post date: [October 17, 2018, 10:18pm UTC](https://discourse.processing.org/t/depth-sorting-and-pshape/1730/14 "2018-10-17T22:18:47Z")
Yeah wow ! It actually works, I also tried different colors, seems to work well. 😃
But… when you move the camera, maybe its just me, but it display weird artefacts :
**Actually** : It works !!! 😃 🎉🎉 @neilcsmith thank you very much 😃 I’ts been so long since i wanted to solve this problem. You’re the best !!
I had processing 3.3.6, in 3.4.0 no artefacts !
The solution, supports transparent & opaque PShapes to be rendered correctly (exemple) :
````auto
import com.jogamp.opengl.GL2ES2;
import com.jogamp.opengl.GL;
PeasyCam cam;
PShape shp1, shp2;
void setup() {
size(800, 600, P3D);
cam = new PeasyCam(this, 400);
shp1 = createShape(SPHERE, 90);
shp1.setStroke(false);
shp1.setFill(color(100));
shp2 = createShape(BOX, 180);
shp2.setStroke(false);
shp2.setFill(color(255, 40, 20, 100));
}
void draw() {
background(255);
// All opaque
hint(ENABLE_DEPTH_MASK);
//hint(DISABLE_DEPTH_SORT);
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
if ((x+y)/200 % 2 == 0) {
shp1.setFill(true);
shp1.setFill(color(x+200, y+200, i*100));
shape(shp1);
}
popMatrix();
}
}
}
// All transparent
hint(DISABLE_DEPTH_MASK);
//hint(ENABLE_DEPTH_SORT);
for(int i=0; i<2; i++) {
for (int x = -200; x<=200; x+=200) {
for (int y = -200; y<=200; y+=200) {
pushMatrix();
translate(x, i*300, y);
if ((x+y)/200 % 2 != 0) {
shp2.setFill(true);
shp2.setFill(color( 255-(x+200), 255-(y+200), 255-(i*100), 100 ));
shape(shp2);
}
popMatrix();
}
}
}
}```
````