[C++] Buffers, materials, and transparency

[Pastaspace]

I'm not sure if this should go in the programming or the game art section, since it seems equally split between the two sections.

My GUI is drawn on a 3D model, as that thread shows, the way I'm doing this is drawing to a buffer and having that buffer be the texture of a plane. That works just fine, except for one thing.

No matter what I do, the buffer background is always rendered. That is, even though it draws all the elements, it draws them on a white screen.

Example here.

I simply want the plane to draw my textures, semi transparent if need be, and nothing more. Having the material for the plane use the transparent.shader texture doesn't work, it's applied there and it just makes the white background transparent as well, rather than get rid of it entirely.

My question is, what do I need to do to have it just render the textures I draw, rather than the textures + that white background?

[macklebee]

Not being able to see your code, I am just guessing that you are assigning a simple diffuse.shader to the plane like I did in that example code. You need to assign a shader that allows for transparency and discards pixels based on the alpha value. It looks like the only inherent shader available would be the diffuse+normal+alphamask.shader. So just set the color to have an alpha value less than 0.5 for the background color and it should be discarded. Make sure when drawing your textures to increase the alpha back above 0.5.

[Rick]

I think you need a shader that will discard certain pixels. Perhaps paint the transparent part pink and then in the shader you discard pink pixels and leave the others? You can look at this thread to see how you might do that:

 

http://www.leadwerks.com/werkspace/topic/10704-model-transparency/

[Pastaspace]

Not being able to see your code, I am just guessing that you are assigning a simple diffuse.shader to the plane like I did in that example code. You need to assign a shader that allows for transparency and discards pixels based on the alpha value. It looks like the only inherent shader available would be the diffuse+normal+alphamask.shader. So just set the color to have an alpha value less than 0.5 for the background color and it should be discarded. Make sure when drawing your textures to increase the alpha back above 0.5.

I've tried both the diffuse and the transparent.shader, but not the alphamask one.

For the color, is that the material color that needs to be set, or the context color?

[macklebee]

both would make the plane invisible but setting the material color to a low alpha may prevent anything else from showing up...

 

Here is the example code reworked using the alphamask shader. Note that i had to clear the buffer color as a way to refresh or else i would get smearing. The previous example i was just drawing a solid rectangle over the entire buffer.

function App:Start()
   self.window = Window:Create("dynamic material example",0,0,800,600,Window.Titlebar+Window.Center)
   self.context = Context:Create(self.window)
   self.world = World:Create()
   self.buffer = Buffer:GetCurrent()
   self.camera = Camera:Create()
   self.light = DirectionalLight:Create()
   self.light:SetRotation(45,45,45)
   self.box1 = Model:Box()
   self.mat1 = Material:Create()
   self.shader = Shader:Load("Shaders/model/diffuse+normal+alphamask.shader")
   self.mat1:SetShader(self.shader)
   self.shader:Release()
   self.box1:SetPosition(0,0,2)
   self.box1:SetMaterial(self.mat1)

   self.box = Model:Box()
   self.box:SetColor(1,0,0,1)
   self.box:SetPosition(0,0,4)

   self.mybuffer = Buffer:Create(100,100,1,1)

   return true
end

function App:Loop()
   if self.window:Closed() or self.window:KeyHit(Key.Escape) then return false end

   self.box1:Turn(Time:GetSpeed()*0.5,Time:GetSpeed()*0.5,0)
   self.box:Turn(-Time:GetSpeed()*0.5,-Time:GetSpeed()*0.5,0)

   Time:Update()
   self.world:Update()
   Buffer:SetCurrent(self.buffer)
   self.world:Render()

   Buffer:SetCurrent(self.mybuffer)
   self.context:SetColor(1,1,1,0.4)
   self.mybuffer:Clear(Buffer.Color)
   self.context:SetBlendMode(Blend.Alpha)
   self.context:SetColor(1,1,1,1)
   self.context:DrawText(string.format("FPS: %.2f",Time:UPS()),15,40)
   self.tex = self.mybuffer:GetColorTexture(0)
   self.mat1:SetTexture(self.tex,0)

   self.context:Sync(true)

   return true
end

[Pastaspace]

No dice, not exactly. There's a few issues.

First, there's no diffuse+normal+alphamask.shader, only a diffuse+normal+specular+alphamask.shader

Second, while it solves the issue of the background (which is now fully transparent) disappearing, the transparent aspects of the textures now disappear as well.

Example.

Probably because the shader is discarding those pixels.

Ideally though, it should have a slight transparency for those textures, basically like this.

[macklebee]

No dice, not exactly. There's a few issues.

First, there's no diffuse+normal+alphamask.shader, only a diffuse+normal+specular+alphamask.shader

 

odd - I have that file and as far as I am aware that's not just limited to the beta. are you sure you dont have that file?

 

Second, while it solves the issue of the background (which is now fully transparent) disappearing, the transparent aspects of the textures now disappear as well.

Example.

Probably because the shader is discarding those pixels.

Ideally though, it should have a slight transparency for those textures, basically like this.

There's no probably about it. The shader is discarding anything that has an alpha less than 0.5. You would need to increase the alpha for any image above 0.5 via a 3rd party texture editor or in the case of just DrawRect(), use context:SetColor() with an alpha above 0.5 but less than 1.0. If you are unable to edit your own textures via gimp, paint.net, photoshop, etc, then you could try changing the shader to discard at a lower alpha level to see if that improves your results.

 

Edit- you could try setting the material's BlendMode as the default is to draw the material as a solid blendmode which would prevent any transparency from occurring for images/rectangles rendered onto the plane.

[Pastaspace]

Yeah, I definitely don't have diffuse+normal+alphamask.shader, searching through anything.

And you're absolutely sure I can't have this interface be 3D and transparent? It'd really add a lot to the feel of things.

[macklebee]

you may have missed my edit - but the default material blendmode is solid, try changing it to alphablend and you should get your transparency assuming its above the alphamask shader's discard level.

 

as for the shader - it may be from Marley's Ghost who provided this missing shader... its been awhile, so if its not in your version, its because it was custom made... but if thats the case then simple shaders like diffuse+alphamask and diffuse+normal+alphamask shaders for static and and animated models seems to be lacking in the engine.

[Pastaspace]

Not last I checked, no.

Edit: The blendmode was already alphablend, so nothing helped there.

[Guppy]

No dice, not exactly. There's a few issues.

First, there's no diffuse+normal+alphamask.shader, only a diffuse+normal+specular+alphamask.shader

Second, while it solves the issue of the background (which is now fully transparent) disappearing, the transparent aspects of the textures now disappear as well.

Example.

Probably because the shader is discarding those pixels.

Ideally though, it should have a slight transparency for those textures, basically like this.

 

Leadwerks doesn't support true alpha transparency on models - only what is essentially 1 bit transparency ( think GIF vs PNG ).

This means that a pixel is either fully there or fully not there.

What the shader does is take a cut off value like say 50% transparent and discards all pixels that are below this value and draws the ones above - so you cannot have semi transparent objects like you wanted above.

 

As I understand this is a technical limitation of the engine.

 

Because your UI is essentially an overlay you can still do it with a bit of trickery tho, every frame;

1. first render you UI to texture keeping the alpha values.
   
2. Wait for the engine to be done drawing ( context.sync() iirc )
   
3. Draw a quad ( tristrip/vert buf/etc ) on top of everything ( in orthomode) with the correct blending mode using the texture you created in step 1
   
4. set blend & perspektive mode back to defaults
   

[macklebee]

Because your UI is essentially an overlay you can still do it with a bit of trickery tho, every frame;

1. first render you UI to texture keeping the alpha values.
    
   
2. Wait for the engine to be done drawing ( context.sync() iirc )
    
   
3. Draw a quad ( tristrip/vert buf/etc ) on top of everything ( in orthomode) with the correct blending mode using the texture you created in step 1
    
   
4. set blend & perspektive mode back to defaults
   

 

if he has to do that then he might as well just draw straight to the context and not worry about prespective versus ortho or creating a custom quad as the engine already provides that with the inherent 2D Draw commands

 

The only other thing i could think of is to modify the 2D drawing shaders to rotate the vertices to get the rotated look he was going for... again though, probably making it more difficult than needed when it might be easier to just create the images to have a 3D askew look to them

[Guppy]

That depends entirely on what is supposed to be shown on the gui and what the source is