<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Coalesce 12 - Phosphorescence 6</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/three.min.js"></script>
<script id="vertexShaderParticle" type="x-shader/x-vertex">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
attribute vec2 reference;
uniform sampler2D texturePosition;
uniform bool u_clicked;
varying float v_op;
float random(vec2 st) {
return fract(sin(dot(st,
vec2(12.9898,78.233)))*
43758.5453123);
}
void main() {
vec3 position = texture2D(texturePosition, reference).xyz;
position *= 3.;
// position -= 10.;
vec3 transformed = vec3( position );
vec4 mvpos = modelViewMatrix * vec4( transformed, 1.0 );
// gl_PointSize = 30.0 * (1.0 / (mvpos.z * mvpos.z));
// gl_PointSize = 1.;
// gl_PointSize = clamp(2. - length(transformed) * .01, 0., 2.);
gl_PointSize = random(reference) * 50. * (1. / length(mvpos.xyz) * 5.51);
v_op = 1. / length(position) * 8.;
// gl_PointSize = 2.;
gl_Position = projectionMatrix * mvpos;
}
</script>
<script id="fragmentShaderParticle" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
uniform bool u_clicked;
varying float v_op;
vec2 hash2(vec2 p)
{
vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
return o;
}
void main() {
// vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.x, u_resolution.y);
vec2 uv = gl_PointCoord.xy - .5;
vec3 particlecolour = vec3(.5, .53, .53) * 1.8;
vec3 outercolour = vec3(1.);
if(u_clicked) {
particlecolour = vec3(.05, .15, .2) * .5;
outercolour = vec3(0.);
}
float l = length(uv);
vec3 colour = mix(outercolour, particlecolour, smoothstep(.5, -.1, l));
colour = mix(vec3(2., 0.5, 0.), colour, smoothstep(3., 0.5, v_op));
gl_FragColor = vec4(colour, 1. - l * 2.);
}
</script>
<script id="fragmentShaderVelocity" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_mousex;
varying float v_op;
// otaviogood's noise from https://www.shadertoy.com/view/ld2SzK
const float nudge = 0.739513; // size of perpendicular vector
float normalizer = 1.0 / sqrt(1.0 + nudge*nudge); // pythagorean theorem on that perpendicular to maintain scale
float SpiralNoiseC(vec3 p)
{
float n = 0.0; // noise amount
float iter = 1.0;
for (int i = 0; i < 8; i++)
{
// add sin and cos scaled inverse with the frequency
n += -abs(sin(p.y*iter) + cos(p.x*iter)) / iter; // abs for a ridged look
// rotate by adding perpendicular and scaling down
p.xy += vec2(p.y, -p.x) * nudge;
p.xy *= normalizer;
// rotate on other axis
p.xz += vec2(p.z, -p.x) * nudge;
p.xz *= normalizer;
// increase the frequency
iter *= 1.733733;
}
return n;
}
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 position = texture2D(v_samplerPosition, uv).xyz;
vec3 velocity = texture2D(v_samplerVelocity, uv).xyz;
vec3 acceleration = vec3(0.);
float l = length(position);
vec3 spherical = vec3(1./l, atan(position.y, position.x), acos(position.z / l));
float n = SpiralNoiseC(spherical * 6. + u_time);
n = SpiralNoiseC(vec3(l, spherical.y * 6. + u_time * 5., spherical.z));
// n = fract(n) * 3.;
// spherical *= 1. + n;
spherical.z += (1. / n-.5)*length(velocity);
spherical.y += n;
float a = n * .1 + smoothstep(5., 40., l) * 20.;
a += smoothstep(20., 0., l) * .3;
a -= smoothstep(30., 41., l) * 21.;
// spherical.x +=;
// spherical.x += smoothstep(20., 0., l) * .3;
// spherical.x -= smoothstep(30., 41., l) * 21.;
// spherical.xy += n;
// spherical.z *= 1.5;
// spherical.z += 1.;
// spherical.x -= smoothstep(5., 1., l) * 1.;
// spherical.yz += n*.5;
acceleration.x = spherical.x * sin(spherical.z) * cos(spherical.y) * a;
acceleration.y = spherical.x * sin(spherical.z) * sin(spherical.y) * a;
acceleration.z = spherical.x * cos(spherical.z) * a;
// if(acceleration.x == 0) { acceleration.x = .01 };
// acceleration *= acceleration * acceleration * 200.;
// acceleration = sin(acceleration) * .5 + .5;
// acceleration *= 100.;
vec3 vel = velocity * .98 + acceleration * .3;
if(length(vel) > 5.) {
vel = normalize(vel) * 5.;
}
gl_FragColor = vec4(vel, 1.0);
// gl_FragColor = vec4(-.1);
}
</script>
<script id="fragmentShaderPosition" type="x-shader/x-fragment">
uniform float delta;
uniform float u_time;
uniform sampler2D v_samplerPosition_orig;
uniform sampler2D u_noise;
vec3 hash3(vec2 p)
{
vec3 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xyz;
return o;
}
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 position_original = texture2D(v_samplerPosition_orig, uv).xyz;
vec3 position = texture2D(v_samplerPosition, uv).xyz;
vec3 velocity = texture2D(v_samplerVelocity, uv).xyz;
// velocity -= .5;
// velocity *= 3.;
// velocity = velocity * 2. - 1.;
vec3 pos = position + velocity * delta;
// This just adds a little touch more randomness to the motion.
// This is incredibly subtle but has the effect of making the particles
// look more "separate" in motion
vec3 hash = hash3(position_original.xy * position_original.zx * 20.);
// pos *= 1. + (hash - .5) * .0005;
// pos += (hash - .5) * .001;
// vec2 p = vec2(atan(pos.y, pos.x), length(pos.xy));
// p.x -= velocity.x * .001 + .0001;
// pos.x = cos(p.x) * p.y;
// pos.y = sin(p.x) * p.y;
// pos.z += .005;
if(length(pos) > 40.) {
pos = position_original;
}
gl_FragColor = vec4(pos, 1.0);
}
</script>
<div id="container" touch-action="none"></div>
<script src='js/GPUComputationRenderer.js'></script>
<script src='js/OrbitControls.js'></script>
<script src="js/index.js"></script>
</body>
</html>
html5+three.js实现带科幻效果的粒子爆炸动画场景特效源码.zip （7个子文件） 
132686860569894213 css 
style.css 93B images 
noise.png 258KB
index.html 7KB js index.js 8KB GPUComputationRenderer.js 10KB OrbitControls.js 22KB three.min.js 508KB资源评论
毕业_设计
- 粉丝: 1992
- 资源: 1万+
