版权声明: https://blog.csdn.net/GISuuser/article/details/82252261
基于上一篇博文WebGL与ES6:绘制简单点。
在学习WebGL编程指南这本书时,发现书上有一个WebGL通过鼠标连续绘制点的代码,其中的屏幕坐标系转WebGL坐标系的方法,居然是错误的。自己动手改了一下,可以完整运行了。
import "../css/index.css";
import {RenderTool} from "./lib_webgl/cuon-utils-ES6";
let VSHEADER_SOURCE=
`attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
gl_PointSize = 10.0;
}
`;
let FSHEADER_SOURCE=
`void main(){
gl_FragColor = vec4(1.00, 0.00, 0.00, 1.00);
}
`;
main();
function main() {
//获取上下文对象
const canvas = document.querySelector("#glcanvas");
initCanvas(canvas);
const gl = canvas.getContext("webgl");
//检测WebGL支持
if (!gl) {
console.error("浏览器不支持WebGL");
return
}
if(!RenderTool.initShaders(gl,VSHEADER_SOURCE,FSHEADER_SOURCE)){
console.error("初始化着色器失败");
return
}
canvas.onmousedown=function (ev) {
click(ev,gl,canvas,a_Position);
};
let a_Position=gl.getAttribLocation(gl.program,'a_Position');
//设置背景色
gl.clearColor(0.0, 0.0, 0.0, 1);
//设置缓冲区颜色
gl.clear(gl.COLOR_BUFFER_BIT);
}
let points=[];//鼠标点数组
function click(ev,gl,canvas,a_Position) {
//屏幕坐标系转WebGL坐标系
let x=ev.clientX;//鼠标点击处的X坐标
let y=ev.clientY;//鼠标点击处的Y坐标
let rect=ev.target.getBoundingClientRect();
x=((x-rect.left)-canvas.width/2)/(canvas.width/2);//注意不可以使用canvas.style.width
y=(canvas.height/2-(y-rect.top))/(canvas.height/2);
points.push(x);
points.push(y);
gl.clear(gl.COLOR_BUFFER_BIT);//清除之前绘制的点
for(let i=0;i<points.length;i+=2){
//重新绘制点
gl.vertexAttrib3f(a_Position,points[i],points[i+1],0.0);
gl.drawArrays(gl.POINTS,0,1)
}
}
/**
* 设置画布全屏
* @param canvas
*/
function initCanvas(canvas) {
canvas.width=document.documentElement.clientWidth;
canvas.height=document.documentElement.clientHeight;
}