来自.vtk文件的Three.js线框模型

时间:2015-06-03 22:47:10

标签: javascript three.js

我一直试图使用着色器复制Three.js WireframeHelper的结果。我想仅使用几何信息显示线框。我使用的是示例中使用的VTKLoader,并且我的代码基于jsfiddle示例。

我创建了一个jsfiddle示例来突出我的问题。

problem example

模型正确加载,但着色器似乎只绘制选定面的边缘。我一直无法弄清楚为什么有些三角形没有边缘绘制。

这是因为我从.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的示例加载器的问题?

0 个答案:

没有答案