给定 2d 控制点，如何编写评估三次贝塞尔曲线的顶点着色器？

Question

我需要编写一个程序来评估三次贝塞尔曲线，使用 threejs 和顶点着色器。

我尝试使用三次贝塞尔公式作为返回顶点位置的函数来计算基于x轴和控制点的贝塞尔曲线，但我得到的是一条随机的直线变形线。这是我的尝试：

    <script src="https://threejs.org/build/three.js"></script> 
    <script type="module">
    const   rendSize    = new THREE.Vector2();

var     controls, 
        scene,
        camera,
        renderer,
        shaderMat;

function main() {

    renderer = new THREE.WebGLRenderer();

    document.body.appendChild(renderer.domElement);

    scene   = new THREE.Scene();

    camera = new THREE.OrthographicCamera( -10., 10., 10., -10., -10.0, 10.0 );
  
        var vShader =  `
        //bellow is bezier formula
        vec3 toBezier(float t, vec3 P0, vec3 P1, vec3 P2, vec3 P3) {
                float t2 = t * t;
                float one_minus_t = 1.0 - t;
                float one_minus_t2 = one_minus_t * one_minus_t;
                return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t);
        }

        uniform vec3 p0;
        uniform vec3 p1;
        uniform vec3 p2;
        uniform vec3 p3;
    
        void main(void) {
            //the plan was to create a bezier curve based on the x position and the control points
            vec3 pos = toBezier(position.x, p0, p1, p2, p3);
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos.x, pos.y, 0.0, 1.0);
        }
 
  `;

    generateCurve(vShader);

    renderer.clear();
    renderer.render(scene, camera);
}

function generateCurve(vShader) {
    var ptosControle =  [   new THREE.Vector3( 0.0, 0.0, 0.0 ),
                            new THREE.Vector3( -0.5, Math.sin(Math.PI/2.0) / 2.0, 0.0 ),
                            new THREE.Vector3(  0.5, Math.sin(3.0*Math.PI/2.0) / 2.0, 0.0 ),
                            new THREE.Vector3(  1.0, 1.0, 0.0 )
                        ];
    shaderMat = new THREE.ShaderMaterial(   
        {   uniforms        :   {   
                                    p0          : { value   : ptosControle[0]},
                                    p1          : { value   : ptosControle[1]},
                                    p2          : { value   : ptosControle[2]},
                                    p3          : { value   : ptosControle[3]},
                                },
            vertexShader    :   vShader,
        } );

    const objPolCtrl        = new THREE.Line (  new THREE.BufferGeometry().setFromPoints(ptosControle),
                                                shaderMat
                                            );
    scene.add(objPolCtrl);

}
main();
    </script>