WebGL三角形平移变换（矩阵方式）

来源：互联网发布：深圳网络指尖公司编辑：程序博客网时间：2024/05/29 11:20

本程序通过矩阵运算方式实现一个三角形的平移变换任务，最终效果如下图。

TranslatedTriangle

整个程序包含两个文件，分别是：

1. TranslatedTriangleMatrix.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="TranslatedTriangleMatrix.js">    </script></html>

2. TranslatedTriangleMatrix.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 translation distance for x, y, and z direction  var Tx = 0.5, Ty = 0.5, Tz = 0.0;    var xformMatrix = new Float32Array([      1.0, 0.0, 0.0, 0.0,      0.0, 1.0, 0.0, 0.0,      0.0, 0.0, 1.0, 0.0,        Tx, Ty, Tz, 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