根据基元顶点在 WEBGL 片段着色器中进行裁剪

Question

我是WEBGL的新手，我读了很多关于片段着色器的帖子。但是，我无法弄清楚如何在片段着色器中访问基元顶点(或每个顶点的标志(。

我的目标是在至少一个基元顶点被裁剪时丢弃片段。

感谢您的帮助

Answer 1

不能直接访问片段着色器中的顶点。默认情况下，片段着色器获得的唯一数据是正在栅格化的当前像素的屏幕坐标(画布/帧缓冲区坐标(和深度缓冲区值。您必须传入的所有其他数据。

在我的头顶上，在顶点着色器中，您可以计算顶点是否被裁剪，并将该信息作为变化传递给片段着色器。如果未裁剪，则传递 0，如果未剪辑，则传递 1。变化值，因此如果在片段着色器中变化> 0，则其中一个顶点被裁剪。

const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying float clipped;
void main() {
gl_Position = matrix * position;
clipped = (
any(lessThan(gl_Position.xyz, -gl_Position.www)) ||
any(greaterThan(gl_Position.xyz, gl_Position.www))
) ? 1.0
: 0.0;
}
`;
const fs = `
precision highp float;
varying float clipped;
void main() {
if (clipped > 0.0) {
discard;
}
gl_FragColor = gl_FrontFacing ? vec4(1, 0, 0, 1) : vec4(0, 0, 1, 1);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
// compile shaders, link program, look up locations
const prgInfo = twgl.createProgramInfo(gl, [vs, fs]);
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each of
// position, normals, texcoord, indices of a sphere.
const bufferInfo = twgl.primitives.createSphereBufferInfo(gl, 1, 8, 8);
function render(time) {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.enable(gl.DEPTH_TEST);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer for each attribute
twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
gl.useProgram(prgInfo.program);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 5.0;
const mat = m4.perspective(fov, aspect, near, far);
m4.translate(mat, [
Math.sin(time / 1200), 
Math.sin(time / 1300), 
Math.sin(time / 1400) - 1.8,
], mat);
m4.rotateX(mat, time / 1000, mat);
m4.rotateY(mat, time / 1100, mat);
// calls gl.uniform
twgl.setUniforms(prgInfo, {
matrix: mat, 
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

可能有更有效的方法，例如将三角形的所有顶点传递到顶点着色器，如果其中任何一个被剪裁，则将所有顶点设置为剪裁，以便三角形甚至不会被栅格化。

const vs = `
attribute vec4 position;
attribute vec4 position1;  // second vertex for triangle
attribute vec4 position2;  // third vertex for triangle
uniform mat4 matrix;
bool vertexClipped(vec4 clipspace) {
return any(lessThan(clipspace.xyz, -clipspace.www)) ||
any(greaterThan(clipspace.xyz, clipspace.www));
}
void main() {
gl_Position = matrix * position;
vec4 clipPosition1 = matrix * position1;
vec4 clipPosition2 = matrix * position2;

bool clipped = vertexClipped(gl_Position) ||
vertexClipped(clipPosition1) ||
vertexClipped(clipPosition2);

if (clipped) {
gl_Position = vec4(vec3(2), 1); // some offscreen value
}
}
`;
const fs = `
precision highp float;
void main() {
gl_FragColor = gl_FrontFacing ? vec4(1, 0, 0, 1) : vec4(0, 0, 1, 1);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
// compile shaders, link program, look up locations
const prgInfo = twgl.createProgramInfo(gl, [vs, fs]);
const verts = twgl.primitives.deindexVertices(twgl.primitives.createSphereVertices(1, 8, 8));
// copy the positions
const position1 = new Float32Array(verts.position);
const position2 = new Float32Array(verts.position);
// shift the positions so we can pass all 3 vertices for each triangle
// to the vertex shader for each iteration
for (let i = 0; i < position1.length; i += 9) {
{ 
// 0, 1, 2 => 1, 2, 0
const temp = position1.slice(i, i + 3);
position1.set(position1.slice(i + 3, i + 9), i);
position1.set(temp, i + 6);
}
{
// 0, 1, 2 => 2, 0, 1
const temp = position2.slice(i + 6, i + 9);
position2.set(position2.slice(i + 0, i + 6), i + 3);
position2.set(temp, i);
}  
}
verts.position1 = position1;
verts.position2 = position2;
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each of
// position, normals, texcoord, indices of a sphere.
const bufferInfo = twgl.createBufferInfoFromArrays(gl, verts);
function render(time) {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.enable(gl.DEPTH_TEST);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer for each attribute
twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
gl.useProgram(prgInfo.program);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 5.0;
const mat = m4.perspective(fov, aspect, near, far);
m4.translate(mat, [
Math.sin(time / 1200), 
Math.sin(time / 1300), 
Math.sin(time / 1400) - 1.8,
], mat);
m4.rotateX(mat, time / 1000, mat);
m4.rotateY(mat, time / 1100, mat);
// calls gl.uniform
twgl.setUniforms(prgInfo, {
matrix: mat, 
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

这可以说更有效，因为不是一次拒绝一个像素，而是拒绝整个三角形，甚至跳过每个像素的检查。不过，这需要更多的数据，因为我们需要能够同时将每个三角形的所有 3 个顶点传递给顶点着色器。

注意：如果你是WebGL的新手，你可能会发现这些文章很有用。