Блог

У меня полурабочее использование буфера трафаретов в WebGL. Это отлично работает в Firefox, но не работает в Chrome (и Internet Explorer также). Остальная часть приложения продолжает функционировать без ошибок, за исключением того, что трафарет игнорируется.

Здесь Firefox правильно создает трафарет, поэтому зеленый прямоугольник отображается с отверстием в нем. Вот демонстрация jsFiddle: http://jsfiddle.net/XH9eC/3 /

Я включаю режим трафарета и отключаю цветовую маску:

 gl.colorMask(gl.FALSE, gl.FALSE, gl.FALSE, gl.FALSE);
gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
 

Затем я отображаю квадрат в середине экрана

Затем я меняю режим трафарета и включаю color:

 gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.EQUAL, 0, 0xFF);
gl.stencilOp(gl.ZERO, gl.ZERO, gl.ZERO)
 

И, наконец, я отображаю зеленый фон.

Если это имеет значение, это код, который я использую для рендеринга фона и квадратного трафарета (я просто использую разные вершины):

 var background = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, background);
gl.vertexAttribPointer(position_location, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0,
    800, 600,
    0, 600,
    0, 0,
    800, 0,
    800, 600
]), gl.STATIC_DRAW);
 

Я столкнулся с этой проблемой с другим кодом и еще не исправил ее. Я видел другие примеры использования буфера трафаретов в Chrome.

Это звучит как ошибка в Firefox. Запустите этот тест в Firefox и посмотрите, проходит ли он.

Предполагается, что вам нужно запросить буфер трафарета при создании контекста WebGL, передав stencil:true как в

     var gl = canvas.getContext("webgl", {stencil:true});
 

Запрос буфера трафаретов не гарантирует, что он у вас есть. Для проверки вы можете использовать

     var contextAttributes = gl.getContextAttributes();
    var haveStencilBuffer = contextAttributes.stencil;