three-shader-lern
/
wengl1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Draw Points</title>
    <script src="./main.js"></script>
    <script src="./flyLine/fly.js"></script>
    <style>
        canvas {
            display: block;
            border: none;
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
    <script>
        const canvas = document.getElementById('glcanvas');
        let gl = null;
        try {
            gl = canvas.getContext('webgl');
        } catch (e) { }
        if (!gl) {
            alert('Unable to initialize WebGL. Your browser may not support it.');
            throw new Error('WebGL not supported');
        }

        // 假设points是一个点的数组，这里需要根据实际情况定义points
        // const points = [{ x: 100, y: 100 }, { x: 200, y: 200 }, { x: 300, y: 300 }];

        const newPoints = points.map(item => [item.x / canvas.width, item.y / canvas.height]).flat();
        const vertices = new Float32Array(newPoints);
        const len = points.length;
        const percentArr = points.map((item, index) => 1 - (index + 1) / len);
        console.log('percentArr ------>', percentArr)

        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        const vertexShaderSource = `
            attribute vec2 aPosition;
            uniform float uPointSize;
            attribute float percent;
            void main() {
                gl_PointSize = uPointSize;
                gl_Position = vec4(aPosition, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        const program = createShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
        gl.useProgram(program);

        const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
        const pointSizeLocation = gl.getUniformLocation(program, 'uPointSize');

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

        const percentVertexAttributeLocation = gl.getAttribLocation(program, 'percent');
        const buffer1 = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer1);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(percentArr), gl.STATIC_DRAW);
        // 绘制点
        gl.drawArrays(gl.POINTS, 0, newPoints.length / 2);

    </script>
</body>

</html>