我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：git
本篇文章将把旋转和平位移结合起来，因为矩阵的不存在交换法则
文章中设计的矩阵地址在这里
我将先学习先旋转再位移
<!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>
<script src="../tool/cuon-matrix.js"></script>
</head>
<body>
<h1>先旋转再位移</h1>
<h3>可以按下按键ADSW</h3>
<P id="rotate"></P>
<P id="translate"></P>
<canvas id='canvas'></canvas>
<script>
let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let gl = canvas.getContext('webgl');
let vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_mat4;
void main(){
gl_Position=u_mat4*a_Position;
}
`
let fragmentShaderSouce = `
precision mediump float;
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, fragmentShaderSouce)
// 编译片元着色器
gl.compileShader(fragmentShader)
//创建渲染程序
let program = gl.createProgram();
// 绑定渲染程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
//使用当前渲染程序
gl.useProgram(program)
//检测顶点数据是否正确
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw gl.getProgramInfoLog(program);
}
//创建矩阵
let mate4 = new Matrix4()
// 设置旋转角度
let rotateX = 0.0;
// 设置位移的长度
let translateY = 0.0;
//三角形的顶点数据
let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
// 获取变量a_Position
let a_Position = gl.getAttribLocation(program, 'a_Position');
//获取变量u_mat4
let u_mat4 = gl.getUniformLocation(program, 'u_mat4');
//创建缓冲区
let buffer = gl.createBuffer();
//绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
//缓冲区里面传递数值
gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);
//给a_Position传递数值
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
//启用变量
gl.enableVertexAttribArray(a_Position);
//绘制
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//绘制三角形
const render = function () {
//设置三角形的角度
mate4.setRotate(rotateX,0,0,1);
//设置位移的差量
mate4.translate(0,translateY,0);
// 设置矩阵
gl.uniformMatrix4fv(u_mat4, false, mate4.elements)
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3)
setNum()
}
render()
document.onkeydown = function (e) { //对整个页面监听
var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
//判断如果用户按下了回车键（keycody=13）
if (keyNum == 65) {
console.log('A');
rotateX -= 1;
render()
}
//判断如果用户按下了空格键(keycode=32)，
if (keyNum == 68) {
console.log('D');
rotateX +=1;
render()
}
//判断如果用户按下了空格键(keycode=32)，
if (keyNum == 83) {
console.log('S');
translateY-=0.1
render()
}
//判断如果用户按下了空格键(keycode=32)，
if (keyNum == 87) {
console.log('W');
translateY+=0.1
render();
}
}
function setNum(){
let rotate = document.getElementById("rotate");
let translate = document.getElementById("translate");
rotate.innerText = `旋转的角度：${rotateX}`
translate.innerText = `平移的距离：${translateY}`
}
</script>
</body>
</html>
