Materials and Alphablending doesn't seem to work properly

[Hoessi666]

I attached the altered Code of one of PureBasic's Examples to show the Problem; "BluePotPlant2.png" is a 32 Bit PNG-Image.

The Transparency is correct, but often Billboards that lie behind another one are drawn in front of them instead!
If you look at the Billboards from the other Side its correct.

The Problem comes with textured Meshes/Entities, too, not only with Billboards...

Can someone confirm this as a Bug or am I just doing something wrong?!

My System is Linux Mint 17 x64 with a Intel onboard Gfx-Chip GMA4500

Code: Select all

;
; ------------------------------------------------------------
;
;   PureBasic - Billboard
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

#CameraSpeed = 1

IncludeFile #PB_Compiler_Home + "examples/3d/Screen3DRequester.pb"

Define.f KeyX, KeyY, MouseX, MouseY

If InitEngine3D()
  
  InitSprite()
  InitKeyboard()
  InitMouse()
  
  If Screen3DRequester()
    
    Add3DArchive(#PB_Compiler_Home + "examples/3d/Data/Textures", #PB_3DArchive_FileSystem)
    
    ; First create our material, with a little rotate effect
    ;
    Material = CreateMaterial(#PB_Any, LoadTexture(0, "BluePotPlant2.png"))
    ;RotateMaterial(Material, 0.05, 1)
    MaterialBlendingMode(Material, #PB_Material_AlphaBlend)
    
    ; Then create the billboard group and use the previous material
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10)
    
    AddBillboard(Billboard,   -20, 0, -40)
    AddBillboard(Billboard, 0, 0, -40)
    AddBillboard(Billboard,  20, 0, -40)
    
    Camera = CreateCamera(#PB_Any, 0, 0, 100, 100)
    
    Repeat
      Screen3DEvents()
      
      If ExamineMouse()
        MouseX = -MouseDeltaX() * #CameraSpeed * 0.05
        MouseY = -MouseDeltaY() * #CameraSpeed * 0.05
      EndIf
      
      If ExamineKeyboard()
        
        If KeyboardPushed(#PB_Key_Left)
          KeyX = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Right)
          KeyX = #CameraSpeed 
        Else
          KeyX = 0
        EndIf
        
        If KeyboardPushed(#PB_Key_Up)
          KeyY = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Down)
          KeyY = #CameraSpeed 
        Else
          KeyY = 0
        EndIf
        
      EndIf
      
      RotateCamera(Camera, MouseY, MouseX, 0, #PB_Relative)
      MoveCamera  (Camera, KeyX, 0, KeyY)
      
      RenderWorld()
      Screen3DStats()
      FlipBuffers()
    Until KeyboardPushed(#PB_Key_Escape) Or Quit = 1
  EndIf
  
Else
  MessageRequester("Error", "The 3D Engine can't be initialized",0)
EndIf

End

[Samuel]

You're not doing anything wrong, but it's not a bug either.
What you're experiencing is a problem that has plagued the 3D world for a long time. It's known as order-dependent transparency and as far as I know there isn't a way to fix this in the current version of Purebasic.

There are ways around ODT if you're using straight directX or opengl.
The most common way of doing this was to send all your opaque objects to the depth buffer first.
Then sort the transparent triangles, from the furthest to the closest based on your current location.
Lastly send those sorted transparent triangles to the depth buffer.

Of course depending on how many transparent triangles you had it could be slow because you had to resort every time something moved.

The other option was to use order-independent transparency, but in a lot of these cases they were too slow to be usable in a game.
Nowadays with DirectX 11+ and OpenGL 4+ order-independent transparency has become much more of a reality thanks to new ways of keeping track of fragment data within shaders.

To summarize there are ways to fix your problem, but not in the current version of Purebasic.

[Hoessi666]

OK, I see.
I don't really need Alphablending. I was just using it, because the normal Transparency doesn't work either:

Blending-Mode is "Add": the transparent (black) Parts are displayed correctly (i.e. not), but the "real" Image is half transparent: you can look through it instead of being solid.

In fact, I just want to put Billboards into a Level as Decoration and Power-Ups like in the old Games like Blake Stone/Wolfenstein3D (And yes, maybe even transparent Parts in the Level-Architecture like Bars in a Jail...)

Again: Have I done something wrong or is it a bug?

"BluePotPlant.bmp" is 24Bit bmp-File with a black Background.

Code: Select all

;
; ------------------------------------------------------------
;
;   PureBasic - Billboard
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

#CameraSpeed = 1

IncludeFile #PB_Compiler_Home + "examples/3d/Screen3DRequester.pb"

Define.f KeyX, KeyY, MouseX, MouseY

If InitEngine3D()
  
  InitSprite()
  InitKeyboard()
  InitMouse()
  
  If Screen3DRequester()
    
    Add3DArchive(#PB_Compiler_Home + "examples/3d/Data/Textures", #PB_3DArchive_FileSystem)
    
    ; First create our material, with a little rotate effect
    ;
    Material = CreateMaterial(#PB_Any, LoadTexture(0, "BluePotPlant.bmp"))
    ;RotateMaterial(Material, 0.05, 1)
    MaterialBlendingMode(Material, #PB_Material_Add)
    
    ; Then create the billboard group and use the previous material
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10)
    
    AddBillboard(Billboard,   -20, 0, -40)
    AddBillboard(Billboard, 0, 0, -40)
    AddBillboard(Billboard,  20, 0, -40)
    
    Camera = CreateCamera(#PB_Any, 0, 0, 100, 100)
    
    Repeat
      Screen3DEvents()
      
      If ExamineMouse()
        MouseX = -MouseDeltaX() * #CameraSpeed * 0.05
        MouseY = -MouseDeltaY() * #CameraSpeed * 0.05
      EndIf
      
      If ExamineKeyboard()
        
        If KeyboardPushed(#PB_Key_Left)
          KeyX = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Right)
          KeyX = #CameraSpeed 
        Else
          KeyX = 0
        EndIf
        
        If KeyboardPushed(#PB_Key_Up)
          KeyY = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Down)
          KeyY = #CameraSpeed 
        Else
          KeyY = 0
        EndIf
        
      EndIf
      
      RotateCamera(Camera, MouseY, MouseX, 0, #PB_Relative)
      MoveCamera  (Camera, KeyX, 0, KeyY)
      
      RenderWorld()
      Screen3DStats()
      FlipBuffers()
    Until KeyboardPushed(#PB_Key_Escape) Or Quit = 1
  EndIf
  
Else
  MessageRequester("Error", "The 3D Engine can't be initialized",0)
EndIf

End

[Samuel]

Seems to work fine for me I'm using Purebasic 5.4 (x86) on Windows 7.
I tested it using the spheremap.png included with Purebasic and I also changed the camera background color to see the effect better.

Try this code and if it doesn't work for you then I'd guess PB linux has a bug with MaterialBlendingMode.

Code: Select all

;
; ------------------------------------------------------------
;
;   PureBasic - Billboard
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

#CameraSpeed = 1

IncludeFile #PB_Compiler_Home + "examples/3d/Screen3DRequester.pb"

Define.f KeyX, KeyY, MouseX, MouseY

If InitEngine3D()
 
  InitSprite()
  InitKeyboard()
  InitMouse()
 
  If Screen3DRequester()
   
    Add3DArchive(#PB_Compiler_Home + "examples/3d/Data/Textures", #PB_3DArchive_FileSystem)
   
    ; First create our material, with a little rotate effect
    ;
    Material = CreateMaterial(#PB_Any, LoadTexture(0, "spheremap.png"))
    ;RotateMaterial(Material, 0.05, 1)
    MaterialBlendingMode(Material, #PB_Material_Add)
   
    ; Then create the billboard group and use the previous material
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10)
   
    AddBillboard(Billboard,   -20, 0, -40)
    AddBillboard(Billboard, 0, 0, -40)
    AddBillboard(Billboard,  20, 0, -40)
   
    Camera = CreateCamera(#PB_Any, 0, 0, 100, 100)
    CameraBackColor(Camera, RGB(100, 150, 255))
    
    Repeat
      Screen3DEvents()
     
      If ExamineMouse()
        MouseX = -MouseDeltaX() * #CameraSpeed * 0.05
        MouseY = -MouseDeltaY() * #CameraSpeed * 0.05
      EndIf
     
      If ExamineKeyboard()
       
        If KeyboardPushed(#PB_Key_Left)
          KeyX = -#CameraSpeed
        ElseIf KeyboardPushed(#PB_Key_Right)
          KeyX = #CameraSpeed
        Else
          KeyX = 0
        EndIf
       
        If KeyboardPushed(#PB_Key_Up)
          KeyY = -#CameraSpeed
        ElseIf KeyboardPushed(#PB_Key_Down)
          KeyY = #CameraSpeed
        Else
          KeyY = 0
        EndIf
       
      EndIf
     
      RotateCamera(Camera, MouseY, MouseX, 0, #PB_Relative)
      MoveCamera  (Camera, KeyX, 0, KeyY)
     
      RenderWorld()
      Screen3DStats()
      FlipBuffers()
    Until KeyboardPushed(#PB_Key_Escape) Or Quit = 1
  EndIf
 
Else
  MessageRequester("Error", "The 3D Engine can't be initialized",0)
EndIf

End

[Samuel]

In your bug report http://www.purebasic.fr/english/viewtop ... 23&t=64056 you said

The MaterialBlendingMode-Switch "Add" makes the used Texture transparent in the right sections, but also leaves the solid Parts of the Image half-transparent, so that you can look through them.

This is the correct behavior of MaterialBlendingMode's Add parameter. The Add operation removes all black from the texture which is why you can see through the material.
I believe the only way to remove the pure black pixels is by writing a shader that will discard the unwanted pixels.

I think I still have a shader lying around that discards black pixels if you're interested in it. If you want it just say so and I'll see if I can find it.
Although, it might be a bit too much depending on the specs you're targeting for your game.

An alternative to a shader would be to use MaterialBlendingMode's "#PB_Material_AlphaBlend" parameter with a png image containing some alpha.

See the example below.

Code: Select all

#CameraSpeed = 1

IncludeFile #PB_Compiler_Home + "examples/3d/Screen3DRequester.pb"

Define.f KeyX, KeyY, MouseX, MouseY

If InitEngine3D()
 
  InitSprite()
  InitKeyboard()
  InitMouse()
 
  If Screen3DRequester()
   
    Add3DArchive(#PB_Compiler_Home + "examples/3d/Data/Textures", #PB_3DArchive_FileSystem)
   
    ; First create our material, with a little rotate effect
    ;

    Material = CreateMaterial(#PB_Any, LoadTexture(0, "grass1.png"))
    MaterialBlendingMode(Material, #PB_Material_AlphaBlend)
    
    ; Then create the billboard group and use the previous material
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10)
   
    AddBillboard(Billboard,   -20, 0, -40)
    AddBillboard(Billboard, 0, 0, -40)
    AddBillboard(Billboard,  20, 0, -40)
   
    Camera = CreateCamera(#PB_Any, 0, 0, 100, 100)
    CameraBackColor(Camera, RGB(100, 150, 255))
    
    Repeat
      Screen3DEvents()
     
      If ExamineMouse()
        MouseX = -MouseDeltaX() * #CameraSpeed * 0.05
        MouseY = -MouseDeltaY() * #CameraSpeed * 0.05
      EndIf
     
      If ExamineKeyboard()
       
        If KeyboardPushed(#PB_Key_Left)
          KeyX = -#CameraSpeed
        ElseIf KeyboardPushed(#PB_Key_Right)
          KeyX = #CameraSpeed
        Else
          KeyX = 0
        EndIf
       
        If KeyboardPushed(#PB_Key_Up)
          KeyY = -#CameraSpeed
        ElseIf KeyboardPushed(#PB_Key_Down)
          KeyY = #CameraSpeed
        Else
          KeyY = 0
        EndIf
       
      EndIf
     
      RotateCamera(Camera, MouseY, MouseX, 0, #PB_Relative)
      MoveCamera  (Camera, KeyX, 0, KeyY)
     
      RenderWorld()
      Screen3DStats()
      FlipBuffers()
    Until KeyboardPushed(#PB_Key_Escape) Or Quit = 1
  EndIf
 
Else
  MessageRequester("Error", "The 3D Engine can't be initialized",0)
EndIf

End

[Hoessi666]

My Head is spinning!

Is it so difficult to just put something like a Sprite into the 3D-World an make the unwanted Parts transparent like in the 2D-Part of Purebasic? (In Blitz3D, a long time ago, you just loaded a Sprite put it into the Scenery..et voilá!)

An alternative to a shader would be to use MaterialBlendingMode's "#PB_Material_AlphaBlend" parameter with a png image containing some alpha.

That's what I asked at the beginning: My 32bit-png had the wanted transparent Parts with the needed alpha-Values to "hide" them. That doesn't work according to the "order-dependent transparency"-Issues in 3D, like you said.
So I made a Texture without Alpha in 24Bit and made the unwanted Parts all Black and tried the Blending-Mode "Add". Doesn't work either...Pure Black is transparent rest is "half-transparent" (not solid in the Process of Displaying). The "Color"-BlendingMode does the same as "Add", only the half-transparent Image is darker...

I'm no native english Speaker and no 3D-"Guru", so maybe I understood something wrong, but stuff like this should be "basic" ...

By the Way, I deleted the Bug-Report, just in case...!

[Comtois]

"BluePotPlant2.png" is a 32 Bit PNG-Image.

Where is it to test your code ?

The Transparency is correct, but often Billboards that lie behind another one are drawn in front of them instead!

Have a look at SetRenderQueue.pb example, may be this can help ?

[Hoessi666]

"BluePotPlant2.png" is a 32 Bit PNG-Image.

Where is it to test your code ?

Use the Geebee2.bmp instead. Just export it as a gif and make the purple Background transparent, then re-export the Gif to a 32-bit Png and load it instead of my BluePotPlant.png.

The Transparency is correct, but often Billboards that lie behind another one are drawn in front of them instead!

Have a look at SetRenderQueue.pb example, may be this can help ?

In this case the Images are displayed in a Billboardgroup, which is one "Entity" for PB-Ogre. it doesn't change the rendering order in the Group itsself.
Of course, you could try and make every Billboard an own Entity and then sort them, but that would be 1. way too much overhead for such a thing and 2. you would have to recalculate in every Frame the position and therefore the rendering Order of the Entities, because some of the Stuff in a Level changes its Position and so on (enemies e.g.). According to Samuel's answer that's a common Problem in 3D called "order-dependent transparency"...

If you use no "Alphablend" but "Add", the Ordering is correct and full black Pixels are not displayed, but the rest of the Image (what I call "solid": not transparent/black) is displayed wrong (half-transparent, you can look through it on what lies behind). If that Problem would be solved, it would be great!

[PMV]

In a Billboardgroup, every billboard has the same position and rendering queue.
If you need them to be drawn in the correct order (from back to front) you need
to use a Billboardgroup for every billboard. This problem doesn't need a PNG,
you can see the same problem with the "Geebee2.bmp". too.
If you just use one group, the ordering is still wrong in one direction.

The bigger question is ... what do you want to do?
3D is not as easy as 2D and so it can get tricky. Especially as PB-OGRE is limited.

For example, use it like this:

Code: Select all

;
; ------------------------------------------------------------
;
;   PureBasic - Billboard
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

#CameraSpeed = 1

IncludeFile #PB_Compiler_Home + "examples/3d/Screen3DRequester.pb"

Define.f KeyX, KeyY, MouseX, MouseY

If InitEngine3D()
  
  InitSprite()
  InitKeyboard()
  InitMouse()
  
  If Screen3DRequester()
    
    Add3DArchive(#PB_Compiler_Home + "examples/3d/Data/Textures", #PB_3DArchive_FileSystem)
    
    ; First create our material, with a little rotate effect
    ;
    ;Material = CreateMaterial(#PB_Any, LoadTexture(0, "BluePotPlant2.png"))
    Material = CreateMaterial(#PB_Any, LoadTexture(0, "Geebee2.bmp"))
    ;RotateMaterial(Material, 0.05, 1)
    MaterialBlendingMode(Material, #PB_Material_AlphaBlend)
    
    ; Then create the billboard groups and use the previous material
    ; the order of the billboards will be always correct, as they are in different groups
    ; with there real coordinates
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10, -20, 0, -40)
    AddBillboard(Billboard,   0, 0, 0)
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10, 0, 0, -40)
    AddBillboard(Billboard, 0, 0, 0)
    Billboard = CreateBillboardGroup(#PB_Any, MaterialID(Material), 10, 10, 20, 0, -40)
    AddBillboard(Billboard,  0, 0, 0)
    
    Camera = CreateCamera(#PB_Any, 0, 0, 100, 100)
    
    Repeat
      Screen3DEvents()
      
      If ExamineMouse()
        MouseX = -MouseDeltaX() * #CameraSpeed * 0.05
        MouseY = -MouseDeltaY() * #CameraSpeed * 0.05
      EndIf
      
      If ExamineKeyboard()
        
        If KeyboardPushed(#PB_Key_Left)
          KeyX = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Right)
          KeyX = #CameraSpeed 
        Else
          KeyX = 0
        EndIf
        
        If KeyboardPushed(#PB_Key_Up)
          KeyY = -#CameraSpeed 
        ElseIf KeyboardPushed(#PB_Key_Down)
          KeyY = #CameraSpeed 
        Else
          KeyY = 0
        EndIf
        
      EndIf
      
      RotateCamera(Camera, MouseY, MouseX, 0, #PB_Relative)
      MoveCamera  (Camera, KeyX, 0, KeyY)
      
      RenderWorld()
      Screen3DStats()
      FlipBuffers()
    Until KeyboardPushed(#PB_Key_Escape) Or Quit = 1
  EndIf
  
Else
  MessageRequester("Error", "The 3D Engine can't be initialized",0)
EndIf

End

MFG PMV

[Samuel]

If you use no "Alphablend" but "Add", the Ordering is correct and full black Pixels are not displayed, but the rest of the Image (what I call "solid": not transparent/black) is displayed wrong (half-transparent, you can look through it on what lies behind). If that Problem would be solved, it would be great!

A shader will keep your objects in order and make only the pure black pixels transparent, but your pixels will either be completely transparent or completely opaque. If the shader were to use semi transparent pixels you would have to deal with the order-dependent transparency problem again.

The shader I was talking about earlier is in HLSL (DirectX shader). Since you're on Linux I'll need to convert it to GLSL (Opengl shader) or CG (DirectX | OpenGL shaders). I'll post the shader with an example on how to use it once it has been converted.

[Hoessi666]

In a Billboardgroup, every billboard has the same position and rendering queue.
If you need them to be drawn in the correct order (from back to front) you need
to use a Billboardgroup for every billboard. This problem doesn't need a PNG,
you can see the same problem with the "Geebee2.bmp". too.
If you just use one group, the ordering is still wrong in one direction.

I tested your Example and it works...buuuut: If you have to use one Group for one Billboard each to have them displayed correctly, doesn't that kill the Intention behind Billboards and -groups? Why group something that doesn't work correctly in Groups!?

By the way, if I create the Groups at 0,0,0 and add their single Billboard to the Group at its wanted Position (e.g. -20,0,-40) the Displaying is again wrong! It only seems to work with Billboards at "Zero" and the Group positioned to the Location wanted. Billboards are in the same rendering queue if in a group, yes, but their Position in this Group can differ, why else give them a Position then?

Look at the PB-Example "BillboardGrass.pb (the Amount of Grass is decreased, so that you can better see the Effect):

Code: Select all

Billboard = CreateBillboardGroup(#PB_Any, MaterialID(GrassMaterial), 96, 96, 0, 0, 0, -1, 1)
BillboardGroupCommonDirection(Billboard, 0, 1, 0)
        
For i = 0 To 50
    AddBillboard(Billboard, Random(2000)-1000, Random(18) + 30, Random(2000) - 1000)
Next i

The PB-Team itsself added Billboards with the same Material in one Group; they are displayed incorrectly (like mentioned in the first Post), but it seems that this was not intended! Otherwise they would have created as much Groups as Billboards like in your Example!
With Grass to your Feet, you might not see it, but imagine they would have added Trees and you could see a Tree that lies behind another one through that one in the front!!! I don't think that the Implementation of the Billboards and -groups in PB is correct, but maybe I just don't get the Idea behind that!

The bigger question is ... what do you want to do?

As mentioned earlier: The Billboards should represent Power-Ups, Enemies and so on like in Blake Stone or Wolfenstein3D (Those Games were Mid90ies-Raycasters and used flat Sprites to show Stuff in the Level. These Sprites were always orientated to the Player/Camera).

Especially as PB-OGRE is limited.

I agree with you on that!

The shader I was talking about earlier is in HLSL (DirectX shader). Since you're on Linux I'll need to convert it to GLSL (Opengl shader) or CG (DirectX | OpenGL shaders). I'll post the shader with an example on how to use it once it has been converted.

Pleas Samuel, don't make yourself such a lot of work! At the Moment, I doubt that it's worth it if it's only for me (PB-OGRE doesn't seem to be the right solution)!

[PMV]

If you just want to do a retro-game with a few 2D-sprites displayed in a 3d-world,
one billboardgroup with one billboard for every sprite is ok. You maybe get problems,
when you have thousands of them at the same time. But you don't need to worry
about that until you really see performance problems.

Billboardgroups are for backgroundstuff, that doesn't overlaps each other. As in this case,
you would be able to have a huge amount of them without much costs. Having them
at front, you will not need much, but they will overlap ... so one group is ok.

Thats how i have understood them.

MFG PMV

[Samuel]

Pleas Samuel, don't make yourself such a lot of work! At the Moment, I doubt that it's worth it if it's only for me (PB-OGRE doesn't seem to be the right solution)!

I have already converted the shader to GLSL so even if you don't end up needing it. I'll post it just in case someone in the future has a use for it.

The only thing left to do is upload everything to dropbox, but I'll have to do that a little later because of time constraints.

[Samuel]

If you're interested in trying the shader here's the link to the topic.
http://www.purebasic.fr/english/viewtop ... 36&t=64081

[Hoessi666]

@Samuel
Thanks for your Effort, I will take a look at it sometimes...