WebGL三角形旋转变换
来源:互联网 发布:电视直播软件pc版 编辑:程序博客网 时间:2024/06/06 03:01
本程序实现一个三角形的旋转变换任务,最终效果如下图。
整个程序包含两个文件,分别是:
1. RotatedTriangle.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>旋转三角形</title> </head> <body onload="startup()"> <canvas id="myGLCanvas" width="600" height="600"> </canvas> </body> <script type="text/javascript" src="RotatedTriangle.js"> </script></html>
2. RotatedTriangle.js
var gl;function startup(){ var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素 gl = createGLContext(canvas); setupShaders(); // Write the positions of vertices to a vertex shader var n = initVertexBuffers(gl); if (n < 0) { console.log('Failed to set the positions of the vertices'); return; } // The rotation angle var ANGLE = 90.0; // Create a rotation matrix var radian = Math.PI * ANGLE / 180.0; // Convert to radians var cosB = Math.cos(radian), sinB = Math.sin(radian); // Note: WebGL is column major order var xformMatrix = new Float32Array([ cosB, sinB, 0.0, 0.0, -sinB, cosB, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ]); // Pass the rotation matrix to the vertex shader var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix'); if (!u_xformMatrix) { console.log('Failed to get the storage location of u_xformMatrix'); return; } gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); // Specify the color for clearing <canvas> gl.clearColor(0, 0, 0, 1); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // Draw the rectangle gl.drawArrays(gl.TRIANGLES, 0, n); }function createGLContext(canvas) { var names = ["webgl", "experimental-webgl"]; var context = null; for (var i=0; i < names.length; i++) { try { context = canvas.getContext(names[i]); //获取webgl context绘图上下文 } catch(e) {} if (context) { break; } } if (context) { context.viewportWidth = canvas.width; context.viewportHeight = canvas.height; } else { alert("Failed to create WebGL context!"); } return context;}function setupShaders() { //顶点着色器程序 var vertexShaderSource = 'attribute vec4 a_Position;\n' + 'uniform mat4 u_xformMatrix;\n' + 'void main() {\n' + ' gl_Position = u_xformMatrix * a_Position;\n' + '}\n'; //片元着色器程序 var fragmentShaderSource = 'void main(){ \n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的颜色 '} \n'; var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Failed to setup shaders"); } gl.useProgram(shaderProgram); gl.program= shaderProgram;}function loadShader(type, shaderSource) { var shader = gl.createShader(type); gl.shaderSource(shader, shaderSource); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert("Error compiling shader" + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; }function initVertexBuffers(gl) { var vertices = new Float32Array([ 0, 0.5, -0.5, -0.5, 0.5, -0.5 ]); var n = 3; // The number of vertices // Create a buffer object var vertexBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the buffer object'); return -1; } // Bind the buffer object to target gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // Write date into the buffer object gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_PosLocation = gl.getAttribLocation(gl.program, 'a_Position'); if (a_PosLocation < 0) { console.log('Failed to get the storage location of a_Position'); return -1; } // Assign the buffer object to a_Position variable gl.vertexAttribPointer(a_PosLocation, 2, gl.FLOAT, false, 0, 0); // Enable the assignment to a_Position variable gl.enableVertexAttribArray(a_PosLocation); return n;}
参考代码
- WebGL Programming Guide, https://sites.google.com/site/webglbook/
- Professional WebGL Programming: Developing 3D Graphics for the Web,Listing 2-1,http://media.wiley.com/product_ancillary/60/11199688/DOWNLOAD/Listing-2-1.html
转载请注明出处。
阅读全文
0 0
- WebGL三角形旋转变换
- WebGL三角形平移变换
- WebGL之旋转三角形
- WebGL三角形平移变换(矩阵方式)
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(3-移动旋转缩放))
- 《WebGL编程指南》学习——绘制和变换三角形
- 24 WebGL从指定视点观察旋转后的三角形
- 第四节 WebGL中的图形变换:旋转、平移和缩放
- WebGL自学教程——WebGL示例:5. 用键盘控制三角形的旋转
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(2-你好三角形))
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(1-绘制多个点)
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(4-动画))
- WebGL-三角形绘制
- webGL-三角形颜色修改
- WebGL绘制三角形
- 旋转变换
- 旋转变换
- 【笔记】《WebGL编程指南》学习-第4章高级变换与动画基础(1-平移然后旋转))
- Java web开发中常用到的jar包简介
- linux工作与进程管理
- c#linq里的Skip和Take处理分页笔记
- bzoj 2933(区间dp)
- loadrunner Web_类函数之web_service_call()
- WebGL三角形旋转变换
- java学习第五天
- css中两个类选择器之间有没有空格的区别
- java重构(一)
- mybatis遇到的mapper.xml的链表是容易出的错
- centos7 编译 nginx
- APP UI设计的全局思维
- 当你的unity项目一直报错的时候
- i2c驱动--代码