我会持续更新关于wegl的编程指南中的代码。
git代码地址：sogooday
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
上一节内容:helloPoint2.js。?当前的工程师 点击页面并且用一个固定的颜色把点击的绘制出来
<!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"></canvas>
<button id='clearBtn'>画布清除点</button>
<script>
let canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
let gl = canvas.getContext('webgl');
//顶点着色器
let vertexShaderSource = `
attribute vec4 a_Postion;
void main(){
gl_Position = a_Postion;
gl_PointSize = 10.0;
}
`
//片源着色器
let fragmentShaderSource = `\
void main(){
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
//顶点着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//片元着色器
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader)
//创建程序片段
let program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader((program), fragmentShader)
gl.linkProgram(program);
//使用当前的程序片段
gl.useProgram(program);
//取到变量
let a_Position = gl.getAttribLocation(program, 'a_Postion')
//将顶点的坐标记录下来 然后赋值给顶点坐标的变量 再从新绘制
let pointList = []
//设置清空画布的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
//使用清空画布
gl.clear(gl.COLOR_BUFFER_BIT)
//鼠标按下的方法
canvas.onmousedown = function (params) {
//获取鼠标的坐标点
let { clientX, clientY } = params;
let rect = params.target.getBoundingClientRect();
//将坐标带你转化为 -1 到 1之间的坐标 用于webgl的坐标展示
pointList.push({
x: clientX / canvas.offsetWidth * 2 - 1,
y: (clientY / canvas.offsetWidth * 2 - 1) * -1
})
//清空画布
gl.clear(gl.COLOR_BUFFER_BIT)
//赋值 + 绘制
for (let index = 0; index < pointList.length; index++) {
const { x, y } = pointList[index];
console.log(x, y)
//将之前储蓄的坐标点进行赋值
gl.vertexAttrib3f(a_Position, x, y, 0.0)
//绘制
gl.drawArrays(gl.POINTS, 0, 1)
}
}
//清空画布的按钮
let nodeBtn = document.getElementById('clearBtn');
nodeBtn.addEventListener('click', () => {
pointList = []
gl.clear(gl.COLOR_BUFFER_BIT)
})
