已解决
webGL编程指南 第四章 旋转+平移.TanslatedRotatdTriangle
来自网友在路上 162862提问 提问时间：2023-10-26 19:11:02阅读次数： 62
最佳答案 问答题库628位专家为你答疑解惑
我会持续更新关于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_Positionlet a_Position = gl.getAttribLocation(program, 'a_Position');//获取变量u_mat4let 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.1render()}//判断如果用户按下了空格键(keycode=32)， if (keyNum == 87) {console.log('W'); translateY+=0.1render();}}function setNum(){let rotate = document.getElementById("rotate");let translate = document.getElementById("translate");rotate.innerText = `旋转的角度：${rotateX}`translate.innerText = `平移的距离：${translateY}`}</script>
</body></html>查看全文
99%的人还看了
猜你感兴趣
版权申明
本文"webGL编程指南 第四章 旋转+平移.TanslatedRotatdTriangle"：http://eshow365.cn/6-25355-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！