kemarofangs
Topic Author
Posts: 32
Joined: 13 Jun 2014, 21:30

Particle Effects And Bitmap Pixel Manipulation

24 Feb 2017, 23:18

Hello again,

I'm trying to implement my own particle effects engine within noesis and need a little guidance regarding images.
It seems I can use the Memorystream and Image object but not a class deriving from bitmap (WriteableBitmap / BitmapImage).
Specifically I'm using a two color image (transparent and black) with opacity. All I need to do is change the black color to a specific color at any given frame.
I might change to a 1BPP image for speed purposes later but the concept is the same. Even a blanket color mask effect would work for now as long as the transparency is unchanged.

Is there a class within noesis that will let me accomplish individual pixel manipulation speedily? Is this the correct approach for going about this task? I'm open to suggestions as your team knows how noesis will best perform.

Normally, in C# I would use unsafe contexts and byte pointers.
WriteableBitmap wb;
wb.Lock();
IntPtr intPtr = wb.BackBuffer;
// TODO Manipulate the byte array based on the pixel format (Ex. BGRA32)
wb.Unlock();
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Particle Effects And Bitmap Pixel Manipulation

25 Feb 2017, 11:34

Locking to send the buffer from the GPU to the CPU is always going to be slow. I would say you need to render noesisGUI to a render texture and then use that texture but I don't have enough information about what you want to achieve. What do you mean with "particle effects engine within noesis"
 
kemarofangs
Topic Author
Posts: 32
Joined: 13 Jun 2014, 21:30

Re: Particle Effects And Bitmap Pixel Manipulation

26 Feb 2017, 10:32

Particle effects for me would mean creating some (lets say 8) black and transparent images say 64x64 with random patterns. An emitter c# class would handle randomly choosing from those images assigning a starting location, direction velocity, angle, rotation velocity, starting color, ending color etc. These particles (images) would then move, rotate, transition color, and fade opacity for a duration and then get destroyed.

Ive already done some weather effects (rain, and snow) using only very basic geometric shapes (Lines and ellipses). The difference now is I'd like to create some fire and smoke effects using some pixel manipulation. I only really need to apply some type of color mask to the image or get to the byte array of the image. Speed is very important for what I'm trying to accomplish. I'm trying to make my game entirely within noesis not just using it as a simple HUD. I hope this helps answer your question.

As far as I know the WriteableBitmap class is not supported. I haven't updated my version of noesis in awhile though so it may have changed.
 
Ziriax
Posts: 60
Joined: 10 Dec 2015, 17:59
Location: Belgium
Contact:

Re: Particle Effects And Bitmap Pixel Manipulation

26 Feb 2017, 12:45

What engine are you using? Unity, Monogame, or just directly OpenGL or DX11?

Do you really need to generate these images at runtime? I would use a pregenerated texture atlas.

Note that typically high performance particle effects are not done using a general purpose GUI engine, but with a dedicated GPU shader.

That being said, support for WriteableBitmap or just some way to get/set an array of pixels from/to a NoesisGUI texture would be handy for debugging and tooling :-)
Peter Verswyvelen,
Strongly Typed Solutions
 
kemarofangs
Topic Author
Posts: 32
Joined: 13 Jun 2014, 21:30

Re: Particle Effects And Bitmap Pixel Manipulation

26 Feb 2017, 23:30

I'm using unity. The images are already made. I just need to alter the single color that makes up an image each frame.
Here is the guide I was going by http://martincrownover.com/gamemaker-ex ... cles-fire/. The guide is using gamemaker but the algorithms and process would be the same.

Are GPU shaders supported in noesis? If that is what I need to use to create this properly then I can learn to use them. Ultimately, I'd like to make fire, smoke, fog, blur, lightning flicker, etc effects. Mr Santos mentioned "render noesisGUI to a render texture" earlier. I'm unsure exactly what that implies but if its what I need to do then I'll use it. Is there a way to get unity graphics to overlay on top of the noesis gui host panel? Maybe that would be a better approach.

For speed purposes I could just lower the image quality for these textures to 1bit per pixel (0 is transparent, 1 is black) then hope that the image object's opacity property can still be used to set the entire texture's opacity. This all assumes that using textures in this way is a viable choice to accomplish this task. Your texture atlas suggestion would be having one image file containing all the textures and then just shifting the image to display the appropriate 64x64 sub texture correct? Sounds like a good speed optimization as well.

For experimenting, I'm coding this stuff in visual studio and wpf but making sure the same classes are available within noesis as I go. Btw, thank you both for the help / advice.
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Particle Effects And Bitmap Pixel Manipulation

27 Feb 2017, 00:18

Sorry for the confusion but I don't understand yet why you need NoesisGUI for this. Can't you create the textures using Unity + shaders?
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Particle Effects And Bitmap Pixel Manipulation

27 Feb 2017, 00:21

That being said, support for WriteableBitmap or just some way to get/set an array of pixels from/to a NoesisGUI texture would be handy for debugging and tooling :-)
The correct and fast (no CPU/GPU lock) approach to do this is:
  • Read output from noesis: render noesisGUi to a render texture and use that texture elsewhere
  • Write pixels to noesis: just fill a texture outside noesisGUI and use that texture inside noesisGUI
 
kemarofangs
Topic Author
Posts: 32
Joined: 13 Jun 2014, 21:30

Re: Particle Effects And Bitmap Pixel Manipulation

27 Feb 2017, 02:29

This paragraph will explain how I'm currently using unity and noesis. I don't know if I'm using it properly but deperately needed a useful vector graphics based platform as unity's graphics system is in my opinion terrible and vector unfriendly. I'm really only using unity as a platform publisher. I've got sound assets, controller assets, and even networking assets. I have not used nor plan to use the default graphics system for unity unless necessary. My game is 2D vector based and being made entirely using c# and noesis gui. I'm not using noesis as just a HUD for the game. Noesis is being used to display all the graphics. The characters, enemies, all the backgrounds, animations, menu screens, lighting, shadows are all using noesis. There are no non-noesis graphics at this time. I'm not even using the physics engine within unity (I have my own c# version) just the timing for the frames per second.

"Can't you create the textures using Unity + shaders". I have no idea. Unless I can import them into Noesis or display them over top of the noesisgui graphics layer. I'll try ultra simple examples if you can provide them. Lets say I make a texture within unity (I'll have to look this up). Can I then alter this texture's color each frame and pass it to noesis? A code snippet would be awesome or a link.

"Write pixels to noesis: just fill a texture outside noesisGUI and use that texture inside noesisGUI". I've found a link for changing a material's tint within Unity. Please forgive my ignorance. I'll look up how to do some of these things on unity's side and post back here.

Unity RenderTexture
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Particle Effects And Bitmap Pixel Manipulation

28 Feb 2017, 19:01

There is a sample in our Showcase that uses RenderTexture to draw a 3D scene and then the resulting texture is embedded into NoesisGUI: viewtopic.php?f=12&t=294

You can use a RenderTexture to apply any processing you want to your images and as it is done in the example, use that texture as an ImageSource inside the xaml.
 
kemarofangs
Topic Author
Posts: 32
Joined: 13 Jun 2014, 21:30

Re: Particle Effects And Bitmap Pixel Manipulation

02 Mar 2017, 06:10

I figured out how to make a color mask and the code below does work in unity -> noesis. This example uses a texture atlas (Just alter the viewbox to change sub textures). Haven't tested speed yet with many copies of this. I'll look at the rendertexture thread about the spaceboy example in the meantime.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             xmlns:noesis="clr-namespace:NoesisGUIExtensions"
             x:Class="Darren.UserControl_Fire"
             Width="64" Height="64">
    <UserControl.Background>
        <SolidColorBrush x:Name="m_solidColorBrush" Color="#FFFF7700" />
    </UserControl.Background>
  <UserControl.OpacityMask>
    <!-- This is a 256 px by 256 px texture atlas. It is composed of 16 sub textures (4 x 4 each 64 px by 64 px). -->
    <!-- ImageSource="/Textures/Fire.png" -->
    <!-- ImageSource="pack://application:,,,/Textures/Fire.png" -->
    <!-- ImageSource="pack://application:,,,/Game.ParticleEffects;component/Textures/Fire.png" -->
    <ImageBrush x:Name="m_imageBrush" Viewbox="0,0,0.25,0.25" TileMode="None" Stretch="None" ViewboxUnits="RelativeToBoundingBox"
                ImageSource="../../Raster/Texture/Fire.png" />
  </UserControl.OpacityMask>
</UserControl>

Who is online

Users browsing this forum: blackbone and 9 guests