html5钻石,html5 canvas发光的钻石背景动画特效

特效描述：html5canvas 发光的钻石 背景动画特效。html5 canvas three.js绘制闪烁的钻石背景动画，跟随鼠标移动改变形状效果。

代码结构

1. 引入JS

2. HTML代码

void main() {

gl_Position = vec4( position, 1.0 );

}

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

uniform vec3 u_colours[ 5 ];

const float multiplier = .5;

const int octaves = 4;

const float seed = 86135.7315468;

float random2d(vec2 uv) {

return fract(

sin(

dot( uv.xy, vec2(12.9898, 78.233) )

) * seed);

}

mat2 rotate2d(float _angle){

return mat2(cos(_angle),sin(_angle),

-sin(_angle),cos(_angle));

}

// Created by inigo quilez - iq/2013

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// http://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm

vec2 random2( vec2 p ) {

return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);

}

vec3 voronoi( in vec2 x, inout vec2 nearest_point, inout vec2 s_nearest_point, inout float s_nearest_distance, inout float nearest_distance, in bool highlight, vec2 mouse) {

vec2 n = floor(x);

vec2 f = fract(x);

// first pass: regular voronoi

vec2 mg, mr;

float md = 8.0;

float smd = 8.0;

for (int j= -1; j <= 1; j++) {

for (int i= -1; i <= 1; i++) {

vec2 g = vec2(float(i),float(j));

vec2 o = random2( n + g );

o = 0.5 + 0.4*sin((u_time / 10.) + 6.2831*o);

o *= length(mouse.y) * 2.;

vec2 r = g + o - f;

float d = dot(r,r);

if( d

smd = md;