|
|
@@ -0,0 +1,407 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - lines - splines</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ background-color: #000000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color:#0078ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px; width: 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: Monospace;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ z-index:100;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: orange;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ color: #0080ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - splines WebGL demo
|
|
|
+ [<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>,
|
|
|
+ Catmull-Rom spline thanks to <a href="https://github.com/sole/tween.js">sole</a>]
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script type="text/javascript" src="../build/Three.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript" src="js/Detector.js"></script>
|
|
|
+ <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
|
+ <script type="text/javascript" src="js/Stats.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ var postprocessing = false;
|
|
|
+
|
|
|
+ var mouseX = 0, mouseY = 0,
|
|
|
+
|
|
|
+ windowHalfX = window.innerWidth / 2,
|
|
|
+ windowHalfY = window.innerHeight / 2,
|
|
|
+
|
|
|
+ camera, scene, renderer, material;
|
|
|
+
|
|
|
+ var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ var i, n_sub, container;
|
|
|
+
|
|
|
+ container = document.createElement('div');
|
|
|
+ document.body.appendChild(container);
|
|
|
+
|
|
|
+ camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
+ camera.position.z = 700;
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.autoClear = false;
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ var geometry = new THREE.Geometry(),
|
|
|
+ geometry2 = new THREE.Geometry(),
|
|
|
+ geometry3 = new THREE.Geometry(),
|
|
|
+ points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
|
|
|
+ colors = [], colors2 = [], colors3 = [];
|
|
|
+
|
|
|
+ n_sub = 6;
|
|
|
+
|
|
|
+ var position, index;
|
|
|
+
|
|
|
+ var spline = new Spline();
|
|
|
+
|
|
|
+ for ( i = 0; i < points.length * n_sub; i ++ ) {
|
|
|
+
|
|
|
+ index = i / ( points.length * n_sub );
|
|
|
+ position = spline.get2DPoint( points, index );
|
|
|
+
|
|
|
+ geometry.vertices[ i ] = new THREE.Vertex( new THREE.Vector3( position.x, position.y, position.z ) );
|
|
|
+
|
|
|
+ colors[ i ] = new THREE.Color( 0xffffff );
|
|
|
+ colors[ i ].setHSV( 0.6, ( 200 + position.x ) / 400, 1.0 );
|
|
|
+
|
|
|
+ colors2[ i ] = new THREE.Color( 0xffffff );
|
|
|
+ //colors2[ i ].setHSV( 0.1, 1.0, ( 200 + position.x ) / 400 );
|
|
|
+ colors2[ i ].setHSV( 0.9, ( 200 + position.y ) / 400, 1.0 );
|
|
|
+
|
|
|
+ colors3[ i ] = new THREE.Color( 0xffffff );
|
|
|
+ colors3[ i ].setHSV( i / ( points.length * n_sub ), 1.0, 1.0 );
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ geometry2.vertices = geometry3.vertices = geometry.vertices;
|
|
|
+
|
|
|
+ geometry.colors = colors;
|
|
|
+ geometry2.colors = colors2;
|
|
|
+ geometry3.colors = colors3;
|
|
|
+
|
|
|
+ // lines
|
|
|
+
|
|
|
+ material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
|
|
|
+
|
|
|
+ var line, p, scale = 0.3, d = 225,
|
|
|
+ parameters = [ [ material, scale*1.5, [-d,0,0], geometry ],
|
|
|
+ [ material, scale*1.5, [0,0,0], geometry2 ],
|
|
|
+ [ material, scale*1.5, [d,0,0], geometry3 ] ];
|
|
|
+
|
|
|
+ material.vertexColors = true;
|
|
|
+
|
|
|
+ for ( i = 0; i < parameters.length; ++i ) {
|
|
|
+
|
|
|
+ p = parameters[ i ];
|
|
|
+ line = new THREE.Line( p[ 3 ], p[ 0 ] );
|
|
|
+ line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
|
|
|
+ line.position.x = p[ 2 ][ 0 ];
|
|
|
+ line.position.y = p[ 2 ][ 1 ];
|
|
|
+ line.position.z = p[ 2 ][ 2 ];
|
|
|
+ scene.addObject( line );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // postprocessing
|
|
|
+
|
|
|
+ cameraOrtho = new THREE.Camera();
|
|
|
+ cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
|
|
|
+ cameraOrtho.position.z = 100;
|
|
|
+
|
|
|
+ sceneScreen = new THREE.Scene();
|
|
|
+
|
|
|
+ var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
|
|
|
+ rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
|
|
|
+ rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
|
|
|
+ rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
|
|
|
+
|
|
|
+ var screen_shader = ShaderUtils.lib["screen"];
|
|
|
+ var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
|
|
|
+
|
|
|
+ screen_uniforms["tDiffuse"].texture = rtTexture1;
|
|
|
+ screen_uniforms["opacity"].value = 1.0;
|
|
|
+
|
|
|
+ materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
+
|
|
|
+ uniforms: screen_uniforms,
|
|
|
+ vertexShader: screen_shader.vertexShader,
|
|
|
+ fragmentShader: screen_shader.fragmentShader,
|
|
|
+ blending: THREE.AdditiveBlending
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ var convolution_shader = ShaderUtils.lib["convolution"];
|
|
|
+ var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
|
|
|
+
|
|
|
+ blurx = new THREE.Vector2( 0.001953125, 0.0 ),
|
|
|
+ blury = new THREE.Vector2( 0.0, 0.001953125 );
|
|
|
+
|
|
|
+ convolution_uniforms["tDiffuse"].texture = rtTexture1;
|
|
|
+ convolution_uniforms["uImageIncrement"].value = blurx;
|
|
|
+ convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
|
|
|
+
|
|
|
+ materialConvolution = new THREE.MeshShaderMaterial( {
|
|
|
+
|
|
|
+ uniforms: convolution_uniforms,
|
|
|
+ vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
|
|
|
+ fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ var plane = new Plane( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ quadScreen = new THREE.Mesh( plane, materialConvolution );
|
|
|
+ quadScreen.position.z = -100;
|
|
|
+ sceneScreen.addObject( quadScreen );
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ //container.appendChild(stats.domElement);
|
|
|
+
|
|
|
+
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+ document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
+ document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // Spline from Tween.js, slightly optimized
|
|
|
+ // http://sole.github.com/tween.js/examples/05_spline.html
|
|
|
+
|
|
|
+ function Spline() {
|
|
|
+
|
|
|
+ var c = [], v3 = { x: 0, y: 0, z: 0 },
|
|
|
+ point, intPoint, weight, w2, w3,
|
|
|
+ pa, pb, pc, pd;
|
|
|
+
|
|
|
+ this.get2DPoint = function ( points, k ) {
|
|
|
+
|
|
|
+ point = ( points.length - 1 ) * k;
|
|
|
+ intPoint = Math.floor( point );
|
|
|
+ weight = point - intPoint;
|
|
|
+
|
|
|
+ c[ 0 ] = intPoint == 0 ? intPoint : intPoint - 1;
|
|
|
+ c[ 1 ] = intPoint;
|
|
|
+ c[ 2 ] = intPoint > points.length - 2 ? intPoint : intPoint + 1;
|
|
|
+ c[ 3 ] = intPoint > points.length - 3 ? intPoint : intPoint + 2;
|
|
|
+
|
|
|
+ pa = points[ c[ 0 ] ];
|
|
|
+ pb = points[ c[ 1 ] ];
|
|
|
+ pc = points[ c[ 2 ] ];
|
|
|
+ pd = points[ c[ 3 ] ];
|
|
|
+
|
|
|
+ w2 = weight * weight;
|
|
|
+ w3 = weight * w2;
|
|
|
+
|
|
|
+ v3.x = interpolate( pa.x, pb.x, pc.x, pd.x, weight, w2, w3 );
|
|
|
+ v3.y = interpolate( pa.y, pb.y, pc.y, pd.y, weight, w2, w3 );
|
|
|
+ v3.z = interpolate( pa.z, pb.z, pc.z, pd.z, weight, w2, w3 );
|
|
|
+
|
|
|
+ return v3;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // Catmull-Rom
|
|
|
+
|
|
|
+ function interpolate( p0, p1, p2, p3, t, t2, t3 ) {
|
|
|
+
|
|
|
+ var v0 = ( p2 - p0 ) * 0.5,
|
|
|
+ v1 = ( p3 - p1 ) * 0.5;
|
|
|
+
|
|
|
+ return ( 2 * ( p1 - p2 ) + v0 + v1 ) * t3 + ( - 3 * ( p1 - p2 ) - 2 * v0 - v1 ) * t2 + v0 * t + p1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // port of Processing Java code by Thomas Diewald
|
|
|
+ // http://www.openprocessing.org/visuals/?visualID=15599
|
|
|
+
|
|
|
+ function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
|
|
|
+
|
|
|
+ var half = side/2,
|
|
|
+
|
|
|
+ vec_s = [
|
|
|
+
|
|
|
+ new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
|
|
|
+ new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
|
|
|
+ new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
|
|
|
+ new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
|
|
|
+ new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
|
|
|
+ new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
|
|
|
+ new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
|
|
|
+ new THREE.Vector3( center.x + half, center.y + half, center.z - half )
|
|
|
+
|
|
|
+ ],
|
|
|
+
|
|
|
+ vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
|
|
|
+
|
|
|
+ if( --iterations >= 0 ) {
|
|
|
+
|
|
|
+ var tmp = [];
|
|
|
+
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
|
+ tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
|
|
|
+
|
|
|
+ return tmp;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ return vec;
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ function onDocumentMouseMove(event) {
|
|
|
+
|
|
|
+ mouseX = event.clientX - windowHalfX;
|
|
|
+ mouseY = event.clientY - windowHalfY;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchStart( event ) {
|
|
|
+
|
|
|
+ if ( event.touches.length > 1 ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchMove( event ) {
|
|
|
+
|
|
|
+ if ( event.touches.length == 1 ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+
|
|
|
+ requestAnimationFrame( animate );
|
|
|
+ render();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
+ camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
|
|
|
+ camera.updateMatrix();
|
|
|
+
|
|
|
+ var time = new Date().getTime() * 0.0005;
|
|
|
+
|
|
|
+ for( var i = 0; i<scene.objects.length; i++ ) {
|
|
|
+
|
|
|
+ scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ renderer.clear();
|
|
|
+
|
|
|
+ if ( postprocessing ) {
|
|
|
+
|
|
|
+ // Render scene into texture
|
|
|
+
|
|
|
+ renderer.render( scene, camera, rtTexture1 );
|
|
|
+
|
|
|
+ // Render quad with blured scene into texture (convolution pass 1)
|
|
|
+
|
|
|
+ quadScreen.materials = [ materialConvolution ];
|
|
|
+
|
|
|
+ materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
|
|
|
+ materialConvolution.uniforms.uImageIncrement.value = blurx;
|
|
|
+
|
|
|
+ renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
|
|
|
+
|
|
|
+ // Render quad with blured scene into texture (convolution pass 2)
|
|
|
+
|
|
|
+ materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
|
|
|
+ materialConvolution.uniforms.uImageIncrement.value = blury;
|
|
|
+
|
|
|
+ renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
|
|
|
+
|
|
|
+ // Render original scene with superimposed blur to texture
|
|
|
+
|
|
|
+ quadScreen.materials = [ materialScreen ];
|
|
|
+
|
|
|
+ materialScreen.uniforms.tDiffuse.texture = rtTexture3;
|
|
|
+ materialScreen.uniforms.opacity.value = 1.3;
|
|
|
+
|
|
|
+ renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
|
|
|
+
|
|
|
+ // Render to screen
|
|
|
+
|
|
|
+ materialScreen.uniforms.tDiffuse.texture = rtTexture1;
|
|
|
+ renderer.render( sceneScreen, cameraOrtho );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
alteredq