正文

js控制着色器位置，鼠标点位转着色器位置

譬如朝露 V管理员/ / 0 评论/ 295阅读
05 25 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script type="module">

    let canvas = document.getElementById('canvas');
    let gl = canvas.getContext('webgl');
    const verSource = `
    attribute vec4 a_Position;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=50.0;
        }
    `
    const fsSource = `
        void main(){
            gl_FragColor=vec4(1,1,0,1);
        }
    `
    initShaders(gl, verSource, fsSource);
    //获取a_Position的存储空间，然后通过js改变储存空间的内容
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    //设置attribute变量
    gl.vertexAttrib3f(a_Position, 0.0, 0.5, 0)
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
    canvas.addEventListener('click', e => {
        //获取鼠标点击的位置
        const { clientX, clientY } = e;
        //获取cvavas距离窗口的位置
        const { left, top, width, height } = canvas.getBoundingClientRect();
        //求出鼠标点距canvas的位置
        const [clickX, clickY] = [clientX - left, clientY - top];
        //得到canvas的原点位置(像素为单位)。
        const [centerX, centerY] = [width / 2, height / 2];
        //求出鼠标点位距离中心店的位置
        const [xDis, yDis] = [clickX - centerX, clickY - centerY];
        //webgl中正向的y其实是负向的y
        const clickTop = -yDis;
        //现在有了中心位置，和点击的位置，求出比例即可
        const [x, y] = [xDis / centerX, clickTop / centerY];

        gl.vertexAttrib2f(a_Position, x, y)

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINTS, 0, 1);
    })

</script>

</html>


文章版权声明：除非注明，否则均为 譬如朝露博客原创文章，转载或复制请以超链接形式并注明出处。