PDA

View Full Version : Object outlining problem in WebGL



ibequa
08-21-2016, 08:27 PM
I can't seem to figure out my problem with stencil buffer in object outlining algo.


function init() {
...
gl.enable(gl.STENCIL_TEST);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
...
}

var mscaled = []; // scaled model matrix of a cube
function render() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
gl.stencilMask(0xFF);
// use program1
// set attrib pointers
// bind cube's ebo buffer
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

gl.stencilFunc(gl.NOTEQUAL, 1, 0xFF);
gl.stencilMask(0x00);

// set scaled model matrix
mat4.fromRotationTranslationScale(mscaled, cube.rotation, cube.translation, vec3.fromValues(1.1, 1.1, 1.1));

// use program2
// set attrib pointers
// bind cube's ebo buffer
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
}
But it just draws the whole second cube on top of the first, like there's no stencil test.

GClements
08-21-2016, 11:26 PM
Does the framebuffer have a stencil buffer? If it doesn't, the effect is as if stencil tests are disabled.

ibequa
08-22-2016, 05:24 AM
Does the framebuffer have a stencil buffer? If it doesn't, the effect is as if stencil tests are disabled.

I'm testing it on the latest versions of Safari and Chrome.

ibequa
08-22-2016, 05:41 AM
Apparently I had to create a context this way:
canvas.getContext('webgl', {stencil: true})
to request the stencil buffer.