Libgdx Трафарет и ShapeRenderer

Я пытаюсь сделать что-то вроде этого:

образец изображения

Весь экран будет черным, тогда внутренности треугольной формы - это те части, которые будут только появляться.

Я пытался использовать SCISSOR, но это по форме прямоугольник.

* Исходный источник изображения: https://www.html5rocks.com/static/images/screenshots/casestudies/onslaught/controls_tutorial.png

1 ответ

Решение

Существует несколько различных способов визуализации маскированного изображения. Одним из возможных способов является использование буфера глубины. Я написал небольшой метод, который показывает процесс настройки буфера с помощью ShapeRenderer, чтобы определить треугольную область изображения для визуализации и маскирования остатка. Треугольную маску можно заменить любой другой формой, которую ShapeRenderer способен отобразить.

// For a 2D image use an OrthographicCamera
OrthographicCamera cam = new OrthographicCamera();
ShapeRenderer shapes = new ShapeRenderer();
cam.setToOrtho(true, screenWidth, screenHeight);
shapes.setProjectionMatrix(cam.combined);

private void renderStencilImage(float runTime){
    // Clear the buffer
    Gdx.gl.glClearDepthf(1.0f);
    Gdx.gl.glClear(GL30.GL_DEPTH_BUFFER_BIT);
    // Disable writing to frame buffer and
    // Set up the depth test
    Gdx.gl.glColorMask(false, false, false, false);
    Gdx.gl.glDepthFunc(GL20.GL_LESS);
    Gdx.gl.glEnable(GL20.GL_DEPTH_TEST);
    Gdx.gl.glDepthMask(true);
    //Here add your mask shape rendering code i.e. rectangle
    //triangle, or other polygonal shape mask
    shapes.begin(ShapeRenderer.ShapeType.Filled);
    shapes.setColor(1f, 1f, 1f, 0.5f);
    shapes.triangle(x1,y1,x2,y2,x3,y3);
    shapes.end();
    // Enable writing to the FrameBuffer
    // and set up the texture to render with the mask
    // applied
    Gdx.gl.glColorMask(true, true, true, true);
    Gdx.gl.glDepthMask(true);
    Gdx.gl.glDepthFunc(GL20.GL_EQUAL);
    // Here add your texture rendering code
    batcher.begin();
    renderFrame(runTime);
    batcher.end();
    // Ensure depth test is disabled so that depth
    // testing is not run on other rendering code.
    Gdx.gl.glDisable(GL20.GL_DEPTH_TEST);
}

Прежде чем вызывать метод, вы должны сначала создать ShapeRenderer и установить матрицу проекции. Вы также должны установить параметр глубины буфера в конфигурации Android в методе onCreate следующим образом:

protected void onCreate (Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
    config.depth = 15;
    initialize(new game(), config);
}

Параметры для glDepthFunc определяют, как маска применяется к текстуре. Посмотрите вики OpenGL, чтобы увидеть аргументы, которые можно передать функции.

Другие вопросы по тегам