SaveText.Ru

SaveText.Ru

[email protected]# webgl
  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.   precision mediump float;
  15.   in float inValue;
  16.   out float outValue;
  17.  
  18.   void main(){
  19.     if (inValue>1){
  20.       outValue = 0.0;
  21.     } else {
  22.       outValue = inValue + 0.02;
  23.     }
  24.   }
  25. </script>
  26.  
  27. <script id="vs-draw" type="x-shader/x-vertex">
  28.   precision mediump float;
  29.   in float inValue;
  30.  
  31.   void main(){
  32.     gl_Position = vec4(inValue, 0.5, 0.0, 1.0);
  33.   }
  34. </script>
  35.  
  36. <script id="fs-update" type="x-shader/x-fragment">
  37.   precision mediump float;
  38.  
  39.   out vec4 o_FragColor;
  40.  
  41.   void main() {
  42.     o_FragColor = vec4(0.0);
  43.   }
  44. </script>
  45.  
  46.  
  47. <script id="fs-draw" type="x-shader/x-fragment">
  48.   precision mediump float;
  49.  
  50.   out vec4 o_FragColor;
  51.  
  52.   void main() {
  53.     o_FragColor = vec4(0.0);
  54.   }
  55. </script>
  56.  
  57. <script>
  58.     let programUpdate, programDraw, readBuffer, writeBuffer;
  59.     let gl = document.getElementById('canvas').getContext('webgl2')
  60.  
  61.     init();
  62.     render();
  63.  
  64.     function getShaderSource(id) {
  65.         return document.getElementById(id).innerHTML
  66.     }
  67.  
  68.     function init() {
  69.         /* Step3: Create and compile Shader programs */
  70.         programUpdate = makeProgram(getShaderSource('vs-update'), getShaderSource('fs-update'), ['outValue']);
  71.         programDraw = makeProgram(getShaderSource('vs-draw'), getShaderSource('fs-draw'));
  72.  
  73.         let vertices = [0.0, 0.0, 0.0,];
  74.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  75.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  76.         gl.bindBuffer(gl.ARRAY_BUFFER, writeBuffer);
  77.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  78.         gl.bindBuffer(gl.ARRAY_BUFFER, null);
  79.  
  80.         /* Step 4: Associate the shader programs to buffer objects */
  81.         gl.useProgram(programUpdate);
  82.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  83.         let attribLocation = gl.getAttribLocation(programUpdate, "inValue");
  84.         gl.vertexAttribPointer(attribLocation, 1, gl.FLOAT, false, 0, 0);
  85.         gl.enableVertexAttribArray(attribLocation);
  86.  
  87.         gl.useProgram(programDraw);
  88.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  89.         attribLocation = gl.getAttribLocation(programDraw, "inValue");
  90.         gl.vertexAttribPointer(attribLocation, 1, gl.FLOAT, false, 0, 0);
  91.         gl.enableVertexAttribArray(attribLocation);
  92.  
  93.         /* Step5: Drawing the required object (triangle) */
  94.         gl.enable(gl.DEPTH_TEST);
  95.         gl.viewport(0,0,canvas.width,canvas.height);
  96.     }
  97.  
  98.     function makeProgram(vShaderCode, fShaderCode, transformFeedbackVaryings) {
  99.         let vertShader = gl.createShader(gl.VERTEX_SHADER);
  100.         gl.shaderSource(vertShader, vShaderCode);
  101.         gl.compileShader(vertShader);
  102.  
  103.         let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  104.         gl.shaderSource(fragShader, fShaderCode);
  105.         gl.compileShader(fragShader);
  106.  
  107.         let shaderProgram = gl.createProgram();
  108.         gl.attachShader(shaderProgram, vertShader);
  109.         gl.attachShader(shaderProgram, fragShader);
  110.  
  111.         if (transformFeedbackVaryings) {
  112.             gl.transformFeedbackVaryings(shaderProgram, transformFeedbackVaryings, gl.INTERLEAVED_ATTRIBS);
  113.         }
  114.  
  115.         gl.linkProgram(shaderProgram);
  116.  
  117.         return shaderProgram;
  118.     }
  119.  
  120.     function updateAndWrite() {
  121.         gl.useProgram(programUpdate);
  122.         gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, writeBuffer);
  123.         gl.enable(gl.RASTERIZER_DISCARD);
  124.         gl.beginTransformFeedback(gl.TRIANGLES);
  125.         gl.drawArrays(gl.TRIANGLES, 0, 3);
  126.         gl.endTransformFeedback();
  127.         gl.disable(gl.RASTERIZER_DISCARD);
  128.         gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
  129.     }
  130.  
  131.     function readAndDraw() {
  132.         gl.useProgram(programDraw);
  133.         gl.drawArrays(gl.TRIANGLES, 0, 3);
  134.     }
  135.  
  136.     function render() {
  137.         gl.clearColor(0.5, 0.5, 0.5, 0.9);
  138.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  139.  
  140.         gl.bindBuffer(gl.ARRAY_BUFFER, readBuffer);
  141.         updateAndWrite();
  142.         readAndDraw();
  143.  
  144.         let tmp = readBuffer;
  145.         readBuffer = writeBuffer;
  146.         writeBuffer = tmp;
  147.  
  148.         window.requestAnimationFrame(render);
  149.     }
  150. </script>
  151. </body>
  152. </html>
  153.  

Share with your friends:

Print