SaveText.Ru

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  10. <body>
  11. <canvas id="canvas" width="400" height="400"></canvas>
  12.  
  13. <script id="vs-update" type="x-shader/x-vertex">
  14.   #version 300 es
  15.   precision mediump float;
  16.   in vec2 inValue;
  17.   out vec2 outValue;
  18.  
  19.   void main(){
  20.     if (inValue.x > 1.0){
  21.       outValue = vec2(0.0, inValue.y);
  22.     } else {
  23.       outValue = vec2(inValue.x + 0.02, inValue.y);
  24.     }
  25.   }
  26. </script>
  27.  
  28. <script id="vs-draw" type="x-shader/x-vertex">
  29.   #version 300 es
  30.   precision mediump float;
  31.   in vec2 inValue;
  32.  
  33.   void main(){
  34.     gl_Position = vec4(inValue, 0.0, 1.0);
  35.   }
  36. </script>
  37.  
  38. <script id="fs-update" type="x-shader/x-fragment">
  39.   #version 300 es
  40.   precision mediump float;
  41.  
  42.   out vec4 o_FragColor;
  43.  
  44.   void main() {
  45.     o_FragColor = vec4(0.0, 0.0, 0.0, 0.9);
  46.   }
  47. </script>
  48.  
  49.  
  50. <script id="fs-draw" type="x-shader/x-fragment">
  51.   #version 300 es
  52.   precision mediump float;
  53.  
  54.   out vec4 o_FragColor;
  55.  
  56.   void main() {
  57.     o_FragColor = vec4(0.0, 0.0, 0.0, 0.9);
  58.   }
  59. </script>
  60.  
  61. <script>
  62.     let programUpdate, programDraw, readBuffer, writeBuffer;
  63.     let gl = document.getElementById('canvas').getContext('webgl2')
  64.  
  65.     init();
  66.     render();
  67.  
  68.     function getShaderSource(id) {
  69.         return document.getElementById(id).innerHTML.trim()
  70.     }
  71.  
  72.     function init() {
  73.         /* Step3: Create and compile Shader programs */
  74.         // programUpdate = makeProgram(getShaderSource('vs-update'), getShaderSource('fs-update'), ['outValue']);
  75.         programDraw = makeProgram(getShaderSource('vs-draw'), getShaderSource('fs-draw'));
  76.  
  77.         let vertices = [0.3, 0.5, 0.5, 0.5, 0.7, 0.5,];
  78.         readBuffer = gl.createBuffer();
  79.         writeBuffer = gl.createBuffer();
  80.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  81.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  82.         gl.bindBuffer(gl.ARRAY_BUFFER, writeBuffer);
  83.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  84.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  85.  
  86.         /* Step 4: Associate the shader programs to buffer objects */
  87.         // gl.useProgram(programUpdate);
  88.         // gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  89.         // let attribLocation = gl.getAttribLocation(programUpdate, "inValue");
  90.         // gl.vertexAttribPointer(attribLocation, 1, gl.FLOAT, false, 0, 0);
  91.         // gl.enableVertexAttribArray(attribLocation);
  92.  
  93.         gl.useProgram(programDraw);
  94.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  95.         let attribLocation = gl.getAttribLocation(programDraw, "inValue");
  96.         gl.vertexAttribPointer(attribLocation, 1, gl.FLOAT, false, 0, 0);
  97.         gl.enableVertexAttribArray(attribLocation);
  98.  
  99.         /* Step5: Drawing the required object (triangle) */
  100.         gl.enable(gl.DEPTH_TEST);
  101.         gl.viewport(0,0,canvas.width,canvas.height);
  102.     }
  103.  
  104.     function makeProgram(vShaderCode, fShaderCode, transformFeedbackVaryings) {
  105.         let vertShader = gl.createShader(gl.VERTEX_SHADER);
  106.         gl.shaderSource(vertShader, vShaderCode);
  107.         gl.compileShader(vertShader);
  108.  
  109.         let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  110.         gl.shaderSource(fragShader, fShaderCode);
  111.         gl.compileShader(fragShader);
  112.  
  113.         let shaderProgram = gl.createProgram();
  114.         gl.attachShader(shaderProgram, vertShader);
  115.         gl.attachShader(shaderProgram, fragShader);
  116.  
  117.         if (transformFeedbackVaryings) {
  118.             let transformFeedback = gl.createTransformFeedback();
  119.             gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
  120.             gl.transformFeedbackVaryings(shaderProgram, transformFeedbackVaryings, gl.INTERLEAVED_ATTRIBS);
  121.         }
  122.  
  123.         if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
  124.             throw gl.getShaderInfoLog(vertShader)
  125.         }
  126.         if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
  127.             throw gl.getShaderInfoLog(fragShader)
  128.         }
  129.  
  130.         gl.linkProgram(shaderProgram);
  131.  
  132.         if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  133.             throw gl.getProgramInfoLog(shaderProgram);
  134.         }
  135.  
  136.         return shaderProgram;
  137.     }
  138.  
  139.     function updateAndWrite() {
  140.         gl.useProgram(programUpdate);
  141.         gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, writeBuffer);
  142.         gl.enable(gl.RASTERIZER_DISCARD);
  143.         gl.beginTransformFeedback(gl.TRIANGLES);
  144.         gl.drawArrays(gl.TRIANGLES, 0, 6);
  145.         gl.endTransformFeedback();
  146.         gl.disable(gl.RASTERIZER_DISCARD);
  147.         gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
  148.     }
  149.  
  150.     function readAndDraw() {
  151.         gl.useProgram(programDraw);
  152.         gl.drawArrays(gl.TRIANGLES, 0, 6);
  153.     }
  154.  
  155.     function render() {
  156.         gl.clearColor(0.5, 0.5, 0.5, 0.6);
  157.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  158.  
  159.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  160.         // updateAndWrite();
  161.         readAndDraw();
  162.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  163.  
  164.         // let tmp = readBuffer;
  165.         // readBuffer = writeBuffer;
  166.         // writeBuffer = tmp;
  167.  
  168.         window.requestAnimationFrame(render);
  169.     }
  170. </script>
  171. </body>
  172. </html>
  173.  

Share with your friends:

Print