Question

我正试图为我的虚线制作一个着色器;但只有我能得到的是从原点到... + x方向（可能）的白线

如果我渲染此曲线（Ellipse.curve），它们就可以了。并且着色器不要..

..当然，我不知道为什么......请帮助我;;

    <script type="x-shader/x-vertex" id="vs-orbit">
        uniform float time;
        attribute float sovereign;
        varying vec3 vColor;

        vec3 setColorBySovereign() {
            vec3 color;

            color.r = 0.5 - ( 0.5 * sovereign );
            color.g = 0.25 + ( 0.25 * sovereign );
            color.b = 0.5 + ( 0.25 * sovereign );

            return _color;
        };

        void main() {
            vColor = setColorBySovereign();
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        };
    </script>
    <script type="x-shader/x-fragment" id="fs-orbit">
        attribute vec3 vColor;

        void main() {
            gl_FragColor = vec4(vColor, 1.0);
        };
    </script>

// ... Below is where use shader above;

Ellipse.prototype.createOrbit = function( soveregin ) {
    var shape, mater;
    var sov = soveregin || 0.0;

    shape = new THREE.Geometry();
        var v2;
        for(var i=0; i<721; i++) {
            v2 = this.curve.getPoint(i);
            shape.vertices.push(new THREE.Vector3(v2.x, v2.y, 0));
        };
        shape.computeLineDistances();

    mater = new THREE.ShaderMaterial({
        attribute: { soveregin: sov },
        vertexShader: document.getElementById('vs-orbit'),
        fragmentShader: document.getElementById('fs-orbit')
    });

    this.orbit = new THREE.Line( shape, mater, THREE.LineStrip );
    return;
}

Answer 1

我解决了这个问题;在main（）{}之后我不应该使用';'和其他语法错误。

在片段着色器中，我必须使用运算符'vary'声明vColor，就像顶点着色器一样。在片段着色器中;来自GLSL参考;变化等于运算符。

three.js，通过着色器制作虚线

1 个答案: