# 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>6.5 WebGl编程实例——立方体透视投影</title>
<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>```

#### (3) 6-5-HelloCube.js

```var gl;
function startup(){
var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素
gl = createGLContext(canvas);

// 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 {
}
return context;
}

'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';

'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
'  gl_FragColor = v_Color;\n' +
'}\n';

}

}

return null;
}
}

// 立方体绘制采用《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; //设置初始化窗口大小

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

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

• ### 【数据科学系统学习】机器学习算法 #

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

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

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

• ### 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。

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

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