html5 canva实现粒子波浪滚动特效

原创

已于 2022-05-26 18:54:55 修改

· 1.5k 阅读

4 ·

版权

文章标签：

#html5 #javascript #前端 #css #css3

于 2022-05-07 20:45:22 首次发布

<!doctype html>

粒子波

<style>
    html,
    body {
        height: 100%;
    }
    
    body {
        margin: 0;
        background: #000;
    }
    
    canvas {
        display: block;
    }
    
    .waves {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
</style>

<script>
    class ShaderProgram {

        constructor(holder, options = {}) {

            options = Object.assign({
                antialias: false,
                depthTest: false,
                mousemove: false,
                autosize: true,
                side: 'front',
                vertex: `
    precision highp float;

    attribute vec4 a_position;
    attribute vec4 a_color;

    uniform float u_time;
    uniform vec2 u_resolution;
    uniform vec2 u_mousemove;
    uniform mat4 u_projection;

    varying vec4 v_color;

    void main() {

      gl_Position = u_projection * a_position;
      gl_PointSize = (10.0 / gl_Position.w) * 100.0;

      v_color = a_color;

    }`,
                fragment: `
    precision highp float;

    uniform sampler2D u_texture;
    uniform int u_hasTexture;

    varying vec4 v_color;

    void main() {

      if ( u_hasTexture == 1 ) {

        gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

      } else {

        gl_FragColor = v_color;

      }

    }`,
                uniforms: {},
                buffers: {},
                camera: {},
                texture: null,
                onUpdate: (() => {}),
                onResize: (() => {}),
            }, options)

            const uniforms = Object.assign({
                time: {
                    type: 'float',
                    value: 0
                },
                hasTexture: {
                    type: 'int',
                    value: 0
                },
                resolution: {
                    type: 'vec2',
                    value: [0, 0]
                },
                mousemove: {
                    type: 'vec2',
                    value: [0, 0]
                },
                projection: {
                    type: 'mat4',
                    value: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
                },
            }, options.uniforms)

            const buffers = Object.assign({
                position: {
                    size: 3,
                    data: []
                },
                color: {
                    size: 4,
                    data: []
                },
            }, options.buffers)

            const camera = Object.assign({
                fov: 60,
                near: 1,
                far: 10000,
                aspect: 1,
                z: 100,
                perspective: true,
            }, options.camera)

            const canvas = document.createElement('canvas')
            const gl = canvas.getContext('webgl', {
                antialias: options.antialias
            })

            if (!gl) return false

            this.count = 0
            this.gl = gl
            this.canvas = canvas
            this.camera = camera
            this.holder = holder
            this.onUpdate = options.onUpdate
            this.onResize = options.on

最低0.47元/天解锁文章