屏幕坐标与webgl坐标的转换原理

最新推荐文章于 2024-01-22 13:24:24 发布

跑错行的人

最新推荐文章于 2024-01-22 13:24:24 发布

阅读量318

点赞数

文章标签： webgl 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_40712151/article/details/128390564

版权

屏幕坐标-canvas坐标-webgl坐标

document.addEventListener("mousedown", function(e) {
                    let x = e.clientX;
                    let y = e.clientY; //屏幕坐标
                    let rect = e.target.getBoundingClientRect();
                    let top = rect.top;
                    let left = rect.left;
                    let pointX = (x - left - 512) / 512;
                    let pointY = -((y - top) - 384) / 384;
                    points.push(pointX)
                    points.push(pointY)
                    points.push(0);
                    points.push(1.0)
                    let pointPosition = new Float32Array(points);
                    let pointBuffer = webgl.createBuffer()
                    webgl.bindBuffer(webgl.ARRAY_BUFFER, pointBuffer)
                    webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW)
                       
                    webgl.enableVertexAttribArray(aPsotion)
                    webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0)

                    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
                    webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
                    webgl.drawArrays(webgl.POINTS, 0, points.length);

                })