fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebGL</title>
  6.     <script type="text/javascript" src="http://g...content-available-to-author-only...b.com/webgl-fundamentals/webgl/resources/webgl-utils.js"></script>
  7. <script>
  8.     var gl;
  9.     function initGL() {
  10.       // Get A WebGL context
  11.       var canvas = document.getElementById("canvas");
  12.       gl = getWebGLContext(canvas);
  13.       if (!gl) {
  14.         return;
  15.       }
  16.     }
  17.     var positionLocation;
  18.     var resolutionLocation;
  19.     var colorLocation;
  20.     var translationLocation;
  21.     var rotationLocation;
  22.     var translation = [];
  23.     var rotation = [];
  24.     var angle;
  25.     function initShaders() {
  26.       // setup GLSL program
  27.       vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  28.       fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  29.       program = createProgram(gl, [vertexShader, fragmentShader]);
  30.       gl.useProgram(program);
  31.  
  32.       // look up where the vertex data needs to go.
  33.       positionLocation = gl.getAttribLocation(program, "a_position");
  34.  
  35.       // lookup uniforms
  36.       resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  37.       colorLocation = gl.getUniformLocation(program, "u_color");
  38.       translationLocation = gl.getUniformLocation(program, "u_translation");
  39.         rotationLocation = gl.getUniformLocation(program, "u_rotation");
  40.  
  41.       // set the resolution
  42.       gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
  43.     }
  44.     function initBuffers() {
  45.       // Create a buffer.
  46.       var buffer = gl.createBuffer();
  47.       gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  48.       gl.enableVertexAttribArray(positionLocation);
  49.       gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  50.  
  51.       // Set Geometry.
  52.       setGeometry();
  53.     }
  54.  
  55.     function setColor(red, green, blue) {
  56.         gl.uniform4f(colorLocation, red, green, blue, 1);
  57.     }
  58.     // Draw the scene.
  59.     function drawScene() {
  60.         // Set the translation.
  61.         gl.uniform2fv(translationLocation, translation);
  62.         // Set the rotation.
  63.         gl.uniform2fv(rotationLocation, rotation);
  64.  
  65.         // Draw the geometry.
  66.         gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
  67.     }
  68.  
  69.  
  70.     function setGeometry() {//Here is clearly set the x (100) larger than y (50)
  71.         var vertices = [
  72.              -100, -50,
  73.              -100, 50,
  74.              100, 50,
  75.              100, -50 ];
  76.           gl.bufferData(
  77.              gl.ARRAY_BUFFER,
  78.              new Float32Array(vertices),
  79.              gl.STATIC_DRAW);
  80.     }
  81.  
  82.     function animate() {//I removed the animation so you could look at the problem specifically
  83.         translation[0] = 100;
  84.         translation[1] = 100;
  85.     angle = 0.0;
  86.         rotation[0] = Math.sin(angle);
  87.         rotation[1] = Math.cos(angle);
  88.     }
  89.     function tick() {
  90.         gl.clear(gl.COLOR_BUFFER_BIT);
  91.         requestAnimFrame(tick);
  92.         initBuffers();
  93.         animate();
  94.         drawScene();
  95.     }
  96.  
  97.     function start() {
  98.         initGL();
  99.         initShaders();
  100.         setColor(0.2, 0.5, 0.5);
  101.         tick();
  102.     }
  103. </script>
  104.  
  105. <!-- vertex shader -->
  106. <script id="2d-vertex-shader" type="x-shader/x-vertex">
  107.     attribute vec2 a_position;
  108.  
  109.     uniform vec2 u_resolution;
  110.     uniform vec2 u_translation;
  111.     uniform vec2 u_rotation;
  112.     void main() {
  113.         vec2 rotatedPosition = vec2(
  114.         a_position.x * u_rotation.y + a_position.y * u_rotation.x,
  115.         a_position.y * u_rotation.y - a_position.x * u_rotation.x);
  116.  
  117.        // Add in the translation.
  118.        vec2 position = rotatedPosition + u_translation;
  119.  
  120.        // convert the position from pixels to 0.0 to 1.0
  121.        vec2 zeroToOne = position / u_resolution;
  122.  
  123.        // convert from 0->1 to 0->2
  124.        vec2 zeroToTwo = zeroToOne * 2.0;
  125.  
  126.        // convert from 0->2 to -1->+1 (clipspace)
  127.        vec2 clipSpace = zeroToTwo - 1.0;
  128.  
  129.        gl_Position = vec4(clipSpace , 0, 1);
  130.     }
  131. </script>
  132. <!-- fragment shader -->
  133. <script id="2d-fragment-shader" type="x-shader/x-fragment">
  134.     precision mediump float;
  135.  
  136.     uniform vec4 u_color;
  137.  
  138.     void main() {
  139.        gl_FragColor = u_color;
  140.     }
  141. </script>
  142. </head>
  143. <body onload = "start();">
  144.  
  145.     <canvas id="canvas" width="900" height="500"></canvas>
  146. </body>
  147. </html>
Runtime error #stdin #stdout #stderr 0.03s 16796KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: expected expression, got '<':
prog.js:1:0 <!DOCTYPE html>
prog.js:1:0 ^
https://ideone.com/Y0G7a9
language:
JavaScript (SMonkey 60.2.3)
created:
2 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!