webgl实现canvas粒子球旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：webgl实现canvas粒子球旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>



</head>

<body translate="no">
  <script id="vs" type="x-shader/x-vertex">
attribute vec3  position;
attribute vec4  color;
uniform   mat4  mvpMatrix;
uniform   float pointSize;
varying   vec4  vColor;

void main(void){
    vColor       = color;
    gl_Position  = mvpMatrix * vec4(position, 1.0);
    gl_PointSize = pointSize;
}
</script>
		
<script id="fs" type="x-shader/x-fragment">
precision mediump float;

varying vec4 vColor;

void main(void){
    gl_FragColor = vColor;
}
</script>

  
      <script type="module">


export class Mat4 {

    static create(){
        return new Float32Array(16);
    }

    static identity(source){
        let out = source;
        if(out == null){out = Mat4.create();}
        out[0]  = 1; out[1]  = 0; out[2]  = 0; out[3]  = 0;
        out[4]  = 0; out[5]  = 1; out[6]  = 0; out[7]  = 0;
        out[8]  = 0; out[9]  = 0; out[10] = 1; out[11] = 0;
        out[12] = 0; out[13] = 0; out[14] = 0; out[15] = 1;
        return out;
    }

    static copy(target, source){
        let out = source;
        if(target == null){
            throw new Error('Mat4.copy: invalid argument');
        }
        if(out == null){out = Mat4.create();}
        out[0]  = target[0];  out[1]  = target[1];  out[2]  = target[2];  out[3]  = target[3];
        out[4]  = target[4];  out[5]  = target[5];  out[6]  = target[6];  out[7]  = target[7];
        out[8]  = target[8];  out[9]  = target[9];  out[10] = target[10]; out[11] = target[11];
        out[12] = target[12]; out[13] = target[13]; out[14] = target[14]; out[15] = target[15];
        return out;
    }

    static multiply(mat0, mat1, source){
        let out = source;
        if(out == null){out = Mat4.create();}
        let a = mat0[0],  b = mat0[1],  c = mat0[2],  d = mat0[3],
            e = mat0[4],  f = mat0[5],  g = mat0[6],  h = mat0[7],
            i = mat0[8],  j = mat0[9],  k = mat0[10], l = mat0[11],
            m = mat0[12], n = mat0[13], o = mat0[14], p = mat0[15],
            A = mat1[0],  B = mat1[1],  C = mat1[2],  D = mat1[3],
            E = mat1[4],  F = mat1[5],  G = mat1[6],  H = mat1[7],
            I = mat1[8],  J = mat1[9],  K = mat1[10], L = mat1[11],
            M = mat1[12], N = mat1[13], O = mat1[14], P = mat1[15];
        out[0]  = A * a + B * e + C * i + D * m;
        out[1]  = A * b + B * f + C * j + D * n;
        out[2]  = A * c + B * g + C * k + D * o;
        out[3]  = A * d + B * h + C * l + D * p;
        out[4]  = E * a + F * e + G * i + H * m;
        out[5]  = E * b + F * f + G * j + H * n;
        out[6]  = E * c + F * g + G * k + H * o;
        out[7]  = E * d + F * h + G * l + H * p;
        out[8]  = I * a + J * e + K * i + L * m;
        out[9]  = I * b + J * f + K * j + L * n;
        out[10] = I * c + J * g + K * k + L * o;
        out[11] = I * d + J * h + K * l + L * p;
        out[12] = M * a + N * e + O * i + P * m;
        out[13] = M * b + N * f + O * j + P * n;
        out[14] = M * c + N * g + O * k + P * o;
        out[15] = M * d + N * h + O * l + P * p;
        return out;
    }

    static scale(mat, vec, source){
        let out = source;
        if(out == null){out = Mat4.create();}
        out[0]  = mat[0]  * vec[0];
        out[1]  = mat[1]  * vec[0];
        out[2]  = mat[2]  * vec[0];
        out[3]  = mat[3]  * vec[0];
        out[4]  = mat[4]  * vec[1];
        out[5]  = mat[5]  * vec[1];
        out[6]  = mat[6]  * vec[1];
        out[7]  = mat[7]  * vec[1];
        out[8]  = mat[8]  * vec[2];
        out[9]  = mat[9]  * vec[2];
        out[10] = mat[10] * vec[2];
        out[11] = mat[11] * vec[2];
        out[12] = mat[12];
        out[13] = mat[13];
        out[14] = mat[14];
        out[15] = mat[15];
        return out;
    }

    static translate(mat, vec, source){
        let out = source;
        if(out == null){out = Mat4.create();}
        out[0] = mat[0]; out[1] = mat[1]; out[2]  = mat[2];  out[3]  = mat[3];
        out[4] = mat[4]; out[5] = mat[5]; out[6]  = mat[6];  out[7]  = mat[7];
        out[8] = mat[8]; out[9] = mat[9]; out[10] = mat[10]; out[11] = mat[11];
        out[12] = mat[0] * vec[0] + mat[4] * vec[1] + mat[8]  * vec[2] + mat[12];
        out[13] = mat[1] * vec[0] + mat[5] * vec[1] + mat[9]  * vec[2] + mat[13];
        out[14] = mat[2] * vec[0] + mat[6] * vec[1] + mat[10] * vec[2] + mat[14];
        out[15] = mat[3] * vec[0] + mat[7] * vec[1] + mat[11] * vec[2] + mat[15];
        return out;
    }

    static rotate(mat, angle, axis, source){
        let out = source;
        if(out == null){out = Mat4.create();}
        let sq = Math.sqrt(axis[0] * axis[0] + axis[1] * axis[1] + axis[2] * axis[2]);
        if(!sq){return null;}.........完整代码请登录后点击上方下载按钮下载查看