Skip to content
Snippets Groups Projects
Commit 4b581b28 authored by Hwanyong Lee's avatar Hwanyong Lee
Browse files

2018student

parent 220139b5
No related branches found
No related tags found
No related merge requests found
Showing
with 2827 additions and 0 deletions
File added
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="animRotate()">Animation Rotate</button>
<br>
<button onclick="CullingFront()">Cull Fornt </button>
<br>
<button onclick="CullingBack()">Cull BACK</button>
<br>
<button onclick="CullingFront_Back()">Cull FRONT_AND_BACK</button>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="animRotate()">Animation Rotate</button>
<button onclick="Depth()">DepthTest Toggle</button>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="animRotate()">Animation Rotate + 0.01</button>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="scXinc()">Scale X * 1.05</button>
<button onclick="scXdec()">Scale X * 0.95</button>
<button onclick="scYinc()">Scale Y * 1.05</button>
<button onclick="scYdec()">Scale Y * 0.95</button>
<button onclick="scZinc()">Scale Z * 1.05</button>
<button onclick="scZdec()">Scale Z * 0.95</button>
<br>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="animRotate()">Animation Rotate</button>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI0.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="animRotate()">Multiple Texture Animation Rotate</button>
<br>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<br>
<button onclick="trXinc()">Translate X + 0.1</button>
<button onclick="trXdec()">Translate X - 0.1</button>
<br>
<button onclick="trYinc()">Translate Y + 0.1</button>
<button onclick="trYdec()">Translate Y - 0.1</button>
<br>
<button onclick="trZinc()">Translate Z + 0.1</button>
<button onclick="trZdec()">Translate Z - 0.1</button>
<br>
<br>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
<tr>
<td id="matrix1"> <td id="matrix5"> <td id="matrix9"> <td id="matrix13">
<tr>
<td id="matrix2"> <td id="matrix6"> <td id="matrix10"> <td id="matrix14">
<tr>
<td id="matrix3"> <td id="matrix7"> <td id="matrix11"> <td id="matrix15">
</table>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
<html>
<head>
<title>Computer Grapics Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<header>
<h1>Computer Graphics Final Project</h1>
<h2>WebGL Example Tool For Lecture</h2>
</header>
<section>
<img src="web.png">
<ul style="list-style-type:circle">
<li><a href="Rotating.html" >Rotating<a></li>
<li><a href="Transform.html" >Transform<a></li>
<li><a href="Scaling.html" >Scaling<a></li>
<li><a href="Culling.html" >Culling<a></li>
<li><a href="Texture.html" >Multiple Texture<a></li>
<li><a href="DepthTest.html" >DepthTest<a></li>
</ul>
</section>
</body>
</html>
student2018/201320923/web.png

5.22 KiB

<html>
<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body onload="renderScene(0)">
<canvas id="helloapicanvas" style="border: none;" width="570" height="570"></canvas>
<script type="text/javascript" src="WebGLAPI.js"></script>
<button onclick="init()">stop</button>
<br>
<button onclick="trXinc()">Translate X + 0.1</button>
<button onclick="trXdec()">Translate X - 0.1</button>
<br>
<button onclick="trYinc()">Translate Y + 0.1</button>
<button onclick="trYdec()">Translate Y - 0.1</button>
<br>
<button onclick="trZinc()">Translate Z + 0.1</button>
<button onclick="trZdec()">Translate Z - 0.1</button>
<br>
<button onclick="ScXinc()">scaling X + 0.1</button>
<button onclick="ScXdec()">scaling X - 0.1</button>
<br>
<button onclick="ScYinc()">scaling Y + 0.1</button>
<button onclick="ScYdec()">scaling Y - 0.1</button>
<br>
<button onclick="ScZinc()">scaling Z + 0.1</button>
<button onclick="ScZdec()">scaling Z - 0.1</button>
</body>
</html>
\ No newline at end of file
File added
var canvas = document.getElementById('helloapicanvas');
gl = canvas.getContext('experimental-webgl');
var vertices = [
-1 * Math.cos(((-1 + 1) / 2)) - Math.sin(((-1 + 1) / 2)) * 1, -1 * Math.sin(((-1 + 1) / 2)) + Math.cos(((-1 + 1) / 2)) * 1, -1,
1 * Math.cos(((-1 + 1) / 2)) - Math.sin(((-1 + 1) / 2)) * -1, 1 * Math.sin(((-1 + 1) / 2)) + Math.cos(((-1 + 1) / 2)) * -1, -1,
1 * Math.cos(((-1 + 1) / 2)) - Math.sin(((-1 + 1) / 2)) * 1, 1 * Math.sin(((-1 + 1) / 2)) + Math.cos(((-1 + 1) / 2)) * 1, -1,
-1 * Math.cos(((-1 + 1) / 2)) - Math.sin(((-1 + 1) / 2)) * -1, -1 * Math.sin(((-1 + 1) / 2)) + Math.cos(((-1 + 1) / 2)) * -1, -1,
-1 * Math.cos(((-0.5 + 1) / 2)) - Math.sin(((-0.5 + 1) / 2)) * 1, -1 * Math.sin(((-0.5 + 1) / 2)) + Math.cos(((-0.5 + 1) / 2)) * 1, -0.5,
1 * Math.cos(((-0.5 + 1) / 2)) - Math.sin(((-0.5 + 1) / 2)) * -1, 1 * Math.sin(((-0.5 + 1) / 2)) + Math.cos(((-0.5 + 1) / 2)) * -1, -0.5,
1 * Math.cos(((-0.5 + 1) / 2)) - Math.sin(((-0.5 + 1) / 2)) * 1, 1 * Math.sin(((-0.5 + 1) / 2)) + Math.cos(((-0.5 + 1) / 2)) * 1, -0.5,
-1 * Math.cos(((-0.5 + 1) / 2)) - Math.sin(((-0.5 + 1) / 2)) * -1, -1 * Math.sin(((-0.5 + 1) / 2)) + Math.cos(((-0.5 + 1) / 2)) * -1, -0.5,
-1 * Math.cos(((0 + 1) / 2)) - Math.sin(((0 + 1) / 2)) * 1, -1 * Math.sin(((0 + 1) / 2)) + Math.cos(((0 + 1) / 2)) * 1, 0,
1 * Math.cos(((0 + 1) / 2)) - Math.sin(((0 + 1) / 2)) * -1, 1 * Math.sin(((0 + 1) / 2)) + Math.cos(((0 + 1) / 2)) * -1, 0,
1 * Math.cos(((0 + 1) / 2)) - Math.sin(((0 + 1) / 2)) * 1, 1 * Math.sin(((0 + 1) / 2)) + Math.cos(((0 + 1) / 2)) * 1, 0,
-1 * Math.cos(((0 + 1) / 2)) - Math.sin(((0 + 1) / 2)) * -1, -1 * Math.sin(((0 + 1) / 2)) + Math.cos(((0 + 1) / 2)) * -1, 0,
-1 * Math.cos(((0.5 + 1) / 2)) - Math.sin(((0.5 + 1) / 2)) * 1, -1 * Math.sin(((0.5 + 1) / 2)) + Math.cos(((0.5 + 1) / 2)) * 1, 0.5,
1 * Math.cos(((0.5 + 1) / 2)) - Math.sin(((0.5 + 1) / 2)) * -1, 1 * Math.sin(((0.5 + 1) / 2)) + Math.cos(((0.5 + 1) / 2)) * -1, 0.5,
1 * Math.cos(((0.5 + 1) / 2)) - Math.sin(((0.5 + 1) / 2)) * 1, 1 * Math.sin(((0.5 + 1) / 2)) + Math.cos(((0.5 + 1) / 2)) * 1, 0.5,
-1 * Math.cos(((0.5 + 1) / 2)) - Math.sin(((0.5 + 1) / 2)) * -1, -1 * Math.sin(((0.5 + 1) / 2)) + Math.cos(((0.5 + 1) / 2)) * -1, 0.5,
-1 * Math.cos(((1 + 1) / 2)) - Math.sin(((1 + 1) / 2)) * 1, -1 * Math.sin(((1 + 1) / 2)) + Math.cos(((1 + 1) / 2)) * 1, 1,
1 * Math.cos(((1 + 1) / 2)) - Math.sin(((1 + 1) / 2)) * -1, 1 * Math.sin(((1 + 1) / 2)) + Math.cos(((1 + 1) / 2)) * -1, 1,
1 * Math.cos(((1 + 1) / 2)) - Math.sin(((1 + 1) / 2)) * 1, 1 * Math.sin(((1 + 1) / 2)) + Math.cos(((1 + 1) / 2)) * 1, 1,
-1 * Math.cos(((1 + 1) / 2)) - Math.sin(((1 + 1) / 2)) * -1, -1 * Math.sin(((1 + 1) / 2)) + Math.cos(((1 + 1) / 2)) * -1, 1
];
var colors = [
1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0,
0, 0.5, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1,
0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1,
0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1,
1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1,
1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0
];
var indices = [
0, 1, 2, 0, 1, 3,
0, 6, 4, 0, 6, 2,
1, 6, 2, 1, 6, 5,
0, 7, 3, 0, 7, 4,
1, 7, 3, 1, 7, 5,
4, 10, 8, 4, 10, 6,
6, 9, 10, 6, 9, 5,
4, 11, 8, 4, 11, 7,
7, 9, 11, 7, 9, 5,
8, 14, 12, 8, 14, 10,
10, 13, 14, 10, 13, 9,
8, 15, 11, 8, 15, 12,
11, 13, 15, 11, 13, 9,
12, 18, 14, 12, 18, 16,
14, 17, 18, 14, 17, 13,
12, 19, 16, 12, 19, 15,
15, 17, 19, 15, 17, 13,
16, 17, 18, 16, 17, 19
];
// Generate a buffer object
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
var index_buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
/*shader*/
var vertexShaderSource = 'attribute vec3 position;' +
'uniform mat4 Projection;' +
'uniform mat4 View;' +
'uniform mat4 Moving;' +
'uniform mat4 Twisting;' +
'attribute vec3 color;' +
'varying vec3 vColor;' +
'void main(void) { ' +
'gl_Position = Twisting*Projection*View*Moving*vec4(position, 1.0);' +
'vColor = color;' +
'}';
var fragmentShaderSource = 'precision mediump float;' +
'varying vec3 vColor;' +
'const vec3 lightPos = vec3(0.0,0.0,-2.0);' +
'const vec3 ambientColor = vec3(0.5, 0.5, 0.5);' +
'const vec3 diffuseColor = vec3(0.5, 0.5, 0.5);' +
'const vec3 specColor = vec3(1.0, 1.0, 1.0);' +
'void main(void) {' +
'gl_FragColor = vec4(vColor, 1.0);' +
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertexShaderSource);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragmentShaderSource);
gl.compileShader(fragShader);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
var Projection = gl.getUniformLocation(shaderProgram, "Projection");
var View = gl.getUniformLocation(shaderProgram, "View");
var Moving = gl.getUniformLocation(shaderProgram, "Moving");
var Twisting = gl.getUniformLocation(shaderProgram, "Twisting");
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var position = gl.getAttribLocation(shaderProgram, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color = gl.getAttribLocation(shaderProgram, "color");
gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color);
gl.useProgram(shaderProgram);
function get_projection(angle, a, zMin, zMax) {
var ang = Math.tan((angle * .5) * Math.PI / 180);
return [
0.5 / ang, 0, 0, 0,
0, 0.5 * a / ang, 0, 0,
0, 0, -(zMax + zMin) / (zMax - zMin), -1,
0, 0, (-2 * zMax * zMin) / (zMax - zMin), 0
];
}
var proj_matrix = get_projection(40, canvas.width / canvas.height, 1, 100);
var mov_matrix = [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1];
var view_matrix = [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1];
var twist_matrix = [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1];
view_matrix[14] = view_matrix[14] - 5;
function mulMatrix(m, k) {
m0 = m[0]; m1 = m[1]; m2 = m[2]; m3 = m[3]; m4 = m[4]; m5 = m[5]; m6 = m[6]; m7 = m[7];
m8 = m[8]; m9 = m[9]; m10 = m[10]; m11 = m[11]; m12 = m[12]; m13 = m[13]; m14 = m[14]; m15 = m[15];
k0 = k[0]; k1 = k[1]; k2 = k[2]; k3 = k[3]; k4 = k[4]; k5 = k[5]; k6 = k[6]; k7 = k[7];
k8 = k[8]; k9 = k[9]; k10 = k[10]; k11 = k[11]; k12 = k[12]; k13 = k[13]; k14 = k[14]; k15 = k[15];
a0 = k0 * m0 + k3 * m12 + k1 * m4 + k2 * m8;
a4 = k4 * m0 + k7 * m12 + k5 * m4 + k6 * m8;
a8 = k8 * m0 + k11 * m12 + k9 * m4 + k10 * m8;
a12 = k12 * m0 + k15 * m12 + k13 * m4 + k14 * m8;
a1 = k0 * m1 + k3 * m13 + k1 * m5 + k2 * m9;
a5 = k4 * m1 + k7 * m13 + k5 * m5 + k6 * m9;
a9 = k8 * m1 + k11 * m13 + k9 * m5 + k10 * m9;
a13 = k12 * m1 + k15 * m13 + k13 * m5 + k14 * m9;
a2 = k2 * m10 + k3 * m14 + k0 * m2 + k1 * m6;
a6 = k6 * m10 + k7 * m14 + k4 * m2 + k5 * m6;
a10 = k10 * m10 + k11 * m14 + k8 * m2 + k9 * m6;
a14 = k14 * m10 + k15 * m14 + k12 * m2 + k13 * m6;
a3 = k2 * m11 + k3 * m15 + k0 * m3 + k1 * m7;
a7 = k6 * m11 + k7 * m15 + k4 * m3 + k5 * m7;
a11 = k10 * m11 + k11 * m15 + k8 * m3 + k9 * m7;
a15 = k14 * m11 + k15 * m15 + k12 * m3 + k13 * m7;
m[0] = a0; m[1] = a1; m[2] = a2; m[3] = a3; m[4] = a4; m[5] = a5; m[6] = a6; m[7] = a7;
m[8] = a8; m[9] = a9; m[10] = a10; m[11] = a11; m[12] = a12; m[13] = a13; m[14] = a14; m[15] = a15;
}
function translate(m, tx, ty, tz) {
var tm = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
tm[12] = tx; tm[13] = ty; tm[14] = tz;
mulMatrix(m, tm);
}
function scale(m, tx, ty, tz) {
var tm = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
tm[0] += tx; tm[5] += ty; tm[10] += tz;
mulMatrix(m, tm);
}
/*rotate*/
function rotateX(m, angle) {
var convert1 = Math.cos(angle);
var convert2 = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1] * convert1 - m[2] * convert2;
m[5] = m[5] * convert1 - m[6] * convert2;
m[9] = m[9] * convert1 - m[10] * convert2;
m[2] = m[2] * convert1 + mv1 * convert2;
m[6] = m[6] * convert1 + mv5 * convert2;
m[10] = m[10] * convert1 + mv9 * convert2;
}
function rotateY(m, angle) {
var convert1 = Math.cos(angle);
var convert2 = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = convert1 * m[0] + convert2 * m[2];
m[4] = convert1 * m[4] + convert2 * m[6];
m[8] = convert1 * m[8] + convert2 * m[10];
m[2] = convert1 * m[2] - convert2 * mv0;
m[6] = convert1 * m[6] - convert2 * mv4;
m[10] = convert1 * m[10] - convert2 * mv8;
}
function rotateZ(m, angle) {
var convert1 = Math.cos(angle);
var convert2 = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = convert1 * m[0] - convert2 * m[1];
m[4] = convert1 * m[4] - convert2 * m[5];
m[8] = convert1 * m[8] - convert2 * m[9];
m[1] = convert1 * m[1] + convert2 * mv0;
m[5] = convert1 * m[5] + convert2 * mv4;
m[9] = convert1 * m[9] + convert2 * mv8;
}
transX = 0.0;
transY = 0.0;
transZ = 0.0;
scaleX = 0.0;
scaleY = 0.0;
scaleZ = 0.0;
/*translate*/
function trXinc() {
transX += 0.005;
document.getElementById("webTrX").innerHTML = "transX : " + transX.toFixed(4);
}
function trXdec() {
transX -= 0.005;
document.getElementById("webTrX").innerHTML = "transX : " + transX.toFixed(4);
}
function trYinc() {
transY += 0.005;
document.getElementById("webTrY").innerHTML = "transY : " + transY.toFixed(4);
}
function trYdec() {
transY -= 0.005;
document.getElementById("webTrY").innerHTML = "transY : " + transY.toFixed(4);
}
function trZinc() {
transZ += 0.005;
document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
}
function trZdec() {
transZ -= 0.005;
document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
}
/*scaling*/
function ScXinc() {
scaleX += 0.005;
document.getElementById("webScX").innerHTML = "ScaleX : " + scaleX.toFixed(4);
}
function ScXdec() {
scaleX -= 0.005;
document.getElementById("webScX").innerHTML = "ScaleX : " + scaleX.toFixed(4);
}
function ScYinc() {
scaleY += 0.005;
document.getElementById("webScY").innerHTML = "ScaleY : " + scaleY.toFixed(4);
}
function ScYdec() {
scaleY -= 0.005;
document.getElementById("webScY").innerHTML = "ScaleY : " + scaleY.toFixed(4);
}
function ScZinc() {
scaleZ += 0.005;
document.getElementById("webScZ").innerHTML = "ScaleZ : " + scaleZ.toFixed(4);
}
function ScZdec() {
scaleZ -= 0.005;
document.getElementById("webScZ").innerHTML = "ScaleZ : " + scaleZ.toFixed(4);
}
function init() {
transX = 0.0;
transY = 0.0;
transZ = 0.0;
scaleX = 0.0;
scaleY = 0.0;
scaleZ = 0.0;
}
/*renderScene*/
var time_old = 0;
var renderScene = function (time) {
var rotValue = time - time_old;
rotateX(mov_matrix, rotValue * 0.001);//time
rotateY(mov_matrix, rotValue * 0.001);
rotateZ(mov_matrix, rotValue * 0.001);
translate(mov_matrix, transX, transY, transZ);
scale(mov_matrix, scaleX, scaleY, scaleZ);
time_old = time;
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.6, 0.8, 1.0, 1.0);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(Projection, false, proj_matrix);
gl.uniformMatrix4fv(View, false, view_matrix);
gl.uniformMatrix4fv(Moving, false, mov_matrix);
gl.uniformMatrix4fv(Twisting, false, twist_matrix);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
window.requestAnimationFrame(renderScene);
}
renderScene(0);
\ No newline at end of file
student2018/201320968/twist.PNG

186 KiB

File added
This diff is collapsed.
//
// initShaders.js
//
function initShaders( gl, vertexShaderId, fragmentShaderId )
{
var vertShdr;
var fragShdr;
var vertElem = document.getElementById( vertexShaderId );
if ( !vertElem ) {
alert( "Unable to load vertex shader " + vertexShaderId );
return -1;
}
else {
vertShdr = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( vertShdr, vertElem.text );
gl.compileShader( vertShdr );
if ( !gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS) ) {
var msg = "Vertex shader failed to compile. The error log is:"
+ "<pre>" + gl.getShaderInfoLog( vertShdr ) + "</pre>";
alert( msg );
return -1;
}
}
var fragElem = document.getElementById( fragmentShaderId );
if ( !fragElem ) {
alert( "Unable to load vertex shader " + fragmentShaderId );
return -1;
}
else {
fragShdr = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( fragShdr, fragElem.text );
gl.compileShader( fragShdr );
if ( !gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS) ) {
var msg = "Fragment shader failed to compile. The error log is:"
+ "<pre>" + gl.getShaderInfoLog( fragShdr ) + "</pre>";
alert( msg );
return -1;
}
}
var program = gl.createProgram();
gl.attachShader( program, vertShdr );
gl.attachShader( program, fragShdr );
gl.linkProgram( program );
if ( !gl.getProgramParameter(program, gl.LINK_STATUS) ) {
var msg = "Shader program failed to link. The error log is:"
+ "<pre>" + gl.getProgramInfoLog( program ) + "</pre>";
alert( msg );
return -1;
}
return program;
}
/*
* Copyright 2010, Google Inc.
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/**
* @fileoverview This file contains functions every webgl program will need
* a version of one way or another.
*
* Instead of setting up a context manually it is recommended to
* use. This will check for success or failure. On failure it
* will attempt to present an approriate message to the user.
*
* gl = WebGLUtils.setupWebGL(canvas);
*
* For animated WebGL apps use of setTimeout or setInterval are
* discouraged. It is recommended you structure your rendering
* loop like this.
*
* function render() {
* window.requestAnimFrame(render, canvas);
*
* // do rendering
* ...
* }
* render();
*
* This will call your rendering function up to the refresh rate
* of your display but will stop rendering if your app is not
* visible.
*/
WebGLUtils = function() {
/**
* Creates the HTLM for a failure message
* @param {string} canvasContainerId id of container of th
* canvas.
* @return {string} The html.
*/
var makeFailHTML = function(msg) {
return '' +
'<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
'<td align="center">' +
'<div style="display: table-cell; vertical-align: middle;">' +
'<div style="">' + msg + '</div>' +
'</div>' +
'</td></tr></table>';
};
/**
* Mesasge for getting a webgl browser
* @type {string}
*/
var GET_A_WEBGL_BROWSER = '' +
'This page requires a browser that supports WebGL.<br/>' +
'<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
/**
* Mesasge for need better hardware
* @type {string}
*/
var OTHER_PROBLEM = '' +
"It doesn't appear your computer can support WebGL.<br/>" +
'<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
/**
* Creates a webgl context. If creation fails it will
* change the contents of the container of the <canvas>
* tag to an error message with the correct links for WebGL.
* @param {Element} canvas. The canvas element to create a
* context from.
* @param {WebGLContextCreationAttirbutes} opt_attribs Any
* creation attributes you want to pass in.
* @return {WebGLRenderingContext} The created context.
*/
var setupWebGL = function(canvas, opt_attribs) {
function showLink(str) {
var container = canvas.parentNode;
if (container) {
container.innerHTML = makeFailHTML(str);
}
};
if (!window.WebGLRenderingContext) {
showLink(GET_A_WEBGL_BROWSER);
return null;
}
var context = create3DContext(canvas, opt_attribs);
if (!context) {
showLink(OTHER_PROBLEM);
}
return context;
};
/**
* Creates a webgl context.
* @param {!Canvas} canvas The canvas tag to get context
* from. If one is not passed in one will be created.
* @return {!WebGLContext} The created context.
*/
var create3DContext = function(canvas, opt_attribs) {
var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
var context = null;
for (var ii = 0; ii < names.length; ++ii) {
try {
context = canvas.getContext(names[ii], opt_attribs);
} catch(e) {}
if (context) {
break;
}
}
return context;
}
return {
create3DContext: create3DContext,
setupWebGL: setupWebGL
};
}();
/**
* Provides requestAnimationFrame in a cross browser way.
*/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
window.setTimeout(callback, 1000/60);
};
})();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment