mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-12-24 12:03:48 +01:00
673 lines
16 KiB
HTML
Executable File
673 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - particles - shapes</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
color: #aaa;
|
|
background-color: #000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<script src="../build/three.min.js"></script>
|
|
|
|
<script src="js/libs/stats.min.js"></script>
|
|
<script src="js/libs/tween.min.js"></script>
|
|
<script src="js/Sparks.js"></script>
|
|
|
|
<script src="js/shaders/CopyShader.js"></script>
|
|
<script src="js/shaders/FilmShader.js"></script>
|
|
<script src="js/shaders/FocusShader.js"></script>
|
|
<script src="js/shaders/HorizontalBlurShader.js"></script>
|
|
<script src="js/shaders/TriangleBlurShader.js"></script>
|
|
<script src="js/shaders/VerticalBlurShader.js"></script>
|
|
|
|
<script src="js/postprocessing/EffectComposer.js"></script>
|
|
<script src="js/postprocessing/RenderPass.js"></script>
|
|
<script src="js/postprocessing/ShaderPass.js"></script>
|
|
<script src="js/postprocessing/MaskPass.js"></script>
|
|
<script src="js/postprocessing/BloomPass.js"></script>
|
|
<script src="js/postprocessing/FilmPass.js"></script>
|
|
|
|
<!-- load the font file from canvas-text -->
|
|
|
|
|
|
<script src="fonts/helvetiker_regular.typeface.js"></script>
|
|
|
|
<script type="x-shader/x-vertex" id="vertexshader">
|
|
|
|
attribute float size;
|
|
attribute vec3 pcolor;
|
|
|
|
varying vec3 vColor;
|
|
|
|
void main() {
|
|
|
|
vColor = pcolor;
|
|
|
|
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
gl_PointSize = size * ( 200.0 / length( mvPosition.xyz ) );
|
|
|
|
gl_Position = projectionMatrix * mvPosition;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="x-shader/x-fragment" id="fragmentshader">
|
|
|
|
uniform sampler2D texture;
|
|
|
|
varying vec3 vColor;
|
|
|
|
void main() {
|
|
|
|
vec4 outColor = texture2D( texture, gl_PointCoord );
|
|
|
|
gl_FragColor = outColor * vec4( vColor, 1.0 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var group, text, plane;
|
|
|
|
var speed = 50;
|
|
|
|
var pointLight;
|
|
|
|
var targetRotation = 0;
|
|
var targetRotationOnMouseDown = 0;
|
|
|
|
var mouseX = 0;
|
|
var mouseXOnMouseDown = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var delta = 1, clock = new THREE.Clock();
|
|
|
|
var heartShape, particleCloud, sparksEmitter, emitterPos;
|
|
var _rotation = 0;
|
|
var timeOnShapePath = 0;
|
|
|
|
var composer;
|
|
var effectBlurX, effectBlurY, hblur, vblur;
|
|
|
|
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 - 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( 70, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
camera.position.set( 0, 150, 400 );
|
|
|
|
// SCENE
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// LIGHTS
|
|
|
|
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
directionalLight.position.set( 0, -1, 1 );
|
|
directionalLight.position.normalize();
|
|
scene.add( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffffff, 2, 300 );
|
|
pointLight.position.set( 0, 0, 0 );
|
|
scene.add( pointLight );
|
|
|
|
// TEXT
|
|
|
|
var theText = "THREE.JS";
|
|
|
|
// Get text from hash
|
|
|
|
var hash = document.location.hash.substr( 1 );
|
|
|
|
if ( hash.length !== 0 ) {
|
|
|
|
theText = hash;
|
|
|
|
}
|
|
|
|
var material = new THREE.MeshFaceMaterial( [
|
|
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, opacity: 0.95 } ),
|
|
new THREE.MeshLambertMaterial( { color: 0xffffff } )
|
|
] );
|
|
|
|
var text3d = new THREE.TextGeometry( theText, {
|
|
|
|
size: 70,
|
|
height: 25,
|
|
curveSegments: 4,
|
|
font: "helvetiker",
|
|
|
|
bevelEnabled: true,
|
|
bevelThickness: 2,
|
|
bevelSize: 2,
|
|
|
|
material: 0,
|
|
extrudeMaterial: 1
|
|
|
|
});
|
|
|
|
text3d.computeVertexNormals();
|
|
text3d.computeBoundingBox();
|
|
|
|
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
|
|
|
|
group = new THREE.Group();
|
|
scene.add( group );
|
|
|
|
text = new THREE.Mesh( text3d, material );
|
|
|
|
// Potentially, we can extract the vertices or faces of the text to generate particles too.
|
|
// Geo > Vertices > Position
|
|
|
|
text.position.x = centerOffset;
|
|
text.position.y = 130;
|
|
text.position.z = -50;
|
|
|
|
text.rotation.x = 0;
|
|
text.rotation.y = Math.PI * 2;
|
|
|
|
group.add( text );
|
|
|
|
// Create particle objects for Three.js
|
|
|
|
var particlesLength = 70000;
|
|
|
|
var particles = new THREE.Geometry();
|
|
|
|
function newpos( x, y, z ) {
|
|
|
|
return 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: [] },
|
|
pcolor: { type: 'c', value: [] }
|
|
|
|
};
|
|
|
|
var sprite = generateSprite() ;
|
|
|
|
texture = new THREE.Texture( sprite );
|
|
texture.needsUpdate = true;
|
|
|
|
uniforms = {
|
|
|
|
texture: { type: "t", value: texture }
|
|
|
|
};
|
|
|
|
// PARAMETERS
|
|
|
|
// 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.beginPath();
|
|
context.arc( 64, 64, 60, 0, Math.PI * 2, false) ;
|
|
|
|
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.4, 'rgba(200,200,200,1)' );
|
|
gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
|
|
|
|
context.fillStyle = gradient;
|
|
|
|
context.fill();
|
|
|
|
return canvas;
|
|
|
|
}
|
|
|
|
|
|
var shaderMaterial = new THREE.ShaderMaterial( {
|
|
|
|
uniforms: uniforms,
|
|
attributes: attributes,
|
|
|
|
vertexShader: document.getElementById( 'vertexshader' ).textContent,
|
|
fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
|
|
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
transparent: true
|
|
|
|
});
|
|
|
|
particleCloud = new THREE.PointCloud( particles, shaderMaterial );
|
|
|
|
var vertices = particleCloud.geometry.vertices;
|
|
var values_size = attributes.size.value;
|
|
var values_color = attributes.pcolor.value;
|
|
|
|
for( var v = 0; v < vertices.length; v ++ ) {
|
|
|
|
values_size[ v ] = 50;
|
|
|
|
values_color[ v ] = new THREE.Color( 0x000000 );
|
|
|
|
particles.vertices[ v ].set( Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY );
|
|
|
|
}
|
|
|
|
group.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.0003 * delta;
|
|
if ( hue > 1 ) hue -= 1;
|
|
|
|
// TODO Create a PointOnShape Action/Zone in the particle engine
|
|
|
|
timeOnShapePath += 0.00035 * delta;
|
|
if ( timeOnShapePath > 1 ) timeOnShapePath -= 1;
|
|
|
|
var pointOnShape = heartShape.getPointAt( timeOnShapePath );
|
|
|
|
emitterpos.x = pointOnShape.x * 5 - 100;
|
|
emitterpos.y = -pointOnShape.y * 5 + 400;
|
|
|
|
// pointLight.position.copy( emitterpos );
|
|
pointLight.position.x = emitterpos.x;
|
|
pointLight.position.y = emitterpos.y;
|
|
pointLight.position.z = 100;
|
|
|
|
particles.vertices[ target ] = p.position;
|
|
|
|
values_color[ target ].setHSL( hue, 0.6, 0.1 );
|
|
|
|
pointLight.color.setHSL( hue, 0.8, 0.5 );
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
var onParticleDead = function( particle ) {
|
|
|
|
var target = particle.target;
|
|
|
|
if ( target ) {
|
|
|
|
// Hide the particle
|
|
|
|
values_color[ target ].setRGB( 0, 0, 0 );
|
|
particles.vertices[ target ].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( 500 ) );
|
|
|
|
emitterpos = new THREE.Vector3( 0, 0, 0 );
|
|
|
|
sparksEmitter.addInitializer( new SPARKS.Position( new SPARKS.PointZone( emitterpos ) ) );
|
|
sparksEmitter.addInitializer( new SPARKS.Lifetime( 1, 15 ));
|
|
sparksEmitter.addInitializer( new SPARKS.Target( null, setTargetParticle ) );
|
|
|
|
|
|
sparksEmitter.addInitializer( new SPARKS.Velocity( new SPARKS.PointZone( new THREE.Vector3( 0, -5, 1 ) ) ) );
|
|
|
|
sparksEmitter.addAction( new SPARKS.Age() );
|
|
sparksEmitter.addAction( new SPARKS.Accelerate( 0, 0, -50 ) );
|
|
sparksEmitter.addAction( new SPARKS.Move() );
|
|
sparksEmitter.addAction( new SPARKS.RandomDrift( 90, 100, 2000 ) );
|
|
|
|
|
|
sparksEmitter.addCallback( "created", onParticleCreated );
|
|
sparksEmitter.addCallback( "dead", onParticleDead );
|
|
sparksEmitter.start();
|
|
|
|
// End Particles
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
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 effectFocus = new THREE.ShaderPass( THREE.FocusShader );
|
|
|
|
var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
|
|
effectFilm = new THREE.FilmPass( 0.5, 0.25, 2048, false );
|
|
|
|
var shaderBlur = THREE.TriangleBlurShader;
|
|
effectBlurX = new THREE.ShaderPass( shaderBlur, 'texture' );
|
|
effectBlurY = new THREE.ShaderPass( shaderBlur, 'texture' );
|
|
|
|
var radius = 15;
|
|
var blurAmountX = radius / window.innerWidth;
|
|
var blurAmountY = radius / window.innerHeight;
|
|
|
|
hblur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
|
|
vblur = new THREE.ShaderPass( THREE.VerticalBlurShader);
|
|
|
|
hblur.uniforms[ 'h' ].value = 1 / window.innerWidth;
|
|
vblur.uniforms[ 'v' ].value = 1 / window.innerHeight;
|
|
|
|
effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
|
|
effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
|
|
|
|
effectFocus.uniforms[ 'sampleDistance' ].value = 0.99; //0.94
|
|
effectFocus.uniforms[ 'waveFactor' ].value = 0.003; //0.00125
|
|
|
|
var renderScene = new THREE.RenderPass( scene, camera );
|
|
|
|
composer = new THREE.EffectComposer( renderer );
|
|
composer.addPass( renderScene );
|
|
composer.addPass( hblur );
|
|
composer.addPass( vblur );
|
|
// composer.addPass( effectBlurX );
|
|
// composer.addPass( effectBlurY );
|
|
// composer.addPass( effectCopy );
|
|
// composer.addPass( effectFocus );
|
|
// composer.addPass( effectFilm );
|
|
|
|
vblur.renderToScreen = true;
|
|
effectBlurY.renderToScreen = true;
|
|
effectFocus.renderToScreen = true;
|
|
effectCopy.renderToScreen = true;
|
|
effectFilm.renderToScreen = true;
|
|
|
|
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
//
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
windowHalfX = window.innerWidth / 2;
|
|
windowHalfY = window.innerHeight / 2;
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
//
|
|
|
|
hblur.uniforms[ 'h' ].value = 1 / window.innerWidth;
|
|
vblur.uniforms[ 'v' ].value = 1 / window.innerHeight;
|
|
|
|
var radius = 15;
|
|
var blurAmountX = radius / window.innerWidth;
|
|
var blurAmountY = radius / window.innerHeight;
|
|
|
|
effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
|
|
effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
|
|
|
|
composer.reset();
|
|
|
|
}
|
|
|
|
//
|
|
|
|
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() {
|
|
|
|
delta = speed * clock.getDelta();
|
|
|
|
particleCloud.geometry.verticesNeedUpdate = true;
|
|
|
|
attributes.size.needsUpdate = true;
|
|
attributes.pcolor.needsUpdate = true;
|
|
|
|
// Pretty cool effect if you enable this
|
|
// particleCloud.rotation.y += 0.05;
|
|
|
|
group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
|
|
|
|
renderer.clear();
|
|
|
|
// renderer.render( scene, camera );
|
|
composer.render( 0.1 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|