高新网站开发建设多少钱,wordpress 批量导入文章,怎么在ftp中查看网站首页路径,南宁市优化网站我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址
接着 上一节 接着做平移的转化。本案例是三角形的旋转 !DOCTYPE html
html langenhead…我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址
接着 上一节 接着做平移的转化。本案例是三角形的旋转 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh3可以按下按键ADSW/h3p旋转的角度span idnum/span/pcanvas idcanvas/canvasscriptlet canvas document.getElementById(canvas);let gl canvas.getContext(webgl);let vertexShaderSource attribute vec2 a_Position;uniform float u_CosB,u_SinB; void main(){gl_Position.x a_Position.x * u_CosB - a_Position.y*u_SinB;gl_Position.y a_Position.x * u_SinB a_Position.y*u_CosB;gl_Position.z 0.0;gl_Position.w 1.0;}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);} //x抽的旋转角度let rotateX 0.0;//y轴的旋转角度let rotateY 0;//三角的三个顶点的坐标位置let positonArray new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);// 获取顶点着色器的变量let a_Position gl.getAttribLocation(program, a_Position);// 获取旋转角度的变量let u_CosB gl.getUniformLocation(program, u_CosB)let u_SinB gl.getUniformLocation(program, u_SinB)// 创建缓冲区let buffer gl.createBuffer();//将缓冲区对象绑定到目标gl.bindBuffer(gl.ARRAY_BUFFER, buffer);//向缓冲区写入数据gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)//将缓冲区对象绑定到目标gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)// 启用变量a_Positiongl.enableVertexAttribArray(a_Position);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);const render function () {//赋值x角度gl.uniform1f(u_CosB, Math.cos(Math.PI*rotateX/180.0));//赋值y角度gl.uniform1f(u_SinB, Math.sin(Math.PI*rotateX/180.0));// 清空画布gl.clear(gl.COLOR_BUFFER_BIT);// 绘制三角形gl.drawArrays(gl.TRIANGLES, 0, 3)setNumer()}render()document.onkeydown function (e) { //对整个页面监听 var keyNum window.event ? e.keyCode : e.which; //获取被按下的键值 //判断如果用户按下了回车键keycody13 if (keyNum 65) {console.log(A);rotateX - 1; rotateY0render()}//判断如果用户按下了空格键(keycode32) if (keyNum 68) {console.log(D);rotateX 1; rotateY0render()}//判断如果用户按下了空格键(keycode32) if (keyNum 83) {console.log(S);rotateY - 1; rotateX0render()}//判断如果用户按下了空格键(keycode32) if (keyNum 87) {console.log(W);rotateY 1; rotateX0render();}}function setNumer (){let text document.getElementById(num);text.innerText rotateX:${ rotateX}} /script
/body/html
