webgl学习一画点

<html>

<head>
    <meta lang="en">
    <meta charset="UTF-8">
    <title>点击绘制点</title>
    <script src="./cuon-utils.js"></script>
    <style>
        body{
            margin:0;
        }
        canvas{
            border:1px solid #999;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

<script>
// 顶点着色器
const vertexShader = `
    attribute vec4 a_position;
    void main () {
        // gl_Position为内置变量，表示当前点的位置
        gl_Position = a_position;
        // gl_Position为内置变量，表示当前点的大小，为浮点类型，如果赋值是整数类型会报错
        gl_PointSize = 3.0;
    }  
`;
// 片元着色器
const fragmentShader = `
    // 设置浮点数精度
    precision mediump float;
    void main () {
        // vec4是表示四维向量，这里用来表示RGBA的值[0~1]，均为浮点数，如为整数则会报错
        gl_FragColor = vec4(1.0, 0.5, 1.0, 1.0);
    }
`;



    // 获取canvas元素
    var canvas = document.getElementById('canvas');

    // 获取绘制二维上下文
    var gl = canvas.getContext('webgl');
    
/**
 * 
 * @param {WebGLRenderingContext} gl 
 * @param {string} type 
 * @param {string} source 
 */
 function createShader(gl, type, source) {
    // 创建 shader 对象
    let shader = gl.createShader(type);
    // 往 shader 中传入源代码
    gl.shaderSource(shader, source);
    // 编译 shader
    gl.compileShader(shader);
    // 判断 shader 是否编译成功
    let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }
    // 如果编译失败，则打印错误信息
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

/**
 * 
 * @param {WebGLRenderingContext} gl 
 * @param {WebGLShader} vertexShader 
 * @param {WebGLShader} fragmentShader 
 */
function createProgram(gl, vertexShader, fragmentShader) {
    // 创建 program 对象
    let program = gl.createProgram();
    // 往 program 对象中传入 WebGLShader 对象
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // 链接 program
    gl.linkProgram(program);
    // 判断 program 是否链接成功
    let success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }
    // 如果 program 链接失败，则打印错误信息
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

/**
 * 
 * @param {WebGLRenderingContext} gl 
 * @param {string} vertexSource 
 * @param {string} fragmentSource 
 */
function initWebGL(gl, vertexSource, fragmentSource) {
    // 根据源代码创建顶点着色器
    let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
    // 根据源代码创建片元着色器
    let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
    // 创建 WebGLProgram 程序
    let program = createProgram(gl, vertexShader, fragmentShader);
    return program;
}


// 初始化shader程序
const program = initWebGL(gl, vertexShader, fragmentShader);
// 告诉WebGL使用我们刚刚初始化的这个程序
gl.useProgram(program);

    // initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
    
    clear();

    var points = [];
    // canvas.addEventListener('click', (e) => {
    //     var pos = getClickedPosOnCanvas(canvas, e.clientX, e.clientY);
    //     points.push(pos);
    //     clear();
    //     var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    //     points.forEach(p => {
    //         gl.vertexAttrib2f(a_Position, p.x, p.y);
    //         /* 绘制一个点 */
    //         gl.drawArrays(gl.POINTS, 0, 1);
    //     });
    // });

    var i = 0;
        
    var pointPos = [
    -1, -1,
    0.5, 0.0,
    1.0, 1
];
    var t2 = window.setInterval(function() {
        var x=i/500, y=i%500;
        var pos = getClickedPosOnCanvas(canvas,x, y); 
//20hz插入五个点
        points.push(pos.x);
        points.push(pos.y);
        points.push(pos.x+0.4);
        points.push(pos.y);
        points.push(pos.x+0.8);
        points.push(pos.y);
        points.push(pos.x+1.2);
        points.push(pos.y);
        points.push(pos.x+1.6);
        points.push(pos.y);
        clear();

        // -----------------------------------------------------
        // 注意：这里必须采用类型化数组往WebGL传入attribute类型的数据
        // -----------------------------------------------------
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);         
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);


        var a_position = gl.getAttribLocation(program, 'a_position');
        // gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        // gl.enableVertexAttribArray(a_Position);

        gl.vertexAttribPointer(
            a_position,
            2,
            gl.FLOAT,
            false,
            Float32Array.BYTES_PER_ELEMENT * 2,
            0
        );
        gl.enableVertexAttribArray(a_position);
        gl.drawArrays(gl.POINTS, 0, points.length);


        i++;

    },50)
    
    function getClickedPosOnCanvas(canvas, clientX, clientY) {
        var rect = canvas.getBoundingClientRect();
        var halfCanvasWidth = canvas.width / 2;
        var halfCanvasHeight = canvas.height / 2;
        var x = (clientX - rect.left - halfCanvasWidth) / halfCanvasWidth;
        var y = (halfCanvasHeight - (clientY - rect.top)) / halfCanvasHeight;
        return {x, y};
    }
    
    function clear() {
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
</script>
cpu毫无压力将近500*400=20w个点了
posted @ 2022-02-13 22:44 fkess 阅读(110) 评论(0) 收藏举报
刷新页面返回顶部
webgl学习 一画点

公告

webgl学习一画点
