Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 4 of 4

Thread: Object outlining problem in WebGL

  1. #1
    Junior Member Newbie
    Join Date
    Apr 2016
    Posts
    6

    Object outlining problem in WebGL

    I can't seem to figure out my problem with stencil buffer in object outlining algo.
    Code :
        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.

  2. #2
    Senior Member OpenGL Guru
    Join Date
    Jun 2013
    Posts
    3,008
    Does the framebuffer have a stencil buffer? If it doesn't, the effect is as if stencil tests are disabled.

  3. #3
    Junior Member Newbie
    Join Date
    Apr 2016
    Posts
    6
    Quote Originally Posted by GClements View Post
    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.

  4. #4
    Junior Member Newbie
    Join Date
    Apr 2016
    Posts
    6

    Solved

    Apparently I had to create a context this way:
    Code :
    canvas.getContext('webgl', {stencil: true})
    to request the stencil buffer.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •