WebGL中的模板缓冲区

无源C

如何为我最简单的程序使用模板缓冲区?我已经阅读了许多不同的主题,但是没有找到详细的指南。我想在创建的四面体的每一侧切孔。

在此处输入图片说明

请逐步向我解释使用模板缓冲区吗?

链接到我的程序

man

要使用模板缓冲区,您必须在创建webgl上下文时首先请求它

const gl = someCanvasElement.getContext('webgl', {stencil: true});

然后打开模板测试

  gl.enable(gl.STENCIL_TEST);

设置测试,使其始终通过并将参考值设置为1

  gl.stencilFunc(
     gl.ALWAYS,    // the test
     1,            // reference value
     0xFF,         // mask
  );

并设置操作,以便在模板和深度测试均通过时将模板设置为参考值

  gl.stencilOp(
     gl.KEEP,     // what to do if the stencil test fails
     gl.KEEP,     // what to do if the depth test fails
     gl.REPLACE,  // what to do if both tests pass
  );

然后,我们绘制第一个内部三角形

... lots of setup for a single triangle ...

gl.drawArrays(...) or gl.drawElements(...)

然后我们更改测试,使其仅在模板为零时通过

  gl.stencilFunc(
     gl.EQUAL,     // the test
     0,            // reference value
     0xFF,         // mask
  );
  gl.stencilOp(
     gl.KEEP,     // what to do if the stencil test fails
     gl.KEEP,     // what to do if the depth test fails
     gl.KEEP,     // what to do if both tests pass
  );

现在我们可以绘制其他内容(较大的三角形),它只会在模板缓冲区中只有0的位置(除了第一个三角形的绘制位置)无处不在。

例:

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl', {stencil: true});

const vs = `
attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = matrix * position;
}
`;

const fs = `
precision mediump float;
uniform vec4 color;
void main() {
  gl_FragColor = color;
}
`;

const program = twgl.createProgram(gl, [vs, fs]);
const posLoc = gl.getAttribLocation(program, 'position');
const matLoc = gl.getUniformLocation(program, 'matrix');
const colorLoc = gl.getUniformLocation(program, 'color');

const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
   0, -1,
   1,  1,
  -1,  1,
]), gl.STATIC_DRAW);

gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(
    posLoc,    // attribute location
    2,         // 2 value per vertex
    gl.FLOAT,  // 32bit floating point values
    false,     // don't normalize
    0,         // stride (0 = base on type and size)
    0,         // offset into buffer
);

// clear the stencil to 0 (the default)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

gl.useProgram(program);

// turn on the stencil
gl.enable(gl.STENCIL_TEST);

// Set the stencil test so it always passes
// and the reference to 1
gl.stencilFunc(
   gl.ALWAYS,    // the test
   1,            // reference value
   0xFF,         // mask
);
// Set it so we replace with the reference value (1)
gl.stencilOp(
   gl.KEEP,     // what to do if the stencil test fails
   gl.KEEP,     // what to do if the depth test fails
   gl.REPLACE,  // what to do if both tests pass
);

// draw a white small triangle
gl.uniform4fv(colorLoc, [1, 1, 1, 1]); // white
gl.uniformMatrix4fv(matLoc, false, m4.scaling([0.2, 0.2, 1]));
gl.drawArrays(gl.TRIANGLES, 0, 3);


// Set the test that the stencil must = 0
gl.stencilFunc(
   gl.EQUAL,     // the test
   0,            // reference value
   0xFF,         // mask
);
// don't change the stencil buffer on draw
gl.stencilOp(
   gl.KEEP,     // what to do if the stencil test fails
   gl.KEEP,     // what to do if the depth test fails
   gl.KEEP,  // what to do if both tests pass
);

// draw a large green triangle
gl.uniform4fv(colorLoc, [0, 1, 0, 1]); // green
gl.uniformMatrix4fv(matLoc, false, m4.scaling([0.9, -0.9, 1]));
gl.drawArrays(gl.TRIANGLES, 0, 3);
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

webgl中绑定缓冲区的逻辑是什么?

来自分类Dev

WebGL-从内存渲染缓冲区

来自分类Dev

WebGL模板缓冲区仅在Firefox中有效

来自分类Dev

OpenGL ES2.0将8位图像加载到模板缓冲区中

来自分类Dev

WebGL将纹理帧缓冲区复制到纹理帧缓冲区?

来自分类Dev

解除绑定WebGL缓冲区,值得吗?

来自分类Dev

无法使用模板缓冲区在OpenTK,简单的2D Quad中工作

来自分类Dev

为什么WebGL“清除”吸引前端缓冲区?

来自分类Dev

深度缓冲区和模板缓冲区问题QML

来自分类Dev

WebGL。是否在GPU中创建缓冲区?

来自分类Dev

在webgl中共享缓冲区

来自分类Dev

更新WebGL 2中的统一缓冲区数据?

来自分类Dev

模板缓冲区在现代OpenGL中是否仍然有用?

来自分类Dev

Webgl:大步不行。不跨越缓冲区中的过去值

来自分类Dev

如何使用JavaScript从S3缓冲区数据中获取HTML模板文件?

来自分类Dev

OpenGL 16位模板缓冲区?

来自分类Dev

通过WebGL支持模板缓冲区

来自分类Dev

Webgl:销毁或重用缓冲区/纹理?

来自分类Dev

在金属中如何清除深度缓冲区或模板缓冲区?

来自分类Dev

在WebGL中渲染缓冲区副本时是否可以指定颜色?

来自分类Dev

深度+模板帧缓冲区问题

来自分类Dev

WebGL:同时使用纹理和颜色缓冲区

来自分类Dev

Webgl和dart每帧更改顶点缓冲区中的数据

来自分类Dev

使用颜色缓冲区时WebGL渲染失败

来自分类Dev

WebGL;缓冲区还是uniform4fv?

来自分类Dev

更新WebGL 2中的统一缓冲区数据?

来自分类Dev

如何在 WebGL 中为输出纹理或帧缓冲区提供偏移量?

来自分类Dev

示例默认 WebGL 颜色缓冲区

来自分类Dev

WebGL 渲染缓冲区

Related 相关文章

热门标签

归档