sparksjs
Version:
Sparks library for three.js with theen.js
590 lines (376 loc) • 15.7 kB
HTML
<html lang="en">
<head>
<title>three.js canvas/webgl - particles - shapes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript" src="../Sparks.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<!-- load the font file from canvas-text -->
<script type="text/javascript" src="js/helvetiker_regular.typeface.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
attribute float size;
attribute vec4 ca;
varying vec4 vColor;
void main() {
vColor = ca;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 150.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec4 vColor;
uniform float radius;
uniform vec2 delta;
varying vec2 texCoord;
void main() {
vec4 outColor = texture2D( texture, gl_PointCoord );
if ( outColor.a < 0.5 ) discard;
gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );
//float depth = gl_FragCoord.z / gl_FragCoord.w;
///const vec3 fogColor = vec3( 0.0 );
//float fogFactor = smoothstep( 200.0, 600.0, depth );
//gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}
</script>
<script type="text/javascript">
var container, stats;
var camera, scene, renderer;
var text, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var heartShape, particleCloud, sparksEmitter, emitterPos;
var _rotation = 0;
var timeOnShapePath = 0;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Three.js with WebGL Love. Simple Particle Systems with Shapes by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Move your mouse. Click to pause/resume.';
container.appendChild( info );
// CAMERA
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0, 150, 700 );
// SCENE
scene = new THREE.Scene();
// Get text from hash
var theText = "THREE.JS";
var hash = document.location.hash.substr( 1 );
if ( hash.length !== 0 ) {
theText = hash;
}
var text3d = new THREE.TextGeometry( theText, {
size: 80,
height: 20,
curveSegments: 2,
font: "helvetiker"
});
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
text = new THREE.Mesh( text3d, textMaterial );
// Potentially, we can extract the vertices or faces of the text to generate particles too.
// Geo > Vertices > Position
text.doubleSided = false;
text.position.x = centerOffset;
text.position.y = 100;
text.position.z = 0;
text.rotation.x = 0;
text.rotation.y = Math.PI * 2;
text.overdraw = true;
parent = new THREE.Object3D();
parent.add( text );
scene.add( parent );
///// Create particle objects for Three.js
var particleslength = 50000;
var particles = new THREE.Geometry();
function newpos(x, y, z) {
return new THREE.Vertex(
new THREE.Vector3(x, y, z)
);
}
var Pool = {
__pools: [],
// Get a new Vector
get: function() {
if (this.__pools.length>0) {
return this.__pools.pop();
}
console.log("pool ran out!")
return null;
},
// Release a vector back into the pool
add: function(v) {
this.__pools.push(v);
},
};
for ( i = 0; i < particleslength; i++ ) {
particles.vertices.push(newpos(Math.random() *200 - 100, Math.random() *100+150, Math.random() *50));
Pool.add(i);
}
// Create pools of vectors
attributes = {
size: { type: 'f', value: [] },
ca: { type: 'c', value: [] } //ca //customColor
};
var sprite = generateSprite() ;
textu = new THREE.Texture ( sprite );
textu.needsUpdate = true;
uniforms = {
amplitude: { type: "f", value: 1.0 },
color: { type: "c", value: new THREE.Color( 0xffffff ) },
texture: { type: "t", value: 0, texture:textu} //
//
};
// PARAMS.
// Steadycounter
// Life
// Opacity
// Hue Speed
// Movement Speed
function generateSprite() {
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
// Just a square, doesnt work too bad with blur pp.
// context.fillStyle = "white";
// context.strokeStyle = "white";
// context.fillRect(0, 0, 63, 63) ;
// Heart Shapes are not too pretty here
// var x = 4, y = 0;
// context.save();
// context.scale(8, 8); // Scale so canvas render can redraw within bounds
// context.beginPath();
// context.bezierCurveTo( x + 2.5, y + 2.5, x + 2.0, y, x, y );
// context.bezierCurveTo( x - 3.0, y, x - 3.0, y + 3.5,x - 3.0,y + 3.5 );
// context.bezierCurveTo( x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5 );
// context.bezierCurveTo( x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5 );
// context.bezierCurveTo( x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y );
// context.bezierCurveTo( x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5 );
// context.closePath();
context.beginPath();
context.arc(64, 64, 60, 0, Math.PI*2, false);
context.closePath();
context.lineWidth = 0.5; //0.05
context.stroke();
context.restore();
var gradient = context.createRadialGradient( canvas.width /2, canvas.height /2, 0, canvas.width /2, canvas.height /2, canvas.width /2 );
gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
gradient.addColorStop( 0.2, 'rgba(255,255,255,1)' );
//gradient.addColorStop( 0.6, 'rgba(200,200,200,1)' );
gradient.addColorStop( 0.4, 'rgba(128,128,128,1)' );
gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
context.fillStyle = gradient;
context.fill();
//var idata =context.getImageData(0, 0, canvas.width, canvas.height);
//document.body.appendChild(canvas);
return canvas;
}
var shaderMaterial = new THREE.MeshShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById( 'vertexshader' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader' ).textContent
,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
});
particleCloud = new THREE.ParticleSystem( particles, shaderMaterial );
particleCloud.dynamic = true;
//particleCloud.sortParticles = true;
var vertices = particleCloud.geometry.vertices;
var values_size = attributes.size.value;
var values_color = attributes.ca.value;
for( var v = 0; v < vertices.length; v++ ) {
values_size[ v ] = 50;
values_color[ v ] = new THREE.Color( 0xaaff00 );
values_color[ v ].setHSV( 0, 0, 0 );
particles.vertices[v].position.set(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
}
parent.add( particleCloud );
//scene.add( particleCloud );
particleCloud.y = 800;
// Create Particle Systems
// EMITTER STUFF
// Heart
var x = 0, y = 0;
heartShape = new THREE.Shape();
heartShape.moveTo( x + 25, y + 25 );
heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35,x - 30,y + 35 );
heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
var hue = 0;
var setTargetParticle = function() {
var target = Pool.get();
values_size[target] = Math.random() * 200 + 100;
return target;
};
var onParticleCreated = function(p) {
var position = p.position;
p.target.position = position;
var target = p.target;
if (target) {
//console.log(target,particles.vertices[target]);
//values_size[target]
//values_color[target]
hue += 0.0006;
if (hue>1) hue-=1;
// TODO Create a PointOnShape Action/Zone in the particle engine
timeOnShapePath += 0.002;
if (timeOnShapePath > 1) timeOnShapePath -= 1;
var pointOnShape = heartShape.getPointAt(timeOnShapePath);
emitterpos.x = pointOnShape.x * 5 - 100;
emitterpos.y = -pointOnShape.y * 5 + 400;
particles.vertices[target].position = p.position;
values_color[target].setHSV(hue, 0.8, 0.15);
};
};
var onParticleDead = function(particle) {
var target = particle.target;
if (target) {
// Hide the particle
values_color[target].setHSV(0, 0, 0);
particles.vertices[target].position.set(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
// Mark particle system as available by returning to pool
Pool.add(particle.target);
}
};
var engineLoopUpdate = function() {
};
sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(600));
emitterpos = new THREE.Vector3(0,0,0);
sparksEmitter.addInitializer(new SPARKS.Position( new SPARKS.PointZone( emitterpos ) ) );
sparksEmitter.addInitializer(new SPARKS.Lifetime(1,4));
sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle));
sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0,-50,10))));
// TOTRY Set velocity to move away from centroid
sparksEmitter.addAction(new SPARKS.Age());
sparksEmitter.addAction(new SPARKS.Accelerate(0,0,50));
sparksEmitter.addAction(new SPARKS.Move());
sparksEmitter.addAction(new SPARKS.RandomDrift(50,50,2000));
sparksEmitter.addCallback("created", onParticleCreated);
sparksEmitter.addCallback("dead", onParticleDead);
sparksEmitter.start();
//sparksEmitter.addCallback("loopUpdated", engineLoopUpdate);
//sparksEmitter.addCallback("updated", function(p) {
// var target = particle.target;
// if (target) {
// // update energy properties
// //values_size[target] = Math.random()*100;
// }
//});
//
// End Particles
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
// POST PROCESSING
var shaderFocus = THREE.ShaderExtras[ "focus" ];
var effectFocus = new THREE.ShaderPass( shaderFocus );
var shaderBlur = THREE.ShaderExtras[ "triangleBlur" ];
var effectBlur = new THREE.ShaderPass( shaderBlur, 'texture' );; //
var blurAmount = 0.0020;
effectBlur.uniforms['delta'].value = new THREE.Vector2(blurAmount,blurAmount);
effectFocus.uniforms['sampleDistance'].value = 0.99; //0.94
effectFocus.uniforms['waveFactor'].value = 0.002; //0.00125
var renderScene = new THREE.RenderPass( scene, camera );
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderScene );
composer.addPass( effectBlur ); // effectBlur effectFocus
effectBlur.renderToScreen = true;
effectFocus.renderToScreen = true;
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
function onDocumentMouseDown( event ) {
event.preventDefault();
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
if (sparksEmitter.isRunning()) {
sparksEmitter.stop();
} else {
sparksEmitter.start();
}
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
particleCloud.geometry.__dirtyVertices = true;
particleCloud.geometry.__dirtyColors = true;
attributes.size.needsUpdate = true;
attributes.ca.needsUpdate = true;
// Pretty cool effect if you enable this
//particleCloud.rotation.y += 0.05;
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
//renderer.render( scene, camera );
composer.render( );
}
</script>
</body>
</html>