Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Professional Discussion / [Image Kit] Questions regarding alpha blending images

Author
Message
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 12th Apr 2013 22:47 Edited at: 12th Apr 2013 22:50
Hello people of teh interwebz!!11!eleven!

I'm having some trouble with some image kit commands and wondered if anyone could help me.

I have 4 images. (Lets call them 01, 02, 03, and final.

I'd like to use the paste image on image command, to paste image 01 onto Final with full alpha, then image 02 onto that with another alpha, then finally paste 03 onto that with another alpha value.

I'd like to have a sliding scale from 1 to 512 (for example) when when the slider is at 0, only image 01 should be visible, when the slider is at 256 only image 02 is visible and when the slider is 512 only image 03 is visible.

I can work the alpha values out just fine by doing this...



But when I use the Set Image brightness copmmand the image isn't being displayed.

I've tried with the alpha being 0.0 - 1.0, and also 0.0 - 255.0 with no effect.

Have I missed something or am I doing it wrong?

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 13th Apr 2013 02:55
I have a method for merging images using the built-in commands.
I'll post it in a few hours.

Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 13th Apr 2013 02:58
Thanks, is it quick enough to be ran in real time?

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 13th Apr 2013 12:00 Edited at: 13th Apr 2013 14:13
Alright, so its been a while since I did anything with Image Kit so I can't answer your question directly with an Image Kit example.

The good news is I can get you from point A to point B with an alternative method. It works a bit differently, has different strengths and weaknesses that might play towards what you're trying to do.

Merging Images With Memblocks
-Slower Up Front Processing
-Not As Good For Animation
-No Ongoing Overhead
-Easier To Combine With Other Effects/Shaders


It takes enough time that doing this every frame bombs out the frame rate, but we can cheat to negate this effect.

-Only run the code when a change occurs.
-Only run the code if enough time has passed (like 250ms).

It's a user controlled slider so per frame updates probably aren't that important. Even Photoshop cheats like this.

All-In-One Simple To Use Function
This code will merge two images (image two onto image one) and spit it out into a third image. The alphaTwo# scales the alpha of the second image. A value of 1.0 makes image two non transparent, a value of 0.5 makes image two 50% transparent. This variable allows you to control the blending. Also the images alpha channels are supported and properly blended. alphaTwo# is purely for the transition effect you asked for. Setting this to 1.0 will essentially layer the images like layers in photoshop.


The way I understood it, even though you have multiple images, only 2 are visible at any one time. I could be wrong about that. If im right then you can just sort which images you are passing to this code based on slider position and figure out an appropriate alphaTwo# value to get the desired merge.

You end up with a flattened, merged image requiring no shader processing. Yes the code is slower than a shader up front. However you can cheat, and reduce the impact of this greatly. Then you can reap the benefits of no overhead processing. You just need to be efficient calling the function.

Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 13th Apr 2013 15:24
Thanks for that code Mage, it's working well. (Turns out that I had a schoolboy error in the first place which prevented that section of code from actually being executed anyway...)

The IK code still doesn't work however, and Mage's code is a little too slow to be used in the way I wanted. (It takes roughly 6 seconds to run, as I need to change 5 images at once.)

At least I have a solution in place, although not ideal. Here's a video of it...



Thanks a lot for your help so far.

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 13th Apr 2013 20:50 Edited at: 13th Apr 2013 21:06
Oh wow 6 seconds, no way, you'll need a shader based method then.
I was expecting a 512x512 image for .08 seconds. But you are doing something much heavier then that.

Ok for a loading phase, but not for live play. Just be sure you are optimizing your mergers. You have all those images but you might not need to merge them all at once.

Also you can probably cheat and stagger the mergers at 100-250ms intervals and draw out the merging a bit. Maybe.

Diggsey
19
Years of Service
User Offline
Joined: 24th Apr 2006
Location: On this web page.
Posted: 14th Apr 2013 16:35
You can do it using native DBPro commands, create a render target using "set camera to image", set that as the current bitmap using the negative camera ID, ie. "set current bitmap -1" if using camera 1, and then use "paste sprite" to draw your other images to that image. You can use "set sprite alpha" immediately before pasting to adjust the alpha value, and hide the sprite so it doesn't try to draw itself normally.

[b]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 14th Apr 2013 16:39 Edited at: 14th Apr 2013 16:40
@Diggsey: It's a skybox not a tectured backdrop.

I need to change 6 images as close to realtime as I can.



This is the desired effect, which only works with your (Mage's) memblock code. If I use the IK commands, It goes all funky. Instead of the alpha going from 0.0, 0.1, 0.2... 0.9, 1.0, it looks like it's going 0.0, 0.5, 0.4, 0.3, 0.2, 1.5, using the exact same code which works for the memblock method.

I'm getting stumped now. Thinking I'm going to have to multi-texture each skybox face with the three images and blend them in a shader. (Which means learning how to do it as I can't make shaders and need to stop bugging Green Gandalf all the time! lol)

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Andrew_Neale
15
Years of Service
User Offline
Joined: 3rd Nov 2009
Location: The Normandy SR-2
Posted: 14th Apr 2013 18:28
I know you've been trying to avoid it, but if you do go down the shader route (in my opinion this would probably be the best way to go) here is a decent start on it. I just put this together quickly and it will let you apply 3 cubemaps to an object (fairly standard way of handling the sky object) and supply a blend amount between 0 and 2 which 0-1 will blend between the first 2 images and 1-2 will blend between the last 2 images. Have dropped in the UI settings for it too in case you use Dark Shader so you can quickly test the blending with a slider. Let me know if you need any help with it.




Previously TEH_CODERER.
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 14th Apr 2013 18:52 Edited at: 14th Apr 2013 18:59
Damn! Thanks, I'll give it a go after my dinner.

Edit, I'm assuming that I alter the blend like so:


I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Andrew_Neale
15
Years of Service
User Offline
Joined: 3rd Nov 2009
Location: The Normandy SR-2
Posted: 14th Apr 2013 20:07
Almost. The 'slider' reference was to tell Dark Shader what UI element to use for the variable. The actual variable was called 'BlendAmount'. Also, if you're not going to be using cube maps then the shader will need a few changes so let me know if that is the case and you need any help with that.


Previously TEH_CODERER.
Diggsey
19
Years of Service
User Offline
Joined: 24th Apr 2006
Location: On this web page.
Posted: 14th Apr 2013 20:23 Edited at: 14th Apr 2013 20:24
Just out of curiosity, why would my method not work for a skybox? "paste sprite" is very fast - doing 6x4 paste sprites shouldn't be a problem. You should't even need to "sync" the extra cameras because it's just 2d drawing, so there will be no overhead there. Having said that, I do agree shaders are the way to go.

[b]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 14th Apr 2013 21:34
I'm not using sprites so I don't understand how this would work. I had 6 plains, each would need 3 images pasting to it.

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 15th Apr 2013 01:02 Edited at: 15th Apr 2013 01:06
Excuse the double post but I have questions regarding the shader method. (Nothing is working for me currently. Even my known working terrain blending code )

I have created the 3 cube maps, (one of them is below) textured a cube with them at the 3 texture stages, loaded and applied the shader but the skybox is not appearing. (And strangely, whenever I call Load Image with a flag of 2 for a cubemap, I get a weird cannot load image error, which disappears when I remove the flag)



1) Do I have to load the textures as a cubemap? (I.E. with a flag of 2)
2) Does the sky cube need to be special in any way, or is a plain DBPro cube sufficient?
3) Do I have to do anything special to get the shader to work, or is it literally just load effect, then set object effect?
4) Does the cubemap need to be setup in a certain way? (I.E. with the top/bottom second from left on the texture)

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]

Attachments

Login to view attachments
Andrew_Neale
15
Years of Service
User Offline
Joined: 3rd Nov 2009
Location: The Normandy SR-2
Posted: 15th Apr 2013 02:18
1) Yes.
2) Standard cube should be fine as long as you either turn its culling off or scale it to -100% so the faces are pointed inwards to avoid it being invisible from inside. Personally, I tend to use spheres but I don't think it really makes a difference.
3) 'Load effect' and 'set object effect' should be all, along with applying the 3 textures to textures stage 0, 1 and 2.
4) I'm not sure how many ways there are to go about setting them up. I tend to use the DirectX Texture Tool that comes with the DirectX SDK to make them which creates them in DDS format but I really don't know how much of a difference that makes. If you maybe try it with cube maps you've seen work in other example, such as the ones that come with Evolved's shaders and see if that makes a difference.

If you can't get it working then I can send you a full example. The shader definitely worked within Dark Shader so it shouldn't take me too long to put together a standalone example. Alternatively, I'll make an example which doesn't use cube maps so you can carry on texturing as you were before.


Previously TEH_CODERER.
Diggsey
19
Years of Service
User Offline
Joined: 24th Apr 2006
Location: On this web page.
Posted: 15th Apr 2013 02:22
Quote: "I'm not using sprites so I don't understand how this would work. I had 6 plains, each would need 3 images pasting to it."


The sprite is just a tool to draw the image using opacity, you don't actually use the sprite itself, you just create it so you can call "paste sprite".

By using "set camera to image" and "set current bitmap -1" you can get any 2D drawing to go to an image rather than the screen or a bitmap.

Quote: "1) Do I have to load the textures as a cubemap? (I.E. with a flag of 2)"

You can do either as long as you treat it the same from the shader. If you use "texCUBE" to sample the texture then the texture must be a cubemap, if you use "tex2D" the texture must be a normal 2D image.

Quote: "2) Does the sky cube need to be special in any way, or is a plain DBPro cube sufficient?"

If you use a cubemap texture and shader rather than a normal texture then you don't need any special cube, a DBPro cube will be sufficient, although you should either turn off culling or scale it by a factor of -100 in all dimensions so that it draws the interior faces.

With a normal texture you need some way to tell the shader how to map those textures onto the cube. You could either have some clever logic in the shader to "fake" a cubemap, or you could use a cube with particular UV coordinates so the shader can just use those for mapping. The default UV coordinates of a DBPro cube just map the same image to each face.

Quote: "3) Do I have to do anything special to get the shader to work, or is it literally just load effect, then set object effect?"

You need to use "texture object" to apply the textures, and DBPro can be a bit picky about the order in which you apply the shader in relation to the textures depending on what flags you pass, but apart from that everything can be done from within the shader.

Quote: "4) Does the cubemap need to be setup in a certain way? (I.E. with the top/bottom second from left on the texture)"

Possibly it requires the texture to be a proper DDS cubemap texture, you'd have to check the release notes for when this feature was added as I can't remember, either that or ask GG, he knows these sorts of things.

[b]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 15th Apr 2013 03:09
Thank you both for your help. I'll see whats causing the stupid error when I use the cubemap flag on the Load Image bit. (But as you said, it's possibly because my cubemap is not a dds file.)

I'll download the DirectX SDK and use the proper cubemap tool to generate the cubemaps.

Again, thank you both for your invaluable help!

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 15th Apr 2013 04:53 Edited at: 15th Apr 2013 05:32
Quote: "You can do it using native DBPro commands, create a render target using "set camera to image", set that as the current bitmap using the negative camera ID, ie. "set current bitmap -1" if using camera 1, and then use "paste sprite" to draw your other images to that image. You can use "set sprite alpha" immediately before pasting to adjust the alpha value, and hide the sprite so it doesn't try to draw itself normally."

Quote: "Just out of curiosity, why would my method not work for a skybox? "paste sprite" is very fast - doing 6x4 paste sprites shouldn't be a problem. You should't even need to "sync" the extra cameras because it's just 2d drawing, so there will be no overhead there. Having said that, I do agree shaders are the way to go."


Thanks. I like this method since its almost 4 times faster than my method. However I'm wondering how to preserve alpha transparency. I think there was a setting for Bitmaps that allowed alpha to be preserved.

Quote: "I'm not using sprites so I don't understand how this would work. I had 6 plains, each would need 3 images pasting to it."

You can convert the images into sprites and use sprite commands to merge them faster than the Memblock based method. Then delete the sprites and keep the merged image.

Ive posted here a working version of my code above using this technique. Its almost 4 times faster, but you lose the alpha channel of the first image (but not on the second).


You can drop this code directly in place of the previous code I posted and it will work.
All around though, since it's been revealed these are a few large skyboxes, and not stupendously large numbers of images a shader based method might be more appropriate, particularly for animated effects.

I use this method to layer clothing on characters, so I can have varied skin tones, and textures.

Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 15th Apr 2013 05:30 Edited at: 15th Apr 2013 05:40
Wow managed to make the effect about 80 times faster than the original method. At this point it's fast enough for real-time on a 512x512 image. Operating time is 1ms.
(Still can't preserve transparency on the bottom layer.)


This is an implementation of Diggsey's suggestion above.

Diggsey
19
Years of Service
User Offline
Joined: 24th Apr 2006
Location: On this web page.
Posted: 15th Apr 2013 17:28
You can improve it further by doing the following:
- You only need one sprite, you can change the image and alpha before each "paste sprite" call.
- Instead of creating and deleting the sprite and camera every call you can create them once on initialization and use "sync mask" to prevent the camera from ever updating.

You can keep the alpha on the first image by using the extra flag to "set camera to image" to enable alpha on the render target image. However, this will make the first image far more transparent than would be expected because of the way blending works - you could try to solve this by instead of using "paste sprite" use "paste image" for the first image without the transparency flag set.

If that doesn't work you may need to set a custom blending mode to get the desired effect, which is possible using my "advanced2d" plugin. This will also remove the need for sprites.

Also, if you use IanM's plugins you can create the render target directly instead of messing about with cameras, and then just use his "draw to image" command to draw directly to it.

[b]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 15th Apr 2013 23:31
This is the issue I'm having with the shader.



First half is with the shader off, the second half is with it on.

This is the code I'm using to initialise it, have I done anything wrong?



(LoadCubeImage( szFilename ) just calls a load Image with a flag of 2, and the various GetBlankXXNo functions are obvious.)

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Andrew_Neale
15
Years of Service
User Offline
Joined: 3rd Nov 2009
Location: The Normandy SR-2
Posted: 16th Apr 2013 01:51 Edited at: 16th Apr 2013 01:55
Oops! Really sorry, my mistake. I think I must've accidentally swapped the casing of the variable from 'blendAmount' to 'BlendAmount'.



Put together a quick test with it and it works fine so if it still doesn't work for you then let me know and I'll send across the example.

[Edit]
Here is the example code anyway, just change the paths as appropriate.


[/Edit]


Previously TEH_CODERER.
thenerd
16
Years of Service
User Offline
Joined: 9th Mar 2009
Location: Boston, USA
Posted: 16th Apr 2013 15:24 Edited at: 16th Apr 2013 15:25
Quote: "I'll download the DirectX SDK and use the proper cubemap tool to generate the cubemaps."


Did you do this? that could be your issue. The cube map can't just be a normal image file, it's in a special format. If you want another way to generate proper cube maps and easily visualize them, ATI created a utility to compile cube maps. It's open source and available here: cubemapgen

If you've already generated a proper cubemap, I don't know why it's not working. But from the looks of that video that's your problem.

Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 16th Apr 2013 17:28
@the nerd: Yeah I already downloaded and used ATI's CubeMapGen tool. The video I posted was using the cubemaps it generates. (but perhaps 12Mb per cubemap is a little excessive, but I like them high res. lol)

@Andrew_Neale: Your new shader has worked a charm! (And is making me all goosepimply! lol) Just one issue with it now. Stages 1, and 2 have textured fine, but stage 0 is not displaying correctly. (It's showing as it does in the first half of my above video. All cube faces are being textured with the same image, and there's seams.)


I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Diggsey
19
Years of Service
User Offline
Joined: 24th Apr 2006
Location: On this web page.
Posted: 16th Apr 2013 18:05
Are you sure it's not a problem with the texture itself? In the shader all the textures are treated exactly the same. Did you forgot the flag on "load image" for that texture?

[b]
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 16th Apr 2013 18:27
Schoolboy error.

How dumb do I feel. lol I have changed the code to allow for a non cubemapped imaged for stage 0. I have since changed this and it's all smooth going.

Thank you very very much!!

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Andrew_Neale
15
Years of Service
User Offline
Joined: 3rd Nov 2009
Location: The Normandy SR-2
Posted: 16th Apr 2013 18:59
Quote: "Your new shader has worked a charm! (And is making me all goosepimply! lol)"

Wooh, glad to hear it! I'd imagine this could give quite a nice effect with the right cube maps. Maybe for a day/night cycle, a storm kicking in or maybe something more dramatic like following a nuclear explosion or to have the sky suddenly light up and fill with alien spaceships.


Previously TEH_CODERER.
Mobiius
Valued Member
22
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 16th Apr 2013 20:31
Quote: "a storm kicking in or maybe "

that's what I'm using it for. Having a slider to set whether the level will be stormy/rainy, or sunny and bright. It being realtime is better for immersion.

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
Mage
Valued Member
18
Years of Service
User Offline
Joined: 3rd Feb 2007
Location:
Posted: 19th Apr 2013 09:18
Quote: "You can keep the alpha on the first image by using the extra flag to "set camera to image" to enable alpha on the render target image. However, this will make the first image far more transparent than would be expected because of the way blending works - you could try to solve this by instead of using "paste sprite" use "paste image" for the first image without the transparency flag set."

Spent a few hours on this a few days ago. I was not able to get around the screwed up transparency issue you mentioned. The layers are more transparent as you mentioned, also the layers are not blending reliably. Tweaking ends up mostly with the bottom layer not being visible at all, or too transparent merging. Pasting with an image did not help.


Quote: "If that doesn't work you may need to set a custom blending mode to get the desired effect, which is possible using my "advanced2d" plugin. This will also remove the need for sprites."

Yeah I might look into that.

Login to post a reply

Server time is: 2025-05-17 15:48:35
Your offset time is: 2025-05-17 15:48:35