-
Notifications
You must be signed in to change notification settings - Fork 0
/
webgl.html
229 lines (181 loc) · 6.25 KB
/
webgl.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:5px solid black;}
</style>
</head>
<body>
<script language = "glsl" id = "VSHADER_CODE" type = "vertex-glsl">
attribute vec2 coordinates;
attribute vec3 color;
uniform mat4 rotationMatrix;
uniform mat4 translationMatrix;
uniform mat4 scaleMatrix;
varying vec3 vColor;
void main(void){
gl_Position = vec4(coordinates, 0.0, 1.0) * scaleMatrix * rotationMatrix * translationMatrix;
vColor = color;
}
</script>
<script language = "glsl" id = "FSHADER_CODE" type = "fragment-glsl">
precision mediump float;
varying vec3 vColor;
void main(void){
gl_FragColor = vec4(vColor, 1.0);
}
</script>
<canvas width = "500" height = "500" id = 'mycanvas'></canvas>
<script type = "text/javascript">
/* Gets the canvas */
function getCanvas(canvasId){
return document.getElementById(canvasId);
}
/* Prepare the Canvas and get return the WebGL context */
function prepare(canvas,context){
return canvas.getContext(context);
}
/* Defines the geometry and stores it in buffer objects */
function createVBO(gl,vertices){
//Create new Buffer Object
var VBO = gl.createBuffer();
//Bind an empty array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
//Pass the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return VBO;
}
function createIBO(gl, indices){
var IBO = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IBO);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
return IBO;
}
/* Gets the shader code, links to a shader type and compile */
function getShader(gl,id){
var shaderScript = document.getElementById(id);
if(!shaderScript){
alert("Couldn't find "+id+" Shader Script!");
return null;
}
var code = shaderScript.textContent;
var shader;
if(shaderScript.type == "vertex-glsl"){
shader = gl.createShader(gl.VERTEX_SHADER);
}else if(shaderScript.type == "fragment-glsl"){
shader = gl.createShader(gl.FRAGMENT_SHADER);
}else{
alert("ERROR: "+shaderScript.type+" Wrong Shader Type!")
return null;
}
gl.shaderSource(shader, code);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
/* Create and Compile shader programs */
function startShaders(gl){
var vertShader = getShader(gl, "VSHADER_CODE");
var fragShader = getShader(gl, "FSHADER_CODE");
//Create a shader program object to store combined shader program
var shaderProgram = gl.createProgram();
//Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
//Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
//Link both shaders
gl.linkProgram(shaderProgram);
//Use the combined shader program object
gl.useProgram(shaderProgram);
return shaderProgram;
}
/* Associate the shader programs to buffer objects */
function associate(gl,VBO,IBO,attribute,size,shaderProgram){
//Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
if(IBO!=null){
//Bind index buffer object
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IBO);
}
//Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, attribute);
//Point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, size, gl.FLOAT, false, 0, 0);
//Enable the attribute
gl.enableVertexAttribArray(coord);
}
/* Draws the object */
function draw(gl,canvas,indices){
//Clear the canvas
gl.clearColor(0.5,0.5,0.5,0.9);
//Enable the depth test
gl.enable(gl.DEPTH_TEST);
//Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//Set the viewport
gl.viewport(0, 0, canvas.width, canvas.height);
//Draw the triangle
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
function render(gl,VBO,IBO,indices,shaderProgram,canvas){
associate(gl,VBO,IBO,shaderProgram);
draw(gl,canvas,indices);
}
var canvas = getCanvas('mycanvas');
var gl = prepare(canvas, 'experimental-webgl');
var vertices = [1,1, -1,1, 1,-1, -1,-1];
var VBO = createVBO(gl, vertices);
var indices = [0,1,2,1,3,2];
var IBO = createIBO(gl, indices);
var colors = [1,0,0, 0,1,0, 0,0,1, 1,0,1];
var CBO = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, CBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var shaderProgram = startShaders(gl);
var Sx = 0.5;
var Sy = 0.5;
var Sz = 1.0;
var ScaleMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);
var Tx = 0.2;
var Ty = 0.2;
var Tz = 0.2;
var TranslationMatrix = new Float32Array([
1.0, 0.0, 0.0, Tx,
0.0, 1.0, 0.0, Ty,
0.0, 0.0, 1.0, Tz,
0.0, 0.0, 0.0, 1.0
]);
function toRadians(theta){
return theta * (Math.PI / 180);
}
var theta = 135;
var RotationMatrix = new Float32Array([
Math.cos(toRadians(theta)), -Math.sin(toRadians(theta)), 0.0, 0.0,
Math.sin(toRadians(theta)), Math.cos(toRadians(theta)), 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
]);
var UniformRotation = gl.getUniformLocation(shaderProgram, "rotationMatrix");
gl.uniformMatrix4fv(UniformRotation, false, RotationMatrix);
var UniformTranslation = gl.getUniformLocation(shaderProgram, "translationMatrix");
gl.uniformMatrix4fv(UniformTranslation, false, TranslationMatrix);
var UniformScale = gl.getUniformLocation(shaderProgram, "scaleMatrix");
gl.uniformMatrix4fv(UniformScale, false, ScaleMatrix);
associate(gl,VBO,IBO,"coordinates",2,shaderProgram);
associate(gl,CBO,null,"color",3,shaderProgram);
draw(gl,canvas,indices);
</script>
</body>
</html>