如何在 XNA 中使用着色器为单个像素着色？答案

【问题标题】：How can I use a Shader in XNA to color single pixels?如何在 XNA 中使用着色器为单个像素着色？
【发布时间】：2010-04-03 02:00:22
【问题描述】：

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

我是 XNA 的新手，并且具有 GDI 背景，所以我正在做我在 GDI 中会做的事情，但它的扩展性不是很好。我在另一个问题中被告知要使用着色器，但经过大量研究，我仍然无法找到实现这一目标的方法。

我的应用程序循环遍历我的矩形数组的 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));
                }
            }
        }
    }

【问题讨论】：

您介意分享您在矩形阵列上执行的计算吗？如果您可以在着色器中进行这些计算，则可能并不难弄清楚。我无法弄清楚如何将大小为 800x600 的数组传递给着色器，因为数组显然限于 65536 个索引（16 位索引）；因此，如果您可以只在着色器中执行计算，而不必每次都传递大数组，那将更容易计算出来。
我已经更新了问题，提供了更多支持信息供您查询。
实际上，很抱歉，现在我考虑到这种方法并不是一个好主意，原因有很多。它要求一个纹理代表你的数组的初始状态，像素着色器不能修改纹理，它只能返回不同的值，所以每次调用它就像从初始状态开始一样，它完成了所有在 draw() 函数而不是 update() 函数中进行计算，这可能不是一个好主意。
你是在调用 Draw 一次吗？像素还是我错过了什么？如果是这样，那将是一个非常大的性能杀手。您应该使用 SetData 方法填充纹理。

标签： c# xna shader

【解决方案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;
                    }
    }
}

【讨论】：

不能再同意了。为了让 GPU 的东西快速工作，要走的路是让 CPU 将你的数据作为纹理上传。使用索引颜色纹理可能是最快的方案，但 32 位颜色可能会执行得很好。着色器写起来很有趣，但在这种情况下它们可能不会增加价值。
不感兴趣...您怎么知道要从设备中删除的纹理位于索引 [0] 处？
我认为因为它是一个如此简单的示例，并且只绘制了一个纹理，因此您可以假设它的索引为 0。如果该示例具有多个纹理，那么我想我会假设它们按照绘制顺序在图形设备中，但我还没有找到支持它的来源，抱歉。

【解决方案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();

希望对您有所帮助...我可以从我的引擎中挖掘更多信息，所以请询问。

【讨论】：

我不是着色器专家，但我认为您无法在顶点或像素着色器中操作底层纹理。因此，您必须修改游戏代码中的纹理，类似于 Texture2D.SetData()。但是，如果您有一个基于数组值定义的 800x600 纹理，您甚至不需要像素着色器。每次只需使用 Spritebatch 将纹理绘制到屏幕上即可。
您可以在读取另一个纹理时渲染到一个纹理。所以它不是修改纹理，而是每帧生成一个新的纹理。这就是为什么我会使用两个纹理并交换它们。
我有兴趣（也许发帖人也会）看看这是怎么做到的。你有任何可以发布的例子的链接吗？谢谢！
感谢您发布代码！我还有几个问题。 SetTexture 是类的成员函数吗？当您使用它时，我找不到关于该功能的任何 XNA 文档。此外，如果您查看他的更新函数，它会引用并更新相邻像素。我认为像素着色器一次只能返回一个像素的值。他的像素着色器中的代码如何能够计算附近像素的值并在它应该返回它正在处理的当前像素的值时设置该特定值？
啊，复制粘贴怪物做到了……它只是一种在设备上设置纹理的包装方法。现已编辑帖子。

【解决方案3】：

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

【讨论】：

【解决方案4】：

在您的场景中添加一个广告牌（直接在相机前面，使其恰好占据 800x600 像素）。

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

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

【讨论】：