Question

我试图用LibGDX做一个复古风格的小游戏，我想让玩家选择几个角色的颜色，所以我想加载png索引图像然后以编程方式更新调色板...我是多么错误^^ U

似乎彩色托盘已经成为过去，似乎也是使用着色器获得类似结果的最佳选择。

这是一张图片，解释了我现在正在尝试的内容：

What I'm trying to do

我的意图是使用2张图片。其中之一，pixel_guy.png是一个仅有6种颜色的png图像（这些颜色是其原始调色板）。另一个图像colortable.png将是一个6x6像素的png，其中包含6个调色板，每个调色板有6种颜色（每行是不同的调色板）。 colortable.png的第一行像素中的颜色与pixel_guy.png中使用的颜色匹配，这将是第一个/原始调色板，其他行将是调色板2到6.我尝试实现是使用colortable的第一个调色板来索引pixelguy颜色，然后通过向着色器发送一个数字（从2到6）来更改调色板。

在做了一些研究之后，我找到了post in gamedev stackexchange，显然这正是我想要的，所以我试着去测试它。

我创建了顶点和片段着色器并加载了我的纹理（我想要交换的调色板，以及包含多个调色板的调色板），但输出是一个意外的白色图像。

我的顶点着色器：

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;
    v_texCoords = a_texCoord0;
    gl_Position = u_projTrans * a_position;
}

My Fragment Shader：

    // Fragment shader
// Thanks to Zack The Human https://gamedev.stackexchange.com/questions/43294/creating-a-retro-style-palette-swapping-effect-in-opengl/

uniform sampler2D texture; // Texture to which we'll apply our shader? (should its name be u_texture?)
uniform sampler2D colorTable; // Color table with 6x6 pixels (6 palettes of 6 colors each)
uniform float paletteIndex; // Index that tells the shader which palette to use (passed here from Java)

void main()
{
        vec2 pos = gl_TexCoord[0].xy;
        vec4 color = texture2D(texture, pos);
        vec2 index = vec2(color.r + paletteIndex, 0);
        vec4 indexedColor = texture2D(colorTable, index);
        gl_FragColor = indexedColor;      
}

我用来制作纹理绑定并将调色板编号传递给着色器的代码：

package com.test.shaderstest;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShaderProgram;

public class ShadersTestMain extends ApplicationAdapter {
    SpriteBatch batch;

    Texture imgPixelGuy;
    Texture colorTable;

    private ShaderProgram shader;
    private String shaderVertIndexPalette, shaderFragIndexPalette;

    @Override
    public void create () {
        batch = new SpriteBatch();

        imgPixelGuy = new Texture("pixel_guy.png"); // Texture to which we'll apply our shader
        colorTable =  new Texture("colortable.png"); // Color table with 6x6 pixels (6 palettes of 6 colors each)

        shaderVertIndexPalette = Gdx.files.internal("shaders/indexpalette.vert").readString();
        shaderFragIndexPalette = Gdx.files.internal("shaders/indexpalette.frag").readString();

        ShaderProgram.pedantic = false; // important since we aren't using some uniforms and attributes that SpriteBatch expects

        shader = new ShaderProgram(shaderVertIndexPalette, shaderFragIndexPalette);
        if(!shader.isCompiled()) {
            System.out.println("Problem compiling shader :(");
        }
        else{
            batch.setShader(shader);
            System.out.println("Shader applied :)");
        }

        shader.begin();
        shader.setUniformi("colorTable", 1); // Set an uniform called "colorTable" with index 1
        shader.setUniformf("paletteIndex", 2.0f); // Set a float uniform called "paletteIndex" with a value 2.0f, to select the 2nd palette 
        shader.end();

        colorTable.bind(1); // We bind the texture colorTable to the uniform with index 1 called "colorTable"
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor(0.3f, 0.3f, 0.3f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.begin();
        batch.draw(imgPixelGuy, 0, 0); // Draw the image with the shader applied
        batch.end();
    }
}

我不知道这是否是将浮点值传递给片段统一的正确方法。我不确定我尝试使用的代码片段是如何工作的。

编辑：我尝试了TenFour04建议的更改，并且完美无缺地工作了:)

这是预处理的精灵

Pre-processed sprite

我已使用更改（Java代码here，片段着色器here）更新了存储库，如果有人感兴趣，可以在此处下载：https://bitbucket.org/hcito/libgdxshadertest

编辑2：我刚刚向存储库添加了TenFour04建议的最后一个优化（将调色板索引传递给调用sprite.setColor（）方法的R通道中的每个sprite），它再次完美：）

Answer 1

我注意到了一些问题。

1）在片段着色器中，不应该vec2 index = vec2(color.r + paletteIndex, 0);为vec2 index = vec2(color.r, paletteIndex);，因此精灵纹理会告诉您哪一行，而paletteIndex会告诉您要查看哪一列颜色表？

2）调色板索引用作纹理坐标，因此需要是0到1之间的数字。设置如下：

int currentPalette = 2; //A number from 0 to (colorTable.getHeight() - 1)
float paletteIndex = (currentPalette + 0.5f) / colorTable.getHeight();
//The +0.5 is so you are sampling from the center of each texel in the texture

3）shader.end内部发生了对batch.end的调用，因此您需要在每一帧上设置制服，而不是create。如果您稍后进行任何多重纹理，也可以将每个帧的二级纹理绑定起来也是一个好主意。

@Override
public void render () {
    Gdx.gl.glClearColor(0.3f, 0.3f, 0.3f, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    colorTable.bind(1);

    //Must return active texture unit to default of 0 before batch.end 
    //because SpriteBatch does not automatically do this. It will bind the
    //sprite's texture to whatever the current active unit is, and assumes
    //the active unit is 0
    Gdx.gl.glActiveTexture(GL20.GL_TEXTURE0); 

    batch.begin(); //shader.begin is called internally by this line
    shader.setUniformi("colorTable", 1);
    shader.setUniformf("paletteIndex", paletteIndex);
    batch.draw(imgPixelGuy, 0, 0);
    batch.end(); //shader.end is called internally by this line

}

4）GPU无论如何都可能为你做这件事，但由于你没有使用顶点颜色，你可以从顶点着色器中删除涉及v_color的两行。

5）您可能还希望透明像素保持透明。所以我会更改片段着色器的最后一行以保留alpha：

gl_FragColor = vec4(indexedColor.rgb, color.a);

6）这个可能是你全白的原因。在片段着色器中，您应该使用v_texCoords而不是gl_TexCoord[0].xy，这是来自桌面OpenGL的东西，而不是在OpenGL ES中使用。所以你的片段着色器应该是：

uniform sampler2D texture; // Texture to which we'll apply our shader? (should its name be u_texture?)
uniform sampler2D colorTable; // Color table with 6x6 pixels (6 palettes of 6 colors each)
uniform float paletteIndex; // Index that tells the shader which palette to use (passed here from Java)
varying vec2 v_texCoords;

void main()
{
    vec4 color = texture2D(texture, v_texCoords);
    vec2 index = vec2(color.r, paletteIndex);
    vec4 indexedColor = texture2D(colorTable, index);
    gl_FragColor = vec4(indexedColor.rgb, color.a); // This way we'll preserve alpha      
}

7）您的源精灵需要预先处理以映射到调色板查找表的列。您的着色器正在从纹理的红色通道中拉出坐标。因此，您需要对源图像中的每种像素颜色进行颜色替换。您可以提前手动完成此操作。这是一个例子：

肤色是六列（0-5）中的索引2。就像我们计算paletteIndex一样，我们将其标准化为像素的中心：skinToneValue = (2+0.5) / 6 = 0.417。 6是六列。然后在绘图程序中，您需要适当的红色值。

0.417 * 255 = 106，六角形为6A，所以你需要颜色＃6A0000。用这种颜色替换所有皮肤像素。等等其他色调。

修改

另一个优化是您可能希望能够将所有精灵一起批量处理。现在的样子，您必须分别为每个调色板分组所有精灵，并为每个调色板调用batch.end。您可以通过将paletteIndex放入每个精灵的顶点颜色来避免这种情况，因为我们无论如何都不使用顶点颜色。

所以你可以把它设置为精灵的四个颜色通道中的任何一个，让我们说R通道。如果使用Sprite类，您可以调用sprite.setColor(paletteIndex, 0,0,0);，然后在为每个精灵调用batch.setColor(paletteIndex,0,0,0);之前调用batch.draw。

顶点着色器需要声明varying float paletteIndex;并将其设置为：

paletteIndex = a_color.r;

片段着色器需要声明varying float paletteIndex;而不是uniform float paletteIndex;。

当然，你不再应该致电shader.setUniformf("paletteIndex", paletteIndex);。

使用OpenGL着色器模拟调色板交换（在LibGDX中）

1 个答案: