API tools faq
paste
Advertisement
lignite0

ROBO24 - Particle system

lignite0
Feb 18th, 2020
200
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>WebGL Particle System</title>
  5.     <script type="text/x-vertex-shader" id="particle-update-vert">
  6. #version 300 es
  7. precision mediump float;
  8.  
  9. uniform float u_TimeDelta;
  10. uniform sampler2D u_RgNoise;
  11. uniform vec2 u_Gravity;
  12. uniform vec2 u_Origin;
  13. uniform float u_MinTheta;
  14. uniform float u_MaxTheta;
  15. uniform float u_MinSpeed;
  16. uniform float u_MaxSpeed;
  17.  
  18. in vec2 i_Position;
  19. in float i_Age;
  20. in float i_Life;
  21. in vec2 i_Velocity;
  22.  
  23. out vec2 v_Position;
  24. out float v_Age;
  25. out float v_Life;
  26. out vec2 v_Velocity;
  27.  
  28. void main() {
  29.   if (i_Age >= i_Life) {
  30.     ivec2 noise_coord = ivec2(gl_VertexID % 512, gl_VertexID / 512);
  31.     vec2 rand = texelFetch(u_RgNoise, noise_coord, 0).rg;
  32.     float theta = u_MinTheta + rand.r*(u_MaxTheta - u_MinTheta);
  33.     float x = cos(theta);
  34.     float y = sin(theta);
  35.     v_Position = u_Origin;
  36.     v_Age = 0.0;
  37.     v_Life = i_Life;
  38.     v_Velocity =
  39.       vec2(x, y) * (u_MinSpeed + rand.g * (u_MaxSpeed - u_MinSpeed));
  40.   } else {
  41.     v_Position = i_Position + i_Velocity * u_TimeDelta;
  42.     v_Age = i_Age + u_TimeDelta;
  43.     v_Life = i_Life;
  44.     v_Velocity = i_Velocity + u_Gravity * u_TimeDelta;
  45.   }
  46.   gl_Position = vec4(v_Position, 0.0, 1.0);
  47.  
  48. }
  49.  
  50.  
  51.     </script>
  52.     <script type="text/x-fragment-shader" id="passthru-frag-shader">
  53. #version 300 es
  54. precision mediump float;
  55.  
  56. out vec4 o_FragColor;
  57.  
  58. void main() {
  59.   o_FragColor = vec4(1.0);
  60. }
  61.  
  62.  
  63.     </script>
  64.     <script type="text/x-vertex-shader" id="particle-render-vert">
  65. #version 300 es
  66. precision mediump float;
  67.  
  68. in vec2 i_Position;
  69.  
  70.  
  71. void main() {
  72.   gl_PointSize = 1.0;
  73.   gl_Position = vec4(i_Position, 0.0, 1.0);
  74. }
  75.  
  76.  
  77.     </script>
  78.     <script type="text/x-fragment-shader" id="particle-render-frag">
  79. #version 300 es
  80. precision mediump float;
  81.  
  82. out vec4 o_FragColor;
  83.  
  84. void main() {
  85.   o_FragColor = vec4(1.0);
  86. }
  87.  
  88.  
  89.     </script>
  90. </head>
  91. <body style="text-align:center"></body>
  92. <script>
  93.     function createShader(gl, shader_info) {
  94.         var shader = gl.createShader(shader_info.type);
  95.         var i = 0;
  96.         var shader_source = document.getElementById(shader_info.name).text;
  97.         /* skip whitespace to avoid glsl compiler complaining about
  98.         #version not being on the first line*/
  99.         while (/\s/.test(shader_source[i])) i++;
  100.         shader_source = shader_source.slice(i);
  101.         gl.shaderSource(shader, shader_source);
  102.         gl.compileShader(shader);
  103.         var compile_status = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  104.         if (!compile_status) {
  105.             var error_message = gl.getShaderInfoLog(shader);
  106.             throw "Could not compile shader \"" +
  107.             shader_info.name +
  108.             "\" \n" +
  109.             error_message;
  110.         }
  111.         return shader;
  112.     }
  113.  
  114.     /* Creates an OpenGL program object.
  115.        `gl' shall be a WebGL 2 context.
  116.        `shader_list' shall be a list of objects, each of which have a `name'
  117.           and `type' properties. `name' will be used to locate the script tag
  118.           from which to load the shader. `type' shall indicate shader type (i. e.
  119.           gl.FRAGMENT_SHADER, gl.VERTEX_SHADER, etc.)
  120.       `transform_feedback_varyings' shall be a list of varying that need to be
  121.         captured into a transform feedback buffer.*/
  122.     function createGLProgram(gl, shader_list, transform_feedback_varyings) {
  123.         var program = gl.createProgram();
  124.         for (var i = 0; i < shader_list.length; i++) {
  125.            var shader_info = shader_list[i];
  126.            var shader = createShader(gl, shader_info);
  127.            gl.attachShader(program, shader);
  128.        }
  129.  
  130.        /* Specify varyings that we want to be captured in the transform
  131.           feedback buffer. */
  132.        if (transform_feedback_varyings != null) {
  133.            gl.transformFeedbackVaryings(program,
  134.                transform_feedback_varyings,
  135.                gl.INTERLEAVED_ATTRIBS);
  136.        }
  137.        gl.linkProgram(program);
  138.        var link_status = gl.getProgramParameter(program, gl.LINK_STATUS);
  139.        if (!link_status) {
  140.            var error_message = gl.getProgramInfoLog(program);
  141.            throw "Could not link program.\n" + error_message;
  142.        }
  143.        return program;
  144.    }
  145.  
  146.    function randomRGData(size_x, size_y) {
  147.        var d = [];
  148.        for (var i = 0; i < size_x * size_y; ++i) {
  149.            d.push(Math.random() * 255.0);
  150.            d.push(Math.random() * 255.0);
  151.        }
  152.        return new Uint8Array(d);
  153.    }
  154.  
  155.    function initialParticleData(num_parts, min_age, max_age) {
  156.        var data = [];
  157.        for (var i = 0; i < num_parts; ++i) {
  158.            data.push(0.0);
  159.            data.push(0.0);
  160.            var life = min_age + Math.random() * (max_age - min_age);
  161.            data.push(life);
  162.            data.push(life);
  163.            data.push(0.0);
  164.            data.push(0.0);
  165.        }
  166.        return data;
  167.    }
  168.  
  169.    function setupParticleBufferVAO(gl, buffers, vao) {
  170.        gl.bindVertexArray(vao);
  171.        for (var i = 0; i < buffers.length; i++) {
  172.            var buffer = buffers[i];
  173.            gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer_object);
  174.            var offset = 0;
  175.            for (var attrib_name in buffer.attribs) {
  176.                if (buffer.attribs.hasOwnProperty(attrib_name)) {
  177.                    var attrib_desc = buffer.attribs[attrib_name];
  178.                    gl.enableVertexAttribArray(attrib_desc.location);
  179.                    gl.vertexAttribPointer(
  180.                        attrib_desc.location,
  181.                        attrib_desc.num_components,
  182.                        attrib_desc.type,
  183.                        false,
  184.                        buffer.stride,
  185.                        offset);
  186.                    var type_size = 4; /* we're only dealing with types of 4 byte size in this demo, unhardcode if necessary */
  187.                    offset += attrib_desc.num_components * type_size;
  188.                    if (attrib_desc.hasOwnProperty("divisor")) {
  189.                        gl.vertexAttribDivisor(attrib_desc.location, attrib_desc.divisor);
  190.                    }
  191.                }
  192.            }
  193.        }
  194.        gl.bindVertexArray(null);
  195.        gl.bindBuffer(gl.ARRAY_BUFFER, null);
  196.    }
  198.    function init(
  199.        gl,
  200.        num_particles,
  201.        particle_birth_rate,
  202.        min_age,
  203.        max_age,
  204.        min_theta,
  205.        max_theta,
  206.        min_speed,
  207.        max_speed,
  208.        gravity) {
  209.        if (max_age < min_age) {
  210.            throw "Invalid min-max age range.";
  211.        }
  212.        if (max_theta < min_theta ||
  213.            min_theta < -Math.PI ||
  214.            max_theta > Math.PI) {
  215.             throw "Invalid theta range.";
  216.         }
  217.         if (min_speed > max_speed) {
  218.             throw "Invalid min-max speed range.";
  219.         }
  220.         var update_program = createGLProgram(
  221.             gl,
  222.             [
  223.                 {name: "particle-update-vert", type: gl.VERTEX_SHADER},
  224.                 {name: "passthru-frag-shader", type: gl.FRAGMENT_SHADER},
  225.             ],
  226.             [
  227.                 "v_Position",
  228.                 "v_Age",
  229.                 "v_Life",
  230.                 "v_Velocity",
  231.             ]);
  232.         var render_program = createGLProgram(
  233.             gl,
  234.             [
  235.                 {name: "particle-render-vert", type: gl.VERTEX_SHADER},
  236.                 {name: "particle-render-frag", type: gl.FRAGMENT_SHADER},
  237.             ],
  238.             null);
  239.         var update_attrib_locations = {
  240.             i_Position: {
  241.                 location: gl.getAttribLocation(update_program, "i_Position"),
  242.                 num_components: 2,
  243.                 type: gl.FLOAT
  244.             },
  245.             i_Age: {
  246.                 location: gl.getAttribLocation(update_program, "i_Age"),
  247.                 num_components: 1,
  248.                 type: gl.FLOAT
  249.             },
  250.             i_Life: {
  251.                 location: gl.getAttribLocation(update_program, "i_Life"),
  252.                 num_components: 1,
  253.                 type: gl.FLOAT
  254.             },
  255.             i_Velocity: {
  256.                 location: gl.getAttribLocation(update_program, "i_Velocity"),
  257.                 num_components: 2,
  258.                 type: gl.FLOAT
  259.             }
  260.         };
  261.         var render_attrib_locations = {
  262.             i_Position: {
  263.                 location: gl.getAttribLocation(render_program, "i_Position"),
  264.                 num_components: 2,
  265.                 type: gl.FLOAT
  266.             }
  267.         };
  268.         var vaos = [
  269.             gl.createVertexArray(),
  270.             gl.createVertexArray(),
  271.             gl.createVertexArray(),
  272.             gl.createVertexArray()
  273.         ];
  274.         var buffers = [
  275.             gl.createBuffer(),
  276.             gl.createBuffer(),
  277.         ];
  278.         var vao_desc = [
  279.             {
  280.                 vao: vaos[0],
  281.                 buffers: [{
  282.                     buffer_object: buffers[0],
  283.                     stride: 4 * 6,
  284.                     attribs: update_attrib_locations
  285.                 }]
  286.             },
  287.             {
  288.                 vao: vaos[1],
  289.                 buffers: [{
  290.                     buffer_object: buffers[1],
  291.                     stride: 4 * 6,
  292.                     attribs: update_attrib_locations
  293.                 }]
  294.             },
  295.             {
  296.                 vao: vaos[2],
  297.                 buffers: [{
  298.                     buffer_object: buffers[0],
  299.                     stride: 4 * 6,
  300.                     attribs: render_attrib_locations
  301.                 }],
  302.             },
  303.             {
  304.                 vao: vaos[3],
  305.                 buffers: [{
  306.                     buffer_object: buffers[1],
  307.                     stride: 4 * 6,
  308.                     attribs: render_attrib_locations
  309.                 }],
  310.             },
  311.         ];
  312.         var initial_data =
  313.             new Float32Array(initialParticleData(num_particles, min_age, max_age));
  314.         gl.bindBuffer(gl.ARRAY_BUFFER, buffers[0]);
  315.         gl.bufferData(gl.ARRAY_BUFFER, initial_data, gl.STREAM_DRAW);
  316.         gl.bindBuffer(gl.ARRAY_BUFFER, buffers[1]);
  317.         gl.bufferData(gl.ARRAY_BUFFER, initial_data, gl.STREAM_DRAW);
  318.         for (var i = 0; i < vao_desc.length; i++) {
  319.            setupParticleBufferVAO(gl, vao_desc[i].buffers, vao_desc[i].vao);
  320.        }
  321.  
  322.        gl.clearColor(0.0, 0.0, 0.0, 1.0);
  323.        var rg_noise_texture = gl.createTexture();
  324.        gl.bindTexture(gl.TEXTURE_2D, rg_noise_texture);
  325.        gl.texImage2D(gl.TEXTURE_2D,
  326.            0,
  327.            gl.RG8,
  328.            512, 512,
  329.            0,
  330.            gl.RG,
  331.            gl.UNSIGNED_BYTE,
  332.            randomRGData(512, 512));
  333.        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
  334.        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
  335.        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  336.        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  337.        gl.enable(gl.BLEND);
  338.        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  339.        return {
  340.            particle_sys_buffers: buffers,
  341.            particle_sys_vaos: vaos,
  342.            read: 0,
  343.            write: 1,
  344.            particle_update_program: update_program,
  345.            particle_render_program: render_program,
  346.            num_particles: initial_data.length / 6,
  347.            old_timestamp: 0.0,
  348.            rg_noise: rg_noise_texture,
  349.            total_time: 0.0,
  350.            born_particles: 0,
  351.            birth_rate: particle_birth_rate,
  352.            gravity: gravity,
  353.            origin: [0.0, 0.0],
  354.            min_theta: min_theta,
  355.            max_theta: max_theta,
  356.            min_speed: min_speed,
  357.            max_speed: max_speed
  358.        };
  359.    }
  360.  
  361.    function render(gl, state, timestamp_millis) {
  362.        var num_part = state.born_particles;
  363.        var time_delta = 0.0;
  364.        if (state.old_timestamp != 0) {
  365.            time_delta = timestamp_millis - state.old_timestamp;
  366.            if (time_delta > 500.0) {
  367.                 time_delta = 0.0;
  368.             }
  369.         }
  370.         if (state.born_particles < state.num_particles) {
  371.            state.born_particles = Math.min(state.num_particles,
  372.                Math.floor(state.born_particles + state.birth_rate * time_delta));
  373.        }
  374.        state.old_timestamp = timestamp_millis;
  375.        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  376.        gl.useProgram(state.particle_update_program);
  377.        gl.uniform1f(
  378.            gl.getUniformLocation(state.particle_update_program, "u_TimeDelta"),
  379.            time_delta / 1000.0);
  380.        gl.uniform1f(
  381.            gl.getUniformLocation(state.particle_update_program, "u_TotalTime"),
  382.            state.total_time);
  383.        gl.uniform2f(
  384.            gl.getUniformLocation(state.particle_update_program, "u_Gravity"),
  385.            state.gravity[0], state.gravity[1]);
  386.        gl.uniform2f(
  387.            gl.getUniformLocation(state.particle_update_program, "u_Origin"),
  388.            state.origin[0],
  389.            state.origin[1]);
  390.        gl.uniform1f(
  391.            gl.getUniformLocation(state.particle_update_program, "u_MinTheta"),
  392.            state.min_theta);
  393.        gl.uniform1f(
  394.            gl.getUniformLocation(state.particle_update_program, "u_MaxTheta"),
  395.            state.max_theta);
  396.        gl.uniform1f(
  397.            gl.getUniformLocation(state.particle_update_program, "u_MinSpeed"),
  398.            state.min_speed);
  399.        gl.uniform1f(
  400.            gl.getUniformLocation(state.particle_update_program, "u_MaxSpeed"),
  401.            state.max_speed);
  402.        state.total_time += time_delta;
  403.  
  404.        gl.activeTexture(gl.TEXTURE0);
  405.        gl.bindTexture(gl.TEXTURE_2D, state.rg_noise);
  406.        gl.uniform1i(
  407.            gl.getUniformLocation(state.particle_update_program, "u_RgNoise"),
  408.            0);
  409.        gl.bindVertexArray(state.particle_sys_vaos[state.read]);
  410.        gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, state.particle_sys_buffers[state.write]);
  411.  
  412.        //gl.enable(gl.RASTERIZER_DISCARD);
  413.        gl.beginTransformFeedback(gl.POINTS);
  414.        gl.drawArrays(gl.POINTS, 0, num_part);
  415.        gl.endTransformFeedback();
  416.        //gl.disable(gl.RASTERIZER_DISCARD);
  417.  
  418.        gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
  419.        //gl.bindVertexArray(state.particle_sys_vaos[state.read + 2]);
  420.        //gl.useProgram(state.particle_render_program);
  421.        //gl.drawArrays(gl.POINTS, 0, num_part);
  422.  
  423.        var tmp = state.read;
  424.        state.read = state.write;
  425.        state.write = tmp;
  426.        window.requestAnimationFrame(function (ts) {
  427.            render(gl, state, ts);
  428.        });
  429.    }
  430.  
  431.    function main() {
  432.        var canvas_element = document.createElement("canvas");
  433.        canvas_element.width = 800;
  434.        canvas_element.height = 600;
  435.        var webgl_context = canvas_element.getContext("webgl2");
  436.        if (webgl_context != null) {
  437.            document.body.appendChild(canvas_element);
  438.            var state =
  439.                init(
  440.                    webgl_context,
  441.                    100000,
  442.                    0.5,
  443.                    1.01,
  444.                    5.15,
  445.                    Math.PI / 2.0 - 0.5, Math.PI / 2.0 + 0.5,
  446.                    0.5, 1.0,
  447.                    [0.0, -0.8]);
  448.            canvas_element.onmousemove = function (e) {
  449.                var x = 2.0 * (e.pageX - this.offsetLeft) / this.width - 1.0;
  450.                var y = -(2.0 * (e.pageY - this.offsetTop) / this.height - 1.0);
  451.                state.origin = [x, y];
  452.            };
  453.            window.requestAnimationFrame(
  454.                function (ts) {
  455.                    render(webgl_context, state, ts);
  456.                });
  457.        } else {
  458.            document.write("WebGL2 is not supported by your browser");
  459.        }
  460.    }
  461.    main();
  462. </script>
  463. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!