webgl实现canvas粒子球旋转动画效果代码
代码语言: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;} let a = axis[0], b = axis[1], c = axis[2]; if(sq != 1){sq = 1 / sq; a *= sq; b *= sq; c *= sq;} let d = Math.sin(angle), e = Math.cos(angle), f = 1 - e, g = mat[0], h = mat[1], i = mat[2], j = mat[3], k = mat[4], l = mat[5], m = mat[6], n = mat[7], o = mat[8], p = mat[9], q = mat[10], r = mat[11], s = a * a * f + e, t = b * a * f + c * d, u = c * a * f - b * d, v = a * b * f - c * d, w = b * b * f + e, x = c * b * f + a * d, y = a * c * f + b * d, z = b * c * f - a * d, A = c * c * f + e; if(angle){ if(mat != out){ out[12] = mat[12]; out[13] = mat[13]; out[14] = mat[14]; out[15] = mat[15]; } }else{ out = mat; } out[0] = g * s + k * t + o * u; out[1] = h * s + l * t + p * u; out[2] = i * s + m * t + q * u; out[3] = j * s + n * t + r * u; out[4] = g * v + k * w + o * x; out[5] = h * v + l * w + p * x; out[6] = i * v + m * w + q * x; out[7] = j * v + n * w + r * x; out[8] = g * y + k * z + o * A; out[9] = h * y + l * z + p * A; out[10] = i * y + m * z + q * A; out[11] = j * y + n * z + r * A; return out; } static lookAt(eye, center, up, source){ let eyeX = eye[0], eyeY = eye[1], eyeZ = eye[2], centerX = center[0], centerY = center[1], centerZ = center[2], upX = up[0], upY = up[1], upZ = up[2]; if(eyeX == centerX && eyeY == centerY && eyeZ == centerZ){return Mat4.identity(source);} let out = source; if(out == null){out = Mat4.create();} let x0, x1, x2, y0, y1, y2, z0, z1, z2, l; z0 = eyeX - center[0]; z1 = eyeY - center[1]; z2 = eyeZ - center[2]; l = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2); z0 *= l; z1 *= l; z2 *= l; x0 = upY * z2 - upZ * z1; x1 = upZ * z0 - upX * z2; x2 = upX * z1 - upY * z0; l = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2); if(!l){ x0 = 0; x1 = 0; x2 = 0; }else{ l = 1 / l; x0 *= l; x1 *= l; x2 *= l; } y0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0; l = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2); if(!l){ y0 = 0; y1 = 0; y2 = 0; }else{ l = 1 / l; y0 *= l; y1 *= l; y2 *= l; } out[0] = x0; out[1] = y0; out[2] = z0; out[3] = 0; out[4] = x1; out[5] = y1; out[6] = z1; out[7] = 0; out[8] = x2; out[9] = y2; out[10] = z2; out[11] = 0; out[12] = -(x0 * eyeX + x1 * eyeY + x2 * eyeZ); out[13] = -(y0 * eyeX + y1 * eyeY + y2 * eyeZ); out[14] = -(z0 * eyeX + z1 * eyeY + z2 * eyeZ); out[15] = 1; return out; } static perspective(fovy, aspect, near, far, source){ let out = source; if(out == null){out = Mat4.create();} let t = near * Math.tan(fovy * Math.PI / 360); let r = t * aspect; let a = r * 2, b = t * 2, c = far - near; out[0] = near * 2 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0