Как имитировать «переполнение: скрытый» в three.js или WebGL?

Question

В настоящее время я работаю над графическим интерфейсом WebGL для своих игр, и я действительно хочу углубиться в графику графического процессора, поскольку он намного более плавный, чем CSS-рендеринг WebKit.

Можно ли создать вид прокрутки, в котором внутренние сетки следуют правилу переполнения, чтобы скрыться при выходе за границы родительской сетки?

Возможно, шейдер может работать, какие-нибудь предложения?

Спасибо!

Answer 1

Если вы хотите обрезать только по прямоугольникам, вы можете использовать тест ножниц.

gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);

Теперь WebGL будет отображаться только между x, y, шириной и высотой.

THREE.js также имеет настройки ножниц WebGLRenderer.setScissor и WebGLRenderer.setScissorTest

Answer 2

Вы можете использовать «тест трафарета» для достижения этой цели. Тест трафарета позволяет маскировать последующую визуализацию геометрии для пикселей, которые вы обозначили как «трафарет».

С точки зрения того, что вы делаете, вы можете использовать технику трафарета, чтобы:

1. укажите внутреннюю часть (прямоугольник?) Области прокрутки как "трафарет". На этом этапе вы «нарисуете» прямоугольник, представляющий границу вашей области с возможностью прокрутки, в «буфер трафарета».
2. Теперь, когда область трафарета определена и отрисована в буфере трафарета, вы затем визуализируете фактическое содержимое области прокрутки. Поскольку буфер трафарета активен, содержимое области полосы прокрутки обрезается прямоугольником, который вы нарисовали в «буфере трафарета». Любое содержимое, отображаемое за пределами «трафаретных пикселей», не будет отображаться.

Чтобы дать вам представление о том, как этого добиться, вы можете определить последовательность визуализации следующим образом:

    // Clearing the stencil buffer
    gl.clearStencil(0);
    gl.clear(gl.STENCIL_BUFFER_BIT);


    // Tell webgl how to render into the stencil buffer
    gl.stencilFunc(gl.ALWAYS, 1, 1);
    gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
    gl.colorMask(false, false, false, false);

    gl.enable(gl.STENCIL_TEST);

    // Renders the inner rectangle of scroll area
    drawInnerRectangleOfScrollArea();

    // Tell webgl how to clip rendering of the scroll area content
    gl.stencilFunc(gl.EQUAL, 1, 1);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
    gl.colorMask(true, true, true, true);

    // Renders the inner contents of scroll area (ie the list of items, etc)
    drawInnerContentsOfScrollArea();

    // Reset the stenicl test state so to not affect any other rendering
    gl.disable(gl.STENCIL_TEST);