libgdx - 画笔画线的 blendFunc? (additive/non-additive 混合物)
libgdx - blendFunc for brush line drawing? (additive/non-additive mixture)
我正在为两点之间的直线中的每一步在每个像素处将精灵绘制到帧缓冲区,但我遇到了混合问题:
我目前正在使用:
(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
然后,在我的着色器中我这样做:
if( color.a == 0 )
color.rgb = 0;
但是,如果您查看红色和绿色的星星,您会看到 "additive blending" 发生在 alpha 介于 (0,1) 之间的位置。
如果不添加混合,就会出现这种 3D 效果:
有没有一种方法可以对相似的颜色进行叠加混合,但在颜色不匹配时避免?
它应该是这样的:
您可以使用预乘 alpha 执行此操作。
首先你需要正确设置你的纹理。像这样在黑色上画白色:
然后将纹理的亮度复制到它的 Alpha 通道中。在 GIMP 中,您可以通过右键单击图层,选择添加图层蒙版,然后选择图层的灰度副本来执行此操作。它看起来像这样(如 Gimp 所示):
然后您可以根据需要重新着色它的 RGB 通道,尽管将其保留为白色并在您的代码中着色会更通用。
在您的代码中,当您绘制形状时,使用混合函数进行预乘 alpha:
batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
并使用默认的 SpriteBatch 着色器绘制它。绘制形状后,切换回常规 alpha 混合:
batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
示例游戏:
public class GameMain extends ApplicationAdapter implements InputProcessor{
SpriteBatch batch;
Texture star;
Color color = new Color();
Viewport viewport;
int screenWidth, screenHeight;
FrameBuffer fbo;
boolean shouldClearFBO = false;
boolean fboUpdated = false;
OrthographicCamera fullScreenCamera;
boolean touchDown = false;
Vector2 touchLocation = new Vector2();
int colorIndex = 0;
static final int[] COLORS = {0xff0000ff, 0x00ff00ff, 0x0000ffff, 0xffff00ff, 0xff00ffff, 0x00ffffff, 0xffffffff};
static final float SIZE = 150;
@Override
public void create () {
batch = new SpriteBatch();
star = new Texture("star.png");
viewport = new ExtendViewport(800, 480);
fullScreenCamera = new OrthographicCamera();
Gdx.input.setInputProcessor(this);
}
@Override
public void resize (int width, int height){
viewport.update(width, height, true);
fullScreenCamera.setToOrtho(false, width, height);
fullScreenCamera.position.set(width/2, height/2, 0);
fullScreenCamera.update();
fboUpdated = false;
screenWidth = width;
screenHeight = height;
}
@Override
public void render () {
if (!fboUpdated){
fboUpdated = true;
if (fbo!=null)
fbo.dispose();
fbo = new FrameBuffer(Pixmap.Format.RGBA8888, screenWidth, screenHeight, false);
fbo.begin();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
fbo.end();
}
color.set(COLORS[colorIndex]);
fbo.begin();
if (shouldClearFBO){
shouldClearFBO = false;
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
}
if (touchDown){
batch.setProjectionMatrix(viewport.getCamera().combined);
batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
batch.begin();
batch.setColor(color);
batch.draw(star, touchLocation.x - SIZE/2, touchLocation.y - SIZE/2, SIZE, SIZE);
batch.end();
}
fbo.end();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setColor(Color.WHITE);
batch.setProjectionMatrix(fullScreenCamera.combined);
batch.setBlendFunction(GL20.GL_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
batch.begin();
batch.draw(fbo.getColorBufferTexture(), 0, screenHeight, screenWidth, -screenHeight);
batch.end();
}
@Override
public boolean keyDown(int keycode) {
switch (keycode){
case Input.Keys.SPACE:
colorIndex = (++colorIndex) % COLORS.length;
return true;
case Input.Keys.X:
shouldClearFBO = true;
return true;
}
return false;
}
@Override
public boolean keyUp(int keycode) {
return false;
}
@Override
public boolean keyTyped(char character) {
return false;
}
@Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
viewport.unproject(touchLocation.set(screenX, screenY));
if (pointer==1){
colorIndex = (++colorIndex) % COLORS.length;
return true;
}
if (pointer == 2){
shouldClearFBO = true;
return true;
}
touchDown = true;
return true;
}
@Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
touchDown = false;
return true;
}
@Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
viewport.unproject(touchLocation.set(screenX, screenY));
return true;
}
@Override
public boolean mouseMoved(int screenX, int screenY) {
return false;
}
@Override
public boolean scrolled(int amount) {
return false;
}
}
我正在为两点之间的直线中的每一步在每个像素处将精灵绘制到帧缓冲区,但我遇到了混合问题:
我目前正在使用:
(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
然后,在我的着色器中我这样做:
if( color.a == 0 )
color.rgb = 0;
但是,如果您查看红色和绿色的星星,您会看到 "additive blending" 发生在 alpha 介于 (0,1) 之间的位置。
如果不添加混合,就会出现这种 3D 效果:
有没有一种方法可以对相似的颜色进行叠加混合,但在颜色不匹配时避免?
它应该是这样的:
您可以使用预乘 alpha 执行此操作。
首先你需要正确设置你的纹理。像这样在黑色上画白色:
然后将纹理的亮度复制到它的 Alpha 通道中。在 GIMP 中,您可以通过右键单击图层,选择添加图层蒙版,然后选择图层的灰度副本来执行此操作。它看起来像这样(如 Gimp 所示):
然后您可以根据需要重新着色它的 RGB 通道,尽管将其保留为白色并在您的代码中着色会更通用。
在您的代码中,当您绘制形状时,使用混合函数进行预乘 alpha:
batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
并使用默认的 SpriteBatch 着色器绘制它。绘制形状后,切换回常规 alpha 混合:
batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
示例游戏:
public class GameMain extends ApplicationAdapter implements InputProcessor{
SpriteBatch batch;
Texture star;
Color color = new Color();
Viewport viewport;
int screenWidth, screenHeight;
FrameBuffer fbo;
boolean shouldClearFBO = false;
boolean fboUpdated = false;
OrthographicCamera fullScreenCamera;
boolean touchDown = false;
Vector2 touchLocation = new Vector2();
int colorIndex = 0;
static final int[] COLORS = {0xff0000ff, 0x00ff00ff, 0x0000ffff, 0xffff00ff, 0xff00ffff, 0x00ffffff, 0xffffffff};
static final float SIZE = 150;
@Override
public void create () {
batch = new SpriteBatch();
star = new Texture("star.png");
viewport = new ExtendViewport(800, 480);
fullScreenCamera = new OrthographicCamera();
Gdx.input.setInputProcessor(this);
}
@Override
public void resize (int width, int height){
viewport.update(width, height, true);
fullScreenCamera.setToOrtho(false, width, height);
fullScreenCamera.position.set(width/2, height/2, 0);
fullScreenCamera.update();
fboUpdated = false;
screenWidth = width;
screenHeight = height;
}
@Override
public void render () {
if (!fboUpdated){
fboUpdated = true;
if (fbo!=null)
fbo.dispose();
fbo = new FrameBuffer(Pixmap.Format.RGBA8888, screenWidth, screenHeight, false);
fbo.begin();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
fbo.end();
}
color.set(COLORS[colorIndex]);
fbo.begin();
if (shouldClearFBO){
shouldClearFBO = false;
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
}
if (touchDown){
batch.setProjectionMatrix(viewport.getCamera().combined);
batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
batch.begin();
batch.setColor(color);
batch.draw(star, touchLocation.x - SIZE/2, touchLocation.y - SIZE/2, SIZE, SIZE);
batch.end();
}
fbo.end();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setColor(Color.WHITE);
batch.setProjectionMatrix(fullScreenCamera.combined);
batch.setBlendFunction(GL20.GL_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
batch.begin();
batch.draw(fbo.getColorBufferTexture(), 0, screenHeight, screenWidth, -screenHeight);
batch.end();
}
@Override
public boolean keyDown(int keycode) {
switch (keycode){
case Input.Keys.SPACE:
colorIndex = (++colorIndex) % COLORS.length;
return true;
case Input.Keys.X:
shouldClearFBO = true;
return true;
}
return false;
}
@Override
public boolean keyUp(int keycode) {
return false;
}
@Override
public boolean keyTyped(char character) {
return false;
}
@Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
viewport.unproject(touchLocation.set(screenX, screenY));
if (pointer==1){
colorIndex = (++colorIndex) % COLORS.length;
return true;
}
if (pointer == 2){
shouldClearFBO = true;
return true;
}
touchDown = true;
return true;
}
@Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
touchDown = false;
return true;
}
@Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
viewport.unproject(touchLocation.set(screenX, screenY));
return true;
}
@Override
public boolean mouseMoved(int screenX, int screenY) {
return false;
}
@Override
public boolean scrolled(int amount) {
return false;
}
}