我一直试图使用着色器复制Three.js WireframeHelper的结果。我想仅使用几何信息显示线框。我使用的是示例中使用的VTKLoader,并且我的代码基于jsfiddle示例。
我创建了一个jsfiddle示例来突出我的问题。
模型正确加载,但着色器似乎只绘制选定面的边缘。我一直无法弄清楚为什么有些三角形没有边缘绘制。
这是因为我从.vtk文件加载我的数据(丢失数据或只是一个坏的加载器)?我认为我的数据很好,因为内置的WireframeHelper能够正确绘制三角形边缘,但除此之外我不知道为什么只绘制了一些三角形而不是其他三角形。
我使用的是相当常见的着色器,所以我不认为这是问题。
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec3 center;
varying vec3 vCenter;
void main() {
vCenter = center;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#extension GL_OES_standard_derivatives: enable
varying vec3 vCenter;
float edgeFactorTri() {
vec3 d = fwidth(vCenter.xyz);
vec3 a3 = smoothstep(vec3(0.0), d * 1.5, vCenter.xyz);
return min(min(a3.x, a3.y), a3.z);
}
void main() {
gl_FragColor.rgb = mix(vec3(1.0), vec3(0.2), edgeFactorTri());
gl_FragColor.a = 1.0;
}
</script>
我唯一的猜测是VTKLoader有些奇怪,有没有人遇到过来自threejs.org的示例加载器的问题?