source: issm/web/ISSM.html@ 15488

Last change on this file since 15488 was 15487, checked in by ltnguyen, 12 years ago

ADD: Basic backbone for ISSM Web_Development
File size: 19.5 KB
Line 
1<html>
2
3<head>
4<title>ISSM Web APP &mdash; Testing</title>
5<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
6
7
8<!-- CSS -->
9<link rel="stylesheet" href="css/animate.css"/>
10<link rel="stylesheet" href="css/jquery.ui.all.css"/>
11<link rel="stylesheet" type="text/css" href="js/sidebar/css/blue-glass/sidebar.css" />
12<link rel="stylesheet" href="css/mystyle.css"/>
13
14<!-- JavaScript -->
15<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
16<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
17<script type="text/javascript" src="src/glMatrix-0.9.5.min.js"></script>
18<script type="text/javascript" src="src/coordinate.js"></script>
19<script type="text/javascript" src="src/color.js"></script>
20<script type="text/javascript" src="src/webgl-utils.js"></script>
21<script type="text/javascript" src="js/sidebar/src/jquery.sidebar.js"></script>
22
23 <script id="shader-fs1" type="x-shader/x-fragment">
24 precision mediump float;
25
26 varying vec2 vTextureCoord;
27 uniform sampler2D uSampler;
28
29 void main(void) {
30 gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
31 }
32 </script>
33
34 <script id="shader-vs1" type="x-shader/x-vertex">
35 attribute vec3 aVertexPosition;
36 attribute vec2 aTextureCoord;
37
38 uniform mat4 uMVMatrix;
39 uniform mat4 uPMatrix;
40
41 varying vec2 vTextureCoord;
42
43 void main(void) {
44 gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
45 vTextureCoord = aTextureCoord;
46 }
47 </script>
48
49 <script id="shader-fs2" type="x-shader/x-fragment">
50 precision mediump float;
51
52 varying vec4 vColor;
53
54 void main(void) {
55 gl_FragColor = vColor;
56 }
57 </script>
58
59 <script id="shader-vs2" type="x-shader/x-vertex">
60 attribute vec3 aVertexPosition;
61 attribute vec4 aVertexColor;
62
63 uniform mat4 uMVMatrix;
64 uniform mat4 uPMatrix;
65
66 varying vec4 vColor;
67
68 void main(void) {
69 gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
70 vColor = aVertexColor;
71 }
72 </script>
73
74 <script type="text/javascript">
75
76 var gl;
77
78 function initGL(canvas) {
79 try {
80 gl = canvas.getContext("experimental-webgl");
81 gl.viewportWidth = canvas.width;
82 gl.viewportHeight = canvas.height;
83 } catch (e) {
84 }
85 if (!gl) {
86 alert("Could not initialise WebGL, sorry :-(");
87 }
88 }
89
90
91 function getShader(gl, id) {
92 var shaderScript = document.getElementById(id);
93 if (!shaderScript) {
94 return null;
95 }
96
97 var str = "";
98 var k = shaderScript.firstChild;
99 while (k) {
100 if (k.nodeType == 3) {
101 str += k.textContent;
102 }
103 k = k.nextSibling;
104 }
105
106 var shader;
107 if (shaderScript.type == "x-shader/x-fragment") {
108 shader = gl.createShader(gl.FRAGMENT_SHADER);
109 } else if (shaderScript.type == "x-shader/x-vertex") {
110 shader = gl.createShader(gl.VERTEX_SHADER);
111 } else {
112 return null;
113 }
114
115 gl.shaderSource(shader, str);
116 gl.compileShader(shader);
117
118 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
119 alert(gl.getShaderInfoLog(shader));
120 return null;
121 }
122
123 return shader;
124 }
125
126
127
128 var shaderProgram1;
129
130 function initShaders1() {
131 var fragmentShader = getShader(gl, "shader-fs1");
132 var vertexShader = getShader(gl, "shader-vs1");
133
134 shaderProgram1 = gl.createProgram();
135 gl.attachShader(shaderProgram1, vertexShader);
136 gl.attachShader(shaderProgram1, fragmentShader);
137 gl.linkProgram(shaderProgram1);
138
139 if (!gl.getProgramParameter(shaderProgram1, gl.LINK_STATUS) )
140 {
141 alert("Could not initialise shaders");
142 }
143
144 gl.useProgram(shaderProgram1);
145
146 shaderProgram1.vertexPositionAttribute = gl.getAttribLocation(shaderProgram1, "aVertexPosition");
147 gl.enableVertexAttribArray(shaderProgram1.vertexPositionAttribute);
148
149 shaderProgram1.textureCoordAttribute = gl.getAttribLocation(shaderProgram1, "aTextureCoord");
150 gl.enableVertexAttribArray(shaderProgram1.textureCoordAttribute);
151
152 shaderProgram1.pMatrixUniform = gl.getUniformLocation(shaderProgram1, "uPMatrix");
153 shaderProgram1.mvMatrixUniform = gl.getUniformLocation(shaderProgram1, "uMVMatrix");
154 shaderProgram1.samplerUniform = gl.getUniformLocation(shaderProgram1, "uSampler");
155 }
156
157
158 var shaderProgram2;
159
160 function initShaders2() {
161 var fragmentShader = getShader(gl, "shader-fs2");
162 var vertexShader = getShader(gl, "shader-vs2");
163
164 shaderProgram2 = gl.createProgram();
165 gl.attachShader(shaderProgram2, vertexShader);
166 gl.attachShader(shaderProgram2, fragmentShader);
167 gl.linkProgram(shaderProgram2);
168
169 if (!gl.getProgramParameter(shaderProgram2, gl.LINK_STATUS) )
170 {
171 alert("Could not initialise shaders");
172 }
173
174 gl.useProgram(shaderProgram2);
175
176 shaderProgram2.vertexPositionAttribute = gl.getAttribLocation(shaderProgram2, "aVertexPosition");
177 gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
178
179 shaderProgram2.vertexColorAttribute = gl.getAttribLocation(shaderProgram2, "aVertexColor");
180 gl.enableVertexAttribArray(shaderProgram2.vertexColorAttribute);
181
182 shaderProgram2.pMatrixUniform = gl.getUniformLocation(shaderProgram2, "uPMatrix");
183 shaderProgram2.mvMatrixUniform = gl.getUniformLocation(shaderProgram2, "uMVMatrix");
184 }
185
186 function handleLoadedTexture(texture) {
187 gl.bindTexture(gl.TEXTURE_2D, texture);
188 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
189 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
190 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
191 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
192 gl.bindTexture(gl.TEXTURE_2D, null);
193 }
194
195
196 var neheTexture;
197
198 function initTexture() {
199 neheTexture = gl.createTexture();
200 neheTexture.image = new Image();
201 neheTexture.image.onload = function () {
202 handleLoadedTexture(neheTexture)
203 }
204
205 neheTexture.image.src = "images/greenland.png";
206 }
207
208
209 var mvMatrix = mat4.create();
210 var mvMatrixStack = [];
211 var pMatrix = mat4.create();
212
213 function mvPushMatrix() {
214 var copy = mat4.create();
215 mat4.set(mvMatrix, copy);
216 mvMatrixStack.push(copy);
217 }
218
219 function mvPopMatrix() {
220 if (mvMatrixStack.length == 0) {
221 throw "Invalid popMatrix!";
222 }
223 mvMatrix = mvMatrixStack.pop();
224 }
225
226
227 function setMatrixUniforms1() {
228 gl.uniformMatrix4fv(shaderProgram1.pMatrixUniform, false, pMatrix);
229 gl.uniformMatrix4fv(shaderProgram1.mvMatrixUniform, false, mvMatrix);
230 }
231
232 function setMatrixUniforms2() {
233 gl.uniformMatrix4fv(shaderProgram2.pMatrixUniform, false, pMatrix);
234 gl.uniformMatrix4fv(shaderProgram2.mvMatrixUniform, false, mvMatrix);
235 }
236
237
238 function degToRad(degrees) {
239 return degrees * Math.PI / 180;
240 }
241
242 var triangleVertexPositionBuffer;
243 var triangleVertexColorBuffer;
244 var col = 9;
245 function VertexArray(x1,y1,z1,x2,y2,z2,x3,y3,z3)
246 {
247 return [x1,y1,z1,x2,y2,z2,x3,y3,z3];
248 }
249
250 function ColorsArray(R1,G1,B1,A1,R2,G2,B2,A2,R3,G3,B3,A3)
251 {
252 return [R1,G1,B1,A1,R2,G2,B2,A2,R3,G3,B3,A3];
253 }
254 function generateTriangle(row)
255 {
256 var x1 = coordinate[col*row+0];
257 var y1 = coordinate[col*row+1];
258 var z1 = coordinate[col*row+2];
259 var x2 = coordinate[col*row+3];
260 var y2 = coordinate[col*row+4];
261 var z2 = coordinate[col*row+5];
262 var x3 = coordinate[col*row+6];
263 var y3 = coordinate[col*row+7];
264 var z3 = coordinate[col*row+8];
265
266 var result;
267 result = new VertexArray(x1,y1,z1,x2,y2,z2,x3,y3,z3);
268 return result;
269 }
270
271 function generateTriangleColor(row)
272 {
273 var R1 = color[col*row+0];
274 var G1 = color[col*row+1];
275 var B1 = color[col*row+2];
276 var R2 = color[col*row+3];
277 var G2 = color[col*row+4];
278 var B2 = color[col*row+5];
279 var R3 = color[col*row+6];
280 var G3 = color[col*row+7];
281 var B3 = color[col*row+8];
282
283 var result;
284 result = new ColorsArray(R1,G1,B1,1.0,R2,G2,B2,1.0,R3,G3,B3,1.0);
285 return result;
286 }
287
288 var size = 252;
289 function createTriangles()
290 {
291 triangleVertexPositionBuffer = new Array(size);
292 triangleVertexColorBuffer = new Array(size);
293 triangleVertexPositionBuffer.itemSize = 3;
294 triangleVertexPositionBuffer.numItems = 3;
295 triangleVertexColorBuffer.itemSize = 4;
296 triangleVertexColorBuffer.numItems = 3;
297
298 var triangleVertex;
299 var triangleColor;
300
301 for(var i = 0; i < size; i++)
302 {
303 triangleVertex = generateTriangle(i);
304 triangleColor = generateTriangleColor(i);
305
306 //create buffer on GL side for vertex
307 triangleVertexPositionBuffer[i] = gl.createBuffer();
308 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer[i]);
309 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertex), gl.STATIC_DRAW);
310
311 //create buffer on GL side for color
312 triangleVertexColorBuffer[i] = gl.createBuffer();
313 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer[i]);
314 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleColor), gl.STATIC_DRAW);
315 }
316 }
317
318
319 function initBuffers()
320 {
321 createTriangles();
322 }
323
324
325
326 var squareVertexPositionBuffer;
327 var squareVertexTextureCoordBuffer;
328 var squareVertexIndexBuffer;
329
330 function initBuffers() {
331 squareVertexPositionBuffer = gl.createBuffer();
332 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
333 vertices = [
334 // Front face
335 -1.0, -1.0, 0.0,
336 1.0, -1.0, 0.0,
337 1.0, 1.0, 0.0,
338 -1.0, 1.0, 0.0,
339 ];
340 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
341 squareVertexPositionBuffer.itemSize = 3;
342 squareVertexPositionBuffer.numItems = 4;
343
344 squareVertexTextureCoordBuffer = gl.createBuffer();
345 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexTextureCoordBuffer);
346 var textureCoords = [
347 // Front face
348 0.0, 0.0,
349 1.0, 0.0,
350 1.0, 1.0,
351 0.0, 1.0,
352 ];
353 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
354 squareVertexTextureCoordBuffer.itemSize = 2;
355 squareVertexTextureCoordBuffer.numItems = 4;
356
357 squareVertexIndexBuffer = gl.createBuffer();
358 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer);
359 var squareVertexIndices = [
360 0, 1, 2, 0, 2, 3, // Front face
361 ];
362 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(squareVertexIndices), gl.STATIC_DRAW);
363 squareVertexIndexBuffer.itemSize = 1;
364 squareVertexIndexBuffer.numItems = 6;
365
366 createTriangles();
367 }
368
369 function drawScene() {
370 gl.useProgram(shaderProgram2);
371 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
372 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
373
374 mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
375
376 mat4.identity(mvMatrix);
377 mat4.translate(mvMatrix, [0, 0, -3.0]);
378
379
380 for(var i = 0; i < size; i++)
381 {
382 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer[i]);
383 gl.vertexAttribPointer(shaderProgram2.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
384
385 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer[i]);
386 gl.vertexAttribPointer(shaderProgram2.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
387
388 setMatrixUniforms2();
389 gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
390 }
391 }
392
393
394 var xRot = 0;
395 var yRot = 0;
396 var zRot = 0;
397
398 function drawBackground()
399 {
400 gl.useProgram(shaderProgram1);
401 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
402 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
403
404 mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
405
406 mat4.identity(mvMatrix);
407 mat4.translate(mvMatrix, [0.0, 0.0, -2.0]);
408
409 // draw background position
410 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
411 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
412
413 mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
414
415 mat4.identity(mvMatrix);
416
417 mat4.translate(mvMatrix, [0.0, 0.0, -3.0]);
418
419 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
420 gl.vertexAttribPointer(shaderProgram1.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
421
422 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexTextureCoordBuffer);
423 gl.vertexAttribPointer(shaderProgram1.textureCoordAttribute, squareVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
424
425 gl.activeTexture(gl.TEXTURE0);
426 gl.bindTexture(gl.TEXTURE_2D, neheTexture);
427 gl.uniform1i(shaderProgram1.samplerUniform, 0);
428
429 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer);
430 setMatrixUniforms1();
431 gl.drawElements(gl.TRIANGLES, squareVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
432 }
433
434 var lastTime = 0;
435
436 function animate() {
437 var timeNow = new Date().getTime();
438 if (lastTime != 0) {
439 var elapsed = timeNow - lastTime;
440
441 //xRot += (90 * elapsed) / 1000.0;
442 //yRot += (90 * elapsed) / 1000.0;
443 //zRot += (90 * elapsed) / 1000.0;
444 }
445 lastTime = timeNow;
446 }
447
448 var drawFigure = 0;
449
450 function tick() {
451 requestAnimFrame(tick);
452 if( drawFigure == 0)
453 drawBackground();
454 else
455 drawScene();
456 //animate();
457 }
458
459 function triggerDrawFigure()
460 {
461 drawFigure = 1;
462 }
463
464 function webGLStart() {
465 var canvas = document.getElementById("ISSM-canvas");
466 initGL(canvas);
467 initShaders1();
468 initShaders2();
469 initBuffers();
470 initTexture();
471
472 gl.clearColor(0.0, 0.0, 0.0, 1.0);
473 gl.enable(gl.DEPTH_TEST);
474
475 tick();
476 }
477
478
479 </script>
480
481 <script>
482 $(function() {
483 $( "input[type=submit], button" )
484 .button()
485 .click(function( event ) {
486 event.preventDefault();
487 });
488 });
489
490 $(function() {
491 $( "#friction-slider" ).slider({
492 range: "min",
493 value: 20,
494 min: 10,
495 max: 500,
496 slide: function( event, ui ) {
497 $( "#amount1" ).val( " " + ui.value );
498 }
499 });
500 $( "#amount1" ).val( " " + $( "#friction-slider" ).slider( "value" ) );
501
502 $( "#temperature-slider" ).slider({
503 range: "min",
504 value: 20,
505 min: 10,
506 max: 500,
507 slide: function( event, ui ) {
508 $( "#amount2" ).val( " " + ui.value );
509 }
510 });
511 $( "#amount2" ).val( " " + $( "#temperature-slider" ).slider( "value" ) );
512
513 $( "#sea-slider" ).slider({
514 range: "min",
515 value: 20,
516 min: 10,
517 max: 500,
518 slide: function( event, ui ) {
519 $( "#amount3" ).val( " " + ui.value );
520 }
521 });
522 $( "#amount3" ).val( " " + $( "#sea-slider" ).slider( "value" ) );
523 });
524 </script>
525
526</head>
527
528<body onload="webGLStart();">
529 <div id="frame" style="position: relative; left: 0; top: 0;" >
530 <img src="images/ISSMJPLTOP.png" class="imageBorder" width="750" height="120" style="top: 0; left: 0;">
531 <a href="ISSM.html" target=""><img src="images/ISSMlogo.png" width="500" height="70" style="position: absolute; top: 30; left: 250;"></a>
532 <ul id="sidebar" >
533 <li><a href="gallery.html" >Gallery</a></li>
534 <li><a href="ISSM.html" >Simulator</a></li>
535 <li><a href="http://issm.jpl.nasa.gov/" >Visit Us</a></li>
536 </ul>
537 <script type="text/javascript">
538 $("ul#sidebar").sidebar();
539 </script>
540 <div id="canvasframe">
541 <canvas class="animated bounceInDown" id="ISSM-canvas" style="border: none;" width="700" height="580"></canvas>
542 <br/>
543 <br/>
544 <table id="sliderTable">
545 <tr>
546 <td width="10%">
547 <label class="sliderLabel" for="amount1">Friction:</label> <td/>
548 <td width="10%">
549 <input type="text" class="borderText" id="amount1" style=" width:50; border:0; color:#f6931f; font-weight:bold;" />
550 <td width="80%">
551 <div id="friction-slider"></div>
552 </td>
553
554 <tr>
555 <td width="10%">
556 <label class="sliderLabel" for="amount2">Temperature:</label> <td/>
557 <td width="10%">
558 <input type="text" class="borderText" id="amount2" style=" width:50; border:0; color:#f6931f; font-weight:bold;" />
559 <td width="80%">
560 <div id="temperature-slider"></div>
561 </td>
562
563
564 <tr>
565 <td width="10%">
566 <label class="sliderLabel" for="amount3">Sea Level:</label> <td/>
567 <td width="10%">
568 <input type="text" class="borderText" id="amount3" style=" width:50; border:0; color:#f6931f; font-weight:bold;" />
569 <td width="80%">
570 <div id="sea-slider"></div>
571 </td>
572
573 </table>
574 <br/>
575 <input type="submit" style="width:700" onclick="triggerDrawFigure()" value="Run" />
576 </div>
577 </div>
578 <img src="images/globe.png" alt="globe" height="350" width="500" align="right">
579</body>
580
581</html>
Note: See TracBrowser for help on using the repository browser.