四川省城乡住房建设部网站首页,网站运营,优质企业网站建设,做网站 上海我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 #xff1a;git 本篇文章将把旋转和平位移结合起来#xff0c;因为矩阵的不存在交换法则
文章中设计的矩阵地址在这里…我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 git 本篇文章将把旋转和平位移结合起来因为矩阵的不存在交换法则
文章中设计的矩阵地址在这里
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../tool/cuon-matrix.js/script
/headbodyh1先平移再旋转/h1h3可以按下按键ADSW/h3P idrotate/PP idtranslate/Pcanvas idcanvas/canvasscriptlet 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_Positionu_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;//位移的y轴的变量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();//绑定buffergl.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);//开启a_Position变量gl.enableVertexAttribArray(a_Position);// Clear 颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);const render function () {//对矩阵及逆行位移mate4.setTranslate(0,translateY,0);//对矩阵进行旋转mate4.rotate(rotateX,0,0,1);//矩阵赋值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; //获取被按下的键值 //判断如果用户按下了回车键keycody13 if (keyNum 65) {console.log(A);rotateX - 1; render()}//判断如果用户按下了空格键(keycode32) if (keyNum 68) {console.log(D);rotateX 1; render()}//判断如果用户按下了空格键(keycode32) if (keyNum 83) {console.log(S); translateY-0.1render()}//判断如果用户按下了空格键(keycode32) if (keyNum 87) {console.log(W); translateY0.1render();}}function setNum(){let rotate document.getElementById(rotate);let translate document.getElementById(translate);rotate.innerText 旋转的角度${rotateX}translate.innerText 平移的距离${translateY}}/script
/body/html
