WebGL炫丽的轨迹旋转动画

webgl canvas orbital trails

webgl, trail

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4065
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var gl = c.getContext('webgl', {
        preserveDrawingBuffer: true
    }),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    webgl = {};

webgl.vertexShaderSource = `
attribute vec2 a_position;
attribute vec2 a_color;
uniform float u_tick;
uniform vec2 u_resolution;
varying vec2 v_color;

void main(){
	
	gl_Position = vec4( vec2( 1, -1 ) * ( a_position / u_resolution ) * 2., 0, 1 );

v_color = a_color;
	if( a_color.x > 0. )
		v_color = vec2( a_color.x + u_tick / 100., a_color.y );
}
`;
webgl.fragmentShaderSource = `
precision mediump float;
varying vec2 v_color;

vec3 h2rgb( float h ){
	return clamp( abs( mod( h * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. );
}
void main(){
	vec4 color = vec4( 0, 0, 0, v_color.y );
	if( v_color.x > 0. )
		color.rgb = h2rgb( v_color.x / 6.2831853071 );

gl_FragColor = color;
}
`;

webgl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(webgl.vertexShader, webgl.vertexShaderSource);
gl.compileShader(webgl.vertexShader);

webgl.fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(webgl.fragmentShader, webgl.fragmentShaderSource);
gl.compileShader(webgl.fragmentShader);

webgl.shaderProgram = gl.createProgram();
gl.attachShader(webgl.shaderProgram, webgl.vertexShader);
gl.attachShader(webgl.shaderProgram, webgl.fragmentShader);
gl.linkProgram(webgl.shaderProgram);
gl.useProgram(webgl.shaderProgram);

webgl.attribLocs = {
    position: gl.getAttribLocation(webgl.shaderProgram, 'a_position'),
    color: gl.getAttribLocation(webgl.shaderProgram, 'a_color')
};
webgl.buffers = {
    position: gl.createBuffer(),
    color: gl.createBuffer()
};
webgl.uniformLocs = {
    tick: gl.getUniformLocation(webgl.shaderProgram, 'u_tick'),
    resolution: gl.getUniformLocation(webgl.shaderProgram, 'u_resolution')
};

gl.enableVertexAttribArray(webgl.attribLocs.position);
gl.enableVertexAttribArray(webgl.attribLocs.color);

gl.bindBuffer(gl.ARRAY_BUFFER, webgl.buffers.position);
gl.vertexAttribPointer(webgl.attribLocs.position, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, webgl.buffers.color);
gl.vertexAttribPointer(webgl.attribLocs.color, 2, gl.FLOAT, false, 0, 0);

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

gl.viewport(0, 0, w, h);
gl.uniform2f(webgl.uniformLocs.resolution, w, h);

webgl.data = {
    position: [],
    color: []
};

webgl.draw = function(glType, glAmount) {

gl.bindBuffer(gl.ARRAY_BUFFER, webgl.buffers.position);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(webgl.data.position), gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, webgl.buffers.color);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(webgl.data.color), gl.STATIC_DRAW);

gl.drawArrays(glType, 0, glAmount);
}

webgl.clear = function(z) {
    var a = w / 2,
        A = -a,
        b = h / 2,
        B = -b;

webgl.data.position = [
        A, B,
        a, B,
        A, b,
        A, b,
        a, b,
        a, B
    ];
    webgl.data.color = [-1, z, -1, z, -1, z, -1, z, -1, z, -1, z, ];

webgl.draw(gl.TRIANGLES, 6);
    webgl.data.color.length = webgl.data.position.length = 0;
};

var particles = [],
    tick = 0,
    opts = {
        baseW: .01,
        addedW: .03
    }

function Particle(radius, radian) {
    this.radius = radius;
    this.radian = radian + 6.2831853071;
    this.x = this.radius * Math.cos(this.radian);
    this.y = this.radius * Math.sin(this.radian);
    this.w = opts.baseW + opts.addedW * Math.random();
    this.wcos = Math.cos(this.w);
    this.wsin = Math.sin(this.w);
}
Particle.prototype.step = function() {

if (Math.random() < .1) {
        this.w += (Math.random() - .5) / 100000;
        this.wcos = Math.cos(this.w);
        this.wsin = Math.sin(this.w);
    }

var px = this.x,
        py = this.y,
        pr = this.radian;

this.x = this.x * this.wcos - this.y * this.wsin;
    this.y = px * this.wsin + this.y * this.wcos;

this.radian += this.w;

webgl.data.position.push(
        px, py,
        this.x, this.y,
        0, 0,
        this.x, this.y
    );
    webgl.data.color.push(
        pr, 1,
        this.radian, 1,
        this.radian, .01,
        this.radian, .04
    );
}

function anim() {

window.requestAnimationFrame(anim);

webgl.clear(.1);

if (particles.length < 1000) {
        for (var i = 0; i < 3; ++i) {
            particles.push(new Particle(Math.random() * Math.min(w, h), Math.random() * 6.283185307179586476925286766559));
        }
    }

particles.map(function(particle) {
        particle.step()
    });

++tick;
    gl.uniform1f(webgl.uniformLocs.tick, tick);

webgl.draw(gl.LINES, webgl.data.position.length / 2);
    webgl.data.position.length = 0;
    webgl.data.color.length = 0;

}
anim();

window.addEventListener('resize', function() {
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    gl.viewport(0, 0, w, h);
    gl.uniform2f(webgl.uniformLocs.resolution, w, h);
});

function spawnParticle(e) {
    var dx = e.clientX - w / 2,
        dy = e.clientY - h / 2;

particles.push(new Particle(Math.sqrt(dx * dx + dy * dy), Math.atan(dy / dx) - (dx < 0 ? Math.PI : 0)));
}
var md = false;
window.addEventListener('mousedown', function(e) {
    md = true;
    spawnParticle(e);
});
window.addEventListener('mousemove', function(e) {
    if (md) spawnParticle(e);
});
window.addEventListener('mouseup', function() {
    md = false;
});

window.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    particles.length = 0;
})

编译

CSS

HTML

webgl canvas orbital trails

webgl, trail

编辑器支持Emmet

快捷键

webgl canvas orbital trails

webgl, trail

WebGL 超炫的迪厅霓虹灯动画特效

WebGL 超炫的蓝色泼漆动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：