Wie kann ich die Farbbeschränkungen des NES mit einem HLSL-Pixelshader replizieren?

Da der 256-Farben-Modus im Direct3D-Modus nicht mehr unterstützt wird, kam mir die Idee, stattdessen einen Pixel-Shader zu verwenden, um die NES-Palette aller möglichen Farben zu simulieren, damit Objekte ausgeblendet werden und bei Alphakanälen keine glatten Ausblendungen auftreten . (Ich weiß, dass Objekte auf dem NES nicht wirklich ausgeblendet werden konnten, aber ich habe alle Objekte, die eingeblendet und ausgeblendet werden, auf einem festen schwarzen Hintergrund, der mit Palettentausch möglich wäre. Außerdem wird der Bildschirm eingeblendet und ausgeblendet, wenn Sie anhalten Ich weiß, dass dies auch mit Palettentausch möglich war, wie es in einigen Mega-Man-Spielen der Fall war.) Das Problem ist, dass ich so gut wie nichts über HLSL-Shader weiß.

Wie mache ich es?

Im Pixel-Shader können Sie eine 256x256-Textur2D mit den Palettenfarben übergeben, die alle horizontal in einer Reihe angeordnet sind. Dann würden Ihre NES-Texturen in Direct3D-Texture2Ds konvertiert, wobei jedes Pixel in einen Indexwert von 0-255 konvertiert würde. Es gibt ein Texturformat, das nur den roten Wert in D3D9 verwendet. Die Textur würde also nur 8 Bit pro Pixel einnehmen, aber die Daten, die in den Shader gelangen, wären von 0-1.

// Der Pixel Shader könnte so aussehen:

float4 mainPS() : COLOR0
{
    float4 colorIndex = tex2D(MainTexture, uv);
    float4 palletColor = tex2D(PalletTexture, float2(colorIndex.x, 0);
    return palletColor;
}

BEARBEITEN: Richtiger wäre es, alle Mischpalettenversionen, die Sie benötigen, vertikal in der Textur auszurichten und mit dem Alpha-Wert Ihres colorIndex zu referenzieren:

float4 mainPS() : COLOR0
{
    float4 colorIndex = tex2D(MainTexture, uv);
    float4 palletColor = tex2D(PalletTexture, float2(colorIndex.x, colorIndex.a);
    return palletColor;
}

Ein dritter Weg wäre, einfach die niedrige Fade-Qualität von NES zu fälschen, indem man die Alpha-Farbe schattiert:

float4 mainPS() : COLOR0
{
    float4 colorIndex = tex2D(MainTexture, uv);
    float4 palletColor = tex2D(PalletTexture, float2(colorIndex.x, 0);
    palletColor.a = floor(palletColor.a * fadeQuality) / fadeQuality;
    //NOTE: If fadeQuality where to equal say '3' there would be only 3 levels of fade.
    return palletColor;
}

Wenn Ihnen die Verwendung des Texturspeichers nicht wirklich wichtig ist (und die Idee, eine verrückte Menge an Texturspeicher zu verwenden, um einen Retro-Look zu erzielen, hat eine perverse Ausstrahlung), können Sie eine 3D-Textur mit 256 x 256 x 256 erstellen, die alle RGB-Kombinationen Ihrer ausgewählten Palette zuordnet . Dann wird es in Ihrem Shader nur eine Codezeile am Ende:

return tex3d (paletteMap, color.rgb);

Es ist möglicherweise nicht einmal erforderlich, bis zu 256x256x256 zu wechseln - so etwas wie 64x64x64 ist möglicherweise ausreichend - und Sie können sogar Palettenzuordnungen mit dieser Methode ändern (jedoch mit erheblichen Kosten aufgrund eines großen dynamischen Texturupdates).

(Beide meiner Lösungen funktionieren nur, wenn Sie sich nicht darum kümmern, Paletten im laufenden Betrieb mit Shadern zu wechseln.)

Sie können jede Art von Textur verwenden und nur eine einfache Berechnung für einen Shader durchführen. Der Trick ist, dass Sie mehr Farbinformationen haben, als Sie benötigen. So werden Sie Informationen, die Sie nicht möchten, einfach los.

Die 8-Bit-Farbe ist in der Form RRRGGGBB . Das gibt Ihnen 8 Schattierungen von Rot und Grün und 4 Schattierungen von Blau.

Diese Lösung funktioniert für alle RGB (A) -Farbformat-Texturen.

float4 mainPS() : COLOR0
{
    const float oneOver7 = 1.0 / 8.0;
    const float oneOver3 = 1.0 / 3.0;

    float4 color = tex2D(YourTexture, uvCoord);
    float R = floor(color.r * 7.99) * oneOver7;
    float G = floor(color.g * 7.99) * oneOver7;
    float B = floor(color.b * 3.99) * oneOver3;

    return float4(R, G, B, 1);
}

Anmerkung: Ich habe das von oben geschrieben, aber ich bin mir wirklich sicher, dass es für Sie kompiliert und funktioniert

Eine andere Möglichkeit wäre die Verwendung des Texturformats D3DFMT_R3G3B2 , das tatsächlich mit 8-Bit-Grafiken identisch ist. Wenn Sie Daten in diese Textur einfügen, können Sie eine einfache Bitoperation pro Byte verwenden.

tex[index] = (R & 8) << 5 + ((G & 8) << 2) + (B & 4);