Wireframe 3d.js model from .vtk file

I am trying to replicate the Three.js WireframeHelper results using shaders. I want to show a wireframe using only geometry. I am using VTKLoader used in examples and based my code on jsfiddle .

I created a jsfiddle to highlight my problem.

problem example

The model loads correctly, but the shader only draws the edges of the selected faces. I couldn't figure out why some of the triangles are not drawn with edges.

Is it because I am loading my data from a .vtk file (missing data or just a bad loader)? I think my data is fine as the built-in WireframeHelper is able to draw the edges of the triangle correctly, but otherwise I don't know why only some triangles are drawn and not others.

I'm using a fairly common shader so I don't think this is a problem.

<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>

      

My only guess is that there is something strange with VTKLoader, has anyone had any problems with the example loaders from threejs.org?

0


source to share





All Articles