BVB Source Codes

www.html5rocks.com Show webgl-2d-rectangle-with-position-for-color.html Source code

Return Download www.html5rocks.com: download webgl-2d-rectangle-with-position-for-color.html Source code - Download www.html5rocks.com Source code - Type:.html
  1. <!-- Licensed under a BSD license. See license.html for license -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>WebGL - Rectangle with position for color</title>
  7. <link type="text/css" href="resources/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
  8. <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
  9. <style>
  10. #ui {
  11.     width: 200px;
  12. }
  13. #rotation>canvas {
  14.     background-color: rgba(255, 255, 255, 0.6) !important;
  15. }
  16. </style>
  17. <script type="text/javascript" src="resources/jquery-1.7.1.min.js"></script>
  18. <script type="text/javascript" src="resources/jquery-ui-1.8.16.custom.min.js"></script>
  19. <script type="text/javascript" src="resources/jquery.gman.ui.js"></script>
  20. <script type="text/javascript" src="resources/webgl-utils.js"></script>
  21. <script type="text/javascript" src="resources/webgl-2d-math.js"></script>
  22. <script>
  23. $(function(){
  24.   main();
  25. });
  26.  
  27. function main() {
  28.   // Get A WebGL context
  29.   var canvas = document.getElementById("canvas");
  30.   var gl = getWebGLContext(canvas);
  31.   if (!gl) {
  32.     return;
  33.   }
  34.  
  35.   // setup GLSL program
  36.   vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  37.   fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  38.   program = createProgram(gl, [vertexShader, fragmentShader]);
  39.   gl.useProgram(program);
  40.  
  41.   // look up where the vertex data needs to go.
  42.   var positionLocation = gl.getAttribLocation(program, "a_position");
  43.  
  44.   // lookup uniforms
  45.   var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  46.  
  47.   // Create a buffer.
  48.   var buffer = gl.createBuffer();
  49.   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  50.   gl.enableVertexAttribArray(positionLocation);
  51.   gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  52.  
  53.   // Set Geometry.
  54.   setGeometry(gl);
  55.  
  56.   var translation = [200, 150];
  57.   var angleInRadians = 0;
  58.   var scale = [1, 1];
  59.  
  60.   drawScene();
  61.  
  62.   // Setup a ui.
  63.   $("#x").gmanSlider({value: translation[0], slide: updatePosition(0), max: canvas.width });
  64.   $("#y").gmanSlider({value: translation[1], slide: updatePosition(1), max: canvas.height});
  65.   $("#angle").gmanSlider({slide: updateAngle, max: 360});
  66.   $("#scaleX").gmanSlider({value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
  67.   $("#scaleY").gmanSlider({value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
  68.  
  69.   function updatePosition(index) {
  70.     return function(event, ui) {
  71.       translation[index] = ui.value;
  72.       drawScene();
  73.     }
  74.   }
  75.  
  76.   function updateAngle(event, ui) {
  77.     var angleInDegrees = 360 - ui.value;
  78.     angleInRadians = angleInDegrees * Math.PI / 180;
  79.     drawScene();
  80.   }
  81.  
  82.   function updateScale(index) {
  83.     return function(event, ui) {
  84.       scale[index] = ui.value;
  85.       drawScene();
  86.     }
  87.   }
  88.  
  89.   // Draw the scene.
  90.   function drawScene() {
  91.     // Clear the canvas.
  92.     gl.clear(gl.COLOR_BUFFER_BIT);
  93.  
  94.     // Compute the matrices
  95.     var projectionMatrix = make2DProjection(canvas.width, canvas.height);
  96.     var translationMatrix = makeTranslation(translation[0], translation[1]);
  97.     var rotationMatrix = makeRotation(angleInRadians);
  98.     var scaleMatrix = makeScale(scale[0], scale[1]);
  99.  
  100.     // Multiply the matrices.
  101.     var matrix = matrixMultiply(scaleMatrix, rotationMatrix);
  102.     matrix = matrixMultiply(matrix, translationMatrix);
  103.     matrix = matrixMultiply(matrix, projectionMatrix);
  104.  
  105.     // Set the matrix.
  106.     gl.uniformMatrix3fv(matrixLocation, false, matrix);
  107.  
  108.     // Draw the geometry.
  109.     gl.drawArrays(gl.TRIANGLES, 0, 6);
  110.   }
  111. }
  112.  
  113. // Fill the buffer with the values that define a rectangle.
  114. function setGeometry(gl) {
  115.   gl.bufferData(
  116.       gl.ARRAY_BUFFER,
  117.       new Float32Array([
  118.           -150, -100,
  119.            150, -100,
  120.           -150,  100,
  121.            150, -100,
  122.           -150,  100,
  123.            150,  100]),
  124.       gl.STATIC_DRAW);
  125. }
  126.  
  127. </script>
  128. <!-- vertex shader -->
  129. <script id="2d-vertex-shader" type="x-shader/x-vertex">
  130. attribute vec2 a_position;
  131.  
  132. uniform mat3 u_matrix;
  133.  
  134. varying vec4 v_color;
  135.  
  136. void main() {
  137.   // Multiply the position by the matrix.
  138.   gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
  139.  
  140.   // Convert from clipspace to colorspace.
  141.   // Clipspace goes -1.0 to +1.0
  142.   // Colorspace goes from 0.0 to 1.0
  143.   v_color = gl_Position * 0.5 + 0.5;
  144. }
  145. </script>
  146. <!-- fragment shader -->
  147. <script id="2d-fragment-shader" type="x-shader/x-fragment">
  148. precision mediump float;
  149.  
  150. varying vec4 v_color;
  151.  
  152. void main() {
  153.   gl_FragColor = v_color;
  154. }
  155. </script>
  156. </head>
  157. <body>
  158. <div class="description">
  159. Drag sliders to translate, rotate, and scale.
  160. </div>
  161. <canvas id="canvas" width="400" height="300"></canvas>
  162. <div id="uiContainer">
  163.   <div id="ui">
  164.     <div id="x"></div>
  165.     <div id="y"></div>
  166.     <div id="angle"></div>
  167.     <div id="scaleX"></div>
  168.     <div id="scaleY"></div>
  169.   </div>
  170. </div>
  171. </body>
  172. </html>
  173.  
  174.  
  175.  
downloadwebgl-2d-rectangle-with-position-for-color.html Source code - Download www.html5rocks.com Source code
Related Source Codes/Software:
MTStatusBarOverlay - A custom iOS status bar overlay seen in Apps like ... 2017-05-12
blueprint - Reverse engineer server configuration ... 2017-05-12
PullToRefresh - A simple iPhone TableViewController for adding the... 2017-05-12
mrjob - Run MapReduce jobs on Hadoop or Amazon Web Service... 2017-05-11
wax - Wax is now being maintained by alibaba ... 2017-05-11
hologram - A markdown based documentation system for style gu... 2017-05-12
isso - a Disqus alternative https:... 2017-05-12
python3-cookbook - "The Python Cookbook" 3 rd Edition Translatio 2017-05-12
TSA-Travel-Sentry-master-keys - 3D reproduction of TSA Master key 2017-05-12
fatfree - A powerful yet easy-to-use PHP micro-framework des... 2017-05-13
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top