专栏首页图形学与OpenGLCG实验4 三维几何变换

CG实验4 三维几何变换

1.实验目的

  • 学习了解三维图形几何变换原理。
  • 理解掌握WebGL三维图形几何变换的方法。

2. 实验内容

  • 阅读教材有关三维图形变换原理,运行示范实验代码,掌握WebGL程序三维图形变换的方法;
  • 请分别调整观察变换矩阵、模型变换矩阵和投影变换矩阵的参数,观察变换结果;
  • 修改变换矩阵参数,实现一点透视、两点透视和三点透视,并将相关修改代码提交到赛课本次作业中,同时写到实验报告的实验结果中。
  • 示范代码对应教材6.5 编程实例-立方体透视投影内容,运行结果如下图所示:

3.实验代码

(1) 6-5-HelloCube.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>6.5 WebGl编程实例——立方体透视投影</title>
    </head>
    <body onload="startup()">
        <canvas id="myGLCanvas" width="600" height="600">
        </canvas>
    </body>
        <script type="text/javascript" src="gl-matrix.js"></script>
    <script type="text/javascript" src="6-5-HelloCube.js"></script>
</html>

(2) gl-matrix.js 下载地址:http://oty0nwcbq.bkt.clouddn.com/gl-matrix.js

(3) 6-5-HelloCube.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;
  }

 // Set clear color and enable hidden surface removal
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);

  // Get the storage location of u_MvpMatrix
  var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  if (!u_MvpMatrix) { 
    console.log('Failed to get the storage location of u_MvpMatrix');
    return;
  }

  // Set the eye point and the viewing volume
  // View Matrix
  var eye = vec3.fromValues(0.0, 0.0, 5.0);
  var center = vec3.fromValues(0.0, 0.0, 0.0);
  var up = vec3.fromValues(0.0, 1.0, 0.0);
  var vMatrix = mat4.create();
  mat4.lookAt(vMatrix, eye, center, up);

  // Model Matrix
  var mMatrix = mat4.create();  
  mat4.translate(mMatrix, mMatrix, [0.0, 0.0, 0.0]);//function translate(out, a, v)
  mat4.scale(mMatrix, mMatrix, [1.0, 1.0, 1.0]);
  mat4.rotate(mMatrix, mMatrix, Math.PI/4, [0.0, 1.0, 1.0]);

  // Projection Matrix
  var pMatrix = mat4.create();
  mat4.frustum(pMatrix, -1.0, 1.0, -1.0, 1.0, 1.5, 20.0);

  var mvpMatrix = mat4.create();
  mat4.multiply(mvpMatrix, vMatrix, mMatrix);
  mat4.multiply(mvpMatrix, pMatrix, mvpMatrix);

  // Pass the model view projection matrix to u_MvpMatrix
  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix);

  // Clear color and depth buffer
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Draw the cube
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
 }

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() {
// Vertex shader program
var vertexShaderSource =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'uniform mat4 u_MvpMatrix;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' +
  '  v_Color = a_Color;\n' +
  '}\n';

// Fragment shader program
var fragmentShaderSource =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\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;  
}

// 立方体绘制采用《WebGL Programming Guide》第7章示例程序ColoredCube
function initVertexBuffers(gl) {
  // Create a cube
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3

  var vertices = new Float32Array([   // Vertex coordinates
     1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3 front
     1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5 right
     1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
    -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2 left
    -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2 down
     1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5 back
  ]);

  var colors = new Float32Array([     // Colors
    0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  // v0-v1-v2-v3 front(blue)
    0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  // v0-v3-v4-v5 right(green)
    1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  // v0-v5-v6-v1 up(red)
    1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
    1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
    0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0   // v4-v7-v6-v5 back
  ]);

  var indices = new Uint8Array([       // Indices of the vertices
     0, 1, 2,   0, 2, 3,    // front
     4, 5, 6,   4, 6, 7,    // right
     8, 9,10,   8,10,11,    // up
    12,13,14,  12,14,15,    // left
    16,17,18,  16,18,19,    // down
    20,21,22,  20,22,23     // back
  ]);

  // Create a buffer object
  var indexBuffer = gl.createBuffer();
  if (!indexBuffer) 
    return -1;

  // Write the vertex coordinates and color to the buffer object
  if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position'))
    return -1;

  if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color'))
    return -1;

  // Write the indices to the buffer object
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

  return indices.length;
}

function initArrayBuffer(gl, data, num, type, attribute) {
  var buffer = gl.createBuffer();   // Create a buffer object
  if (!buffer) {
    console.log('Failed to create the buffer object');
    return false;
  }
  // Write date into the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  // Assign the buffer object to the attribute variable
  var a_attribute = gl.getAttribLocation(gl.program, attribute);
  if (a_attribute < 0) {
    console.log('Failed to get the storage location of ' + attribute);
    return false;
  }
  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
  // Enable the assignment of the buffer object to the attribute variable
  gl.enableVertexAttribArray(a_attribute);

  return true;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 6.5编程实例-立方体透视投影

    GLint winWidth = 600, winHeight = 600; //设置初始化窗口大小

    步行者08
  • 实验5 立方体显示与变换

    (1) 修改代码,让立方体平移和旋转,产生两点透视和三点透视,将两种透视图结果存为图1-2,与对应修改的代码一起保存至word实验文档中(20分钟);

    步行者08
  • 第5章代码-三维观察

    步行者08
  • 【数据科学系统学习】机器学习算法 #

    本篇内容为《机器学习实战》第 6 章 支持向量机部分程序清单。所用代码为 python3。

    py3study
  • Direct3D 11 Tutorial 7:Texture Mapping and Constant Buffers_Direct3D 11 教程7:纹理映射和常量缓冲区

    在上一个教程中,我们为项目引入了照明。 现在我们将通过向我们的立方体添加纹理来构建它。 此外,我们将介绍常量缓冲区的概念,并解释如何使用缓冲区通过最小化带宽使用...

    Zoctopus
  • OpenGL ES 2.0 (iOS)[06-1]:基础纹理

    Texture 在 OpenGL 里面有很多种类,但在 ES 版本中就两种——Texture_2D + Texture_CubeMap;

    半纸渊
  • tansformer-文本分类

    参考:https://www.cnblogs.com/jiangxinyang/p/10210813.html

    绝命生
  • 采用SPSS Modeler的Web复杂网络对所有腧穴进行分析

    本次腧穴配伍关联规则分析,以针灸治疗FC的113例处方中使用频次在5次及以上的25种腧穴为关联对象。将前项最小支持度设为12%,规则的最小置信度设为85%,得出...

    拓端
  • 你见过可以解量子力学薛定谔方程的Python库吗

    Python的发展速度持续加快,其应用范围从机器学习逐渐扩散到各个领域。今天给大家介绍一个可以解决量子力学中薛定谔方程的一个Python库Quantized。

    HuangWeiAI
  • 实验5 立方体显示与变换

    (1) 修改代码,让立方体平移和旋转,产生两点透视和三点透视,将两种透视图结果存为图1-2,与对应修改的代码一起保存至word实验文档中(20分钟);

    步行者08

扫码关注云+社区

领取腾讯云代金券