如何在XNA中使用Shader来为单个像素着色？

Question

我在XNA项目中有一个标准的800x600窗口。我的目标是根据一个矩形数组中的布尔值为每个像素着色。目前我正在使用1x1纹理并绘制数组中的每个精灵。

我非常新于XNA，来自GDI背景，所以我正在做我在GDI中会做的事情，但它不太可扩展。在另一个问题中，有人告诉我要使用Shader，但经过多次研究，我仍然无法找到如何实现这个目标。

我的应用程序循环遍历矩形数组的X和Y坐标，根据每个值进行计算，并重新分配/移动数组。最后，我需要使用新值更新我的"画布"。较小的数组示例如下：

0,0,0,0,0,0,0
0,0,0,0,0,0,0
0,0,0,0,0,0,0
1,1,1,1,1,1,1
1,1,1,1,1,1,1

如何使用着色器为每个像素上色？

一个非常简化的计算版本如下：

        for (int y = _horizon; y >= 0; y--)  // _horizon is my ending point
        {
            for (int x = _width; x >= 0; x--) // _width is obviously my x length.
            {
                if (grains[x, y] > 0)
                {
                    if (grains[x, y + 1] == 0)
                    {
                        grains[x, y + 1] = grains[x, y];
                        grains[x, y] = 0;
                    }
                }
            }
        }

每次调用更新方法时，都会进行计算。对于上述循环的示例，更新可能如下所示：

初始：

0,0,0,1,0,0,0
0,0,0,0,0,0,0
0,0,0,0,0,0,0
1,1,1,0,1,1,1
1,1,1,1,1,1,1

首先：

0,0,0,0,0,0,0
0,0,0,1,0,0,0
0,0,0,0,0,0,0
1,1,1,0,1,1,1
1,1,1,1,1,1,1

第二点：

0,0,0,0,0,0,0
0,0,0,0,0,0,0
0,0,0,1,0,0,0
1,1,1,0,1,1,1
1,1,1,1,1,1,1

最终结果：

0,0,0,0,0,0,0
0,0,0,0,0,0,0
0,0,0,0,0,0,0
1,1,1,1,1,1,1
1,1,1,1,1,1,1

更新：

在应用Render2DTarget代码并放置像素后，我的像素上出现了一个不想要的边框，总是在左边。我如何去掉它？

alt text http://www.refuctored.com/borders.png

alt text http://www.refuctored.com/fallingdirt.png

应用纹理的一些代码如下：

    RenderTarget2D target;
    Texture2D texture;
    protected override void LoadContent()
    {
        spriteBatch = new SpriteBatch(GraphicsDevice);
        texture = Content.Load<Texture2D>("grain");
        _width = this.Window.ClientBounds.Width - 1;
        _height = this.Window.ClientBounds.Height - 1;
        target = new RenderTarget2D(this.GraphicsDevice,_width, _height, 1, SurfaceFormat.Color,RenderTargetUsage.PreserveContents);
     }

 protected override void Draw(GameTime gameTime)
    {
        this.GraphicsDevice.SetRenderTarget(0, target);
        this.GraphicsDevice.SetRenderTarget(0, null);
        this.GraphicsDevice.Clear(Color.SkyBlue);
        this.spriteBatch.Begin(SpriteBlendMode.None,SpriteSortMode.Deferred,SaveStateMode.None);
        SetPixels(texture);
        this.spriteBatch.End();
    }

 private void SetPixels(Texture2D texture)
    {
        for (int y = _grains.Height -1; y > 0; y--)
        {
            for (int x = _grains.Width-1; x > 0; x--)
            {
                if (_grains.GetGrain(x, y) >0)
                {
                    this.spriteBatch.Draw(texture, new Vector2(x,y),null, _grains.GetGrainColor(x, y));
                }
            }
        }
    }

- George Johnston

---

你介意分享一下你在矩形数组上执行的计算吗？如果你能在着色器内执行这些计算，那么弄清楚可能并不太难。我正在努力弄清楚如何将一个大小为800x600的数组传递到着色器中，因为数组仅限于65536个索引（16位索引），所以如果你可以在着色器内执行计算而无需每次传递大型数组，那么就更容易弄清楚了。 - Venesectrix

我已经更新了问题，并提供了更多支持信息以回答您的询问。 - George Johnston

实际上，抱歉，现在我想了想发现那种方法出于很多原因并不可行。它要求一个纹理来表示数组的初始状态，像素着色器不能修改纹理，只能返回不同的值，所以每次调用它就像从初始状态开始一样，并且它把所有计算都放在了 draw() 函数中而不是 update() 函数中，这可能不是一个好主意。 - Venesectrix

你是每像素调用一次Draw函数呢还是我漏掉了什么？如果是那样的话，那会导致性能极差。你应该使用SetData方法填充纹理。 - LaZe

Answer 1

这种方法不使用像素着色器，但如果您想使用Texture2D的SetData方法而不是为每个像素调用SpriteBatch.Draw()，则可能会发现这很有用。我使用uint数组而不是bool来表示颜色。如果您可以使用8位颜色纹理，可以通过更改纹理格式来加速。

public class Game1 : Microsoft.Xna.Framework.Game
{
    // Set width, height
    const int WIDTH = 800;
    const int HEIGHT = 600;

    // Used to randomly fill in initial data, not necessary
    Random rand;

    // Graphics and spritebatch
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    // Texture you will regenerate each call to update
    Texture2D texture;

    // Data array you perform calculations on
    uint[] data;

    // Colors are represented in the texture as 0xAARRGGBB where:
    // AA = alpha
    // RR = red
    // GG = green
    // BB = blue

    // Set the first color to red
    const uint COLOR0 = 0xFFFF0000;

    // Set the second color to blue
    const uint COLOR1 = 0xFF0000FF;

    public Game1()
    {
        graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";

        // Set width, height
        graphics.PreferredBackBufferWidth = WIDTH;
        graphics.PreferredBackBufferHeight = HEIGHT;
    }

    protected override void Initialize()
    {
        base.Initialize();

        // Seed random, initialize array with random picks of the 2 colors
        rand = new Random((int)DateTime.Now.Ticks);
        data = new uint[WIDTH * HEIGHT];
        loadInitialData();
    }

    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);

        // Create a new texture
        texture = new Texture2D(GraphicsDevice, WIDTH, HEIGHT);
    }

    protected override void Update(GameTime gameTime)
    {
        // Allows the game to exit
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            this.Exit();

        // Run-time error without this
        // Complains you can't modify a texture that has been set on the device
        GraphicsDevice.Textures[0] = null;

        // Do the calculations
        updateData();

        // Update the texture for the next time it is drawn to the screen
        texture.SetData(data);

        base.Update(gameTime);
    }

    protected override void Draw(GameTime gameTime)
    {
        // Draw the texture once
        spriteBatch.Begin();
        spriteBatch.Draw(texture, Vector2.Zero, Color.Purple);
        spriteBatch.End();

        base.Draw(gameTime);
    }

    private void loadInitialData()
    {
        // Don't know where the initial data comes from
        // Just populate the array with a random selection of the two colors
        for (int i = 0; i < WIDTH; i++)
            for (int j = 0; j < HEIGHT; j++)
                data[i * HEIGHT + j] = rand.Next(2) == 0 ? COLOR0 : COLOR1;

    }

    private void updateData()
    {
        // Rough approximation of calculations
        for(int y = HEIGHT - 1; y >= 0; y--)
            for (int x = WIDTH - 1; x >= 0; x--)
                if (data[x * HEIGHT + y] == COLOR1)
                    if (y + 1 < HEIGHT && data[x * HEIGHT + (y + 1)] == COLOR0)
                    {
                        data[x * HEIGHT + (y + 1)] = data[x * HEIGHT + y];
                        data[x * HEIGHT + y] = COLOR0;
                    }
    }
}

- Venesectrix

---

完全同意。为了让GPU的工作更快，最好的方法是让CPU将数据上传为纹理。使用索引颜色纹理可能是最快的情况，但32位颜色也可能表现良好。编写着色器很有趣，但在这种情况下它们可能不会增加价值。 - user180326

出于好奇...您如何知道要从设备中删除的纹理位于索引[0]？ - izb

我认为因为这是一个非常简单的例子，只有一个纹理被绘制，所以你可以假设它将会在索引0处。如果这个例子有多个纹理，那么我猜我会假设它们按照它们被绘制的顺序在图形设备中，但是我没有找到支持这一点的来源，抱歉。 - Venesectrix

Answer 2

这样怎么样？

创建两个纹理（800x600）

将其中一个初始化为初始值。

对于每个帧，您将一个纹理呈现到另一个纹理中，并在像素着色器中更新值。

在将生成的纹理渲染到屏幕后，交换它们，使它们为下一帧做好准备。

编辑：

您将需要两个RenderTarget2D实例，并使用RenderTargetUsage.PreserveContents创建它们。您可以从SurfaceFormat.Color开始，使用黑色表示0，白色表示1。（您还可以找到8位格式以节省视频内存。）

new RenderTarget2D(_device, 800, 600, 1, SurfaceFormat.Color, RenderTargetUsage.PreserveContents);

你可以像这样将它们分配给渲染目标：

_device.SetRenderTarget(0, myRenderTarget);

你可以将 RenderTarget2D 作为纹理使用，像这样：

_device.Textures[0] = myRenderTarget.GetTexture();

希望能有所帮助……我可以从我的引擎中找出更多内容，所以请随便问。

- LaZe

---

我不是着色器专家，但我认为你不能在顶点或像素着色器中操纵底层纹理。因此，您必须在游戏代码中修改纹理，这将类似于Texture2D.SetData()。但是，如果您有一个基于数组值定义的800x600纹理，则甚至不需要像素着色器。每次使用Spritebatch将该纹理绘制到屏幕上即可。 - Venesectrix

我很感兴趣（也许发帖人也是），想看看这是如何完成的。你有可以发布的示例链接吗？谢谢！ - Venesectrix

啊，复制粘贴小鬼又出现了……这只是一个在设备上设置纹理的包装方法。我已经编辑过帖子了。 - LaZe

看起来像是一个差一的错误。你的图形在右边/底部也被裁剪了吗？如果是的话，你要么需要在遮罩纹理坐标上加一个像素，要么确保你正确计算了纹理坐标。 - Ron Warholic

检查一下你的 GetGrainColor(x, y) 方法，确保在计算粮食适当颜色时没有出现偏差。此外，你不应该为每个像素调用 Draw()，而是在内存中创建纹理，在 SetPixels 方法中填充它，然后一次性上传整个纹理到纹理中。 - Ron Warholic

Answer 3

你想要做的事情（逐像素绘制）是DirectX所做的。XNA是建立在DirectX之上的一层，这样你就不必逐像素绘制了。如果这确实是你想要做的事情，那么你应该学习DirectX而不是XNA。你可能会发现这样更容易...

- Peter

Answer 4

在场景中添加一个广告牌（直接放在相机前面，以便占据恰好800x600像素的空间）。

将二进制数组绑定为纹理。

在片元/像素着色器中，使用片元的2D位置和纹理计算片元的颜色。

- Danny Varod