This repository has been archived by the owner on May 25, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_texture.html
85 lines (70 loc) · 2.06 KB
/
index_texture.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<title>ICG WebGL — HW1</title>
<meta name="author" content="Chih-Yung Liang">
</head>
<script src="js/glMatrix-0.9.5.min.js"></script>
<script src="js/webgl-utils.js"></script>
<script src="js/gl.js"></script>
<script src="js/common.js"></script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fragcolor;
void main(void) {
gl_FragColor = fragcolor;
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 fragcolor;
uniform sampler2D uSampler;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vec4 fragmentColor;
fragmentColor = texture2D(uSampler, vec2(aTextureCoord.s, aTextureCoord.t));
fragcolor = vec4(fragmentColor.rgb, fragmentColor.a);;
}
</script>
<script type="text/javascript">
var teapot;
var teapotAngle = 180;
function tick() {
teapot.transform.rotate.angle = teapotAngle;
requestAnimFrame(tick);
gl.drawScene();
animate();
}
function webGLStart() {
var canvas = document.getElementById("ICG-canvas");
gl.initGL(canvas);
gl.initShaders([
document.getElementById('fragmentShader'),
document.getElementById('vertexShader')
], {
uniforms: {
pMatrixUniform: "uPMatrix",
mvMatrixUniform: "uMVMatrix",
samplerUniform: "uSampler"
},
vertexAttrs: {
vertexPositionAttribute: "aVertexPosition",
textureCoordAttribute: "aTextureCoord"
}
});
galvanizedImg = new Image();
galvanizedImg.onload = function () {
gl.addTexture("galvanizedTexture", galvanizedImg);
}
galvanizedImg.src = "textures/galvanizedTexture.jpg";
teapot = loadTeapot();
tick();
}
</script>
<body onload="webGLStart();">
<canvas id="ICG-canvas" style="border: none;" width="800" height="600"></canvas>
</body>
</html>